انتخابگر عکس جاسازیشده: روشی یکپارچهتر برای درخواست خصوصی عکسها و ویدیوها در برنامه شما
با روش جدید و هیجانانگیز استفاده از انتخابگر عکس Android، برای بهبود تجربه کاربری برنامهتان آماده شوید! انتخابگر عکس جاسازیشده جدید روشی یکپارچه و با تمرکز بر حریم خصوصی برای کاربران ارائه میدهد تا عکسها و ویدیوها را مستقیماً در میانای برنامه شما انتخاب کنند. اکنون برنامهتان میتواند از همه مزایای موجود در انتخابگر عکس، ازجمله دسترسی به محتوای ابری، که مستقیماً در تجربه برنامهتان ادغام شده است بهرهمند شود.
چرا جاسازیشده؟
میدانیم که بسیاری از برنامهها میخواهند هنگام انتخاب عکس یا ویدیو، تجربهای بسیار یکپارچه و روان برای کاربران فراهم کنند. انتخابگر عکس جاسازیشده دقیقاً برای همین کار طراحی شده است و به کاربران امکان میدهد بدون ترک کردن برنامه شما، بهسرعت به عکسهای اخیرشان دسترسی پیدا کنند. آنها همچنین میتوانند کل کتابخانهشان را در ارائهدهنده رسانه ابری دلخواهشان (مثلاً Google Photos)، ازجمله موارد دلخواه، آلبومها، و عملکرد جستجو کاوش کنند. این کار نیاز به جابهجایی بین برنامهها یا نگرانی درباره اینکه عکس موردنظر در دستگاه ذخیره شده است یا در فضای ابری را ازبین میبرد.
ادغام یکپارچه، حریم خصوصی بهبودیافته
با انتخابگر عکس جاسازیشده، برنامهتان تا زمانی که کاربر واقعاً چیزی را انتخاب نکند، نیازی به دسترسی به عکسها یا ویدیوهای کاربر ندارد. این یعنی حریم خصوصی بیشتر برای کاربران شما و تجربهای سادهتر. بهعلاوه، انتخابگر عکس جاسازیشده به کاربران امکان میدهد به کل کتابخانه رسانهای مبتنی بر ابر خود دسترسی داشته باشند، درحالیکه اجازه عکس استاندارد فقط به فایلهای محلی محدود میشود.
انتخابگر عکس جاسازیشده در «پیامنگار Google»
«پیامنگار Google» قدرت انتخابگر عکس جاسازیشده را نشان میدهد. در اینجا نحوه ادغام آن را میبینید:
- جایگذاری شهودی: انتخابگر عکس درست زیر دکمه دوربین قرار دارد و به کاربران امکان میدهد بهراحتی بین گرفتن عکس جدید یا انتخاب عکس موجود یکی را انتخاب کنند.
- پیشنمایش پویا: بلافاصله پساز اینکه کاربر روی عکسی تکضرب میزند، پیشنمایش بزرگی میبیند که تأیید انتخاب را آسان میکند. اگر انتخاب عکس را لغو کنند، پیشنمایش ناپدید میشود و تجربه تمیز و مرتب باقی میماند.
- ازهم باز کردن برای محتوای بیشتر: نمای اولیه ساده شده است و دسترسی آسان به عکسهای اخیر را ارائه میدهد. بااینحال، کاربران میتوانند بهراحتی انتخابگر عکس را گسترش دهند تا همه عکسها و ویدیوهای موجود در کتابخانه خود، ازجمله محتوای ابری Google Photos، را مرور و انتخاب کنند.
- احترام به انتخابهای کاربر: انتخابگر عکس جاسازیشده فقط به عکسها یا ویدیوهای خاصی که کاربر انتخاب میکند دسترسی میدهد، یعنی برنامهها میتوانند درخواست اجازههای عکس و ویدیو را بهطور کامل متوقف کنند. این کار همچنین باعث میشود «پیامنگار» نیازی به مدیریت شرایطی نداشته باشد که کاربران فقط دسترسی محدودی به عکسها و ویدیوها اعطا میکنند.
پیادهسازی
ادغام کردن انتخابگر عکس جاسازیشده با کتابخانه Photo Picker Jetpack آسان شده است.
Jetpack Compose
ابتدا، کتابخانه «انتخابگر عکس Jetpack» را بهعنوان وابستگی اضافه کنید.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
تابع ترکیبپذیر EmbeddedPhotoPicker سازوکاری برای گنجاندن مستقیم واسط کاربر انتخابگر عکس جاسازیشده در صفحه Compose ارائه میدهد. این ترکیبپذیر یک SurfaceView ایجاد میکند که میزبان واسط کاربر انتخابگر عکس جاسازیشده است. این کلاس اتصال به سرویس EmbeddedPhotoPicker را مدیریت میکند، تعاملات کاربر را کنترل میکند، و شناسه منبع یکسان رسانههای انتخابشده را به برنامه فراخواننده منتقل میکند.
@Composable
fun EmbeddedPhotoPickerDemo() {
// We keep track of the list of selected attachments
var attachments by remember { mutableStateOf(emptyList<Uri>()) }
val coroutineScope = rememberCoroutineScope()
// We hide the bottom sheet by default but we show it when the user clicks on the button
val scaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = rememberStandardBottomSheetState(
initialValue = SheetValue.Hidden,
skipHiddenState = false
)
)
// Customize the embedded photo picker
val photoPickerInfo = EmbeddedPhotoPickerFeatureInfo
.Builder()
// Set limit the selection to 5 items
.setMaxSelectionLimit(5)
// Order the items selection (each item will have an index visible in the photo picker)
.setOrderedSelection(true)
// Set the accent color (red in this case, otherwise it follows the device's accent color)
.setAccentColor(0xFF0000)
.build()
// The embedded photo picker state will be stored in this variable
val photoPickerState = rememberEmbeddedPhotoPickerState(
onSelectionComplete = {
coroutineScope.launch {
// Hide the bottom sheet once the user has clicked on the done button inside the picker
scaffoldState.bottomSheetState.hide()
}
},
onUriPermissionGranted = {
// We update our list of attachments with the new Uris granted
attachments += it
},
onUriPermissionRevoked = {
// We update our list of attachments with the Uris revoked
attachments -= it
}
)
SideEffect {
val isExpanded = scaffoldState.bottomSheetState.targetValue == SheetValue.Expanded
// We show/hide the embedded photo picker to match the bottom sheet state
photoPickerState.setCurrentExpanded(isExpanded)
}
BottomSheetScaffold(
topBar = {
TopAppBar(title = { Text("Embedded Photo Picker demo") })
},
scaffoldState = scaffoldState,
sheetPeekHeight = if (scaffoldState.bottomSheetState.isVisible) 400.dp else 0.dp,
sheetContent = {
Column(Modifier.fillMaxWidth()) {
// We render the embedded photo picker inside the bottom sheet
EmbeddedPhotoPicker(
state = photoPickerState,
embeddedPhotoPickerFeatureInfo = photoPickerInfo
)
}
}
) { innerPadding ->
Column(Modifier.padding(innerPadding).fillMaxSize().padding(horizontal = 16.dp)) {
Button(onClick = {
coroutineScope.launch {
// We expand the bottom sheet, which will trigger the embedded picker to be shown
scaffoldState.bottomSheetState.partialExpand()
}
}) {
Text("Open photo picker")
}
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 64.dp)) {
// We render the image using the Coil library
itemsIndexed(attachments) { index, uri ->
AsyncImage(
model = uri,
contentDescription = "Image ${index + 1}",
contentScale = ContentScale.Crop,
modifier = Modifier.clickable {
coroutineScope.launch {
// When the user clicks on the media from the app's UI, we deselect it
// from the embedded photo picker by calling the method deselectUri
photoPickerState.deselectUri(uri)
}
}
)
}
}
}
}
}بازدیدها
ابتدا، کتابخانه «انتخابگر عکس Jetpack» را بهعنوان وابستگی اضافه کنید.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
برای افزودن انتخابگر عکس جاسازیشده، باید ورودیای به فایل چیدمانتان اضافه کنید.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />و آن را در فعالیت/قطعه خود مقداردهی اولیه کنید.
// We keep track of the list of selected attachments
private val _attachments = MutableStateFlow(emptyList<Uri>())
val attachments = _attachments.asStateFlow()
private lateinit var picker: EmbeddedPhotoPickerView
private var openSession: EmbeddedPhotoPickerSession? = null
val pickerListener = object EmbeddedPhotoPickerStateChangeListener {
override fun onSessionOpened (newSession: EmbeddedPhotoPickerSession) {
openSession = newSession
}
override fun onSessionError (throwable: Throwable) {}
override fun onUriPermissionGranted(uris: List<Uri>) {
_attachments += uris
}
override fun onUriPermissionRevoked (uris: List<Uri>) {
_attachments -= uris
}
override fun onSelectionComplete() {
// Hide the embedded photo picker as the user is done with the photo/video selection
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_view)
//
// Add the embedded photo picker to a bottom sheet to allow the dragging to display the full photo library
//
picker = findViewById(R.id.photopicker)
picker.addEmbeddedPhotoPickerStateChangeListener(pickerListener)
picker.setEmbeddedPhotoPickerFeatureInfo(
// Set a custom accent color
EmbeddedPhotoPickerFeatureInfo.Builder().setAccentColor(0xFF0000).build()
)
}میتوانید روشهای مختلف EmbeddedPhotoPickerSession را برای تعامل با انتخابگر جاسازیشده فراخوانی کنید.
// Notify the embedded picker of a configuration change openSession.notifyConfigurationChanged(newConfig) // Update the embedded picker to expand following a user interaction openSession.notifyPhotoPickerExpanded(/* expanded: */ true) // Resize the embedded picker openSession.notifyResized(/* width: */ 512, /* height: */ 256) // Show/hide the embedded picker (after a form has been submitted) openSession.notifyVisibilityChanged(/* visible: */ false) // Remove unselected media from the embedded picker after they have been // unselected from the host app's UI openSession.requestRevokeUriPermission(removedUris)
توجه به این نکته مهم است که تجربه انتخابگر عکس جاسازیشده برای کاربرانی که از Android 14 (سطح میانای برنامهسازی کاربردی ۳۴) یا بالاتر با «افزونههای کیت توسعه نرمافزار» نسخه ۱۵ یا بالاتر استفاده میکنند دردسترس است. درباره دردسترس بودن انتخابگر عکس در دستگاه بیشتر بخوانید.
برای افزایش حریم خصوصی و امنیت کاربر، سیستم انتخابگر عکس جاسازیشده را بهگونهای ارائه میکند که از هرگونه ترسیم یا همپوشانی جلوگیری شود. این انتخاب طراحی عمدی به این معنی است که UX شما باید ناحیه نمایش انتخابگر عکس را بهعنوان یک عنصر متمایز و اختصاصی درنظر بگیرد، درست مانند برنامهریزی برای یک برنمای تبلیغاتی.
اگر بازخورد یا پیشنهادی دارید، تیکتها را به ردیاب مشکل ما ارسال کنید.
-
اخبار محصولبرنامههایی که نسخه آتی Android را هدف قرار میدهند دیگر نمیتوانند با اجازه WRITE_CONTACTS مستقیماً در مخاطبین بنویسند.
Roxanna Aliabadi Walker • ۶ دقیقه خواندن -
اخبار محصولحریم خصوصی و کنترل کاربر همچنان در کانون تجربه Android قرار دارد. همانطور که انتخابگر عکس همرسانی رسانه را ایمن و پیادهسازی آن را آسان کرد، اکنون همان سطح از حریم خصوصی، سادگی، و تجربه کاربری عالی را به انتخاب مخاطب میآوریم.
Roxanna Aliabadi Walker • زمان خواندن: ۴ دقیقه -
اخبار محصولاز غوطهوری کامل در خانه تا تجربههای اجمالی درحال حرکت، ساختن روی Android XR به شما امکان میدهد در هر لحظه در سراسر طیف برنامههای فضایی با کاربران ملاقات کنید. در «نشست توسعهدهندگان Android»، با راهاندازی XREAL AURA به نقطه عطف هیجانانگیزی رسیدیم.
Amy Zeppenfeld, Vinny DaSilva • ۳ دقیقه خواندن
جدیدترین اطلاعات آماری توسعه Android را بهصورت هفتگی در صندوق ورودیتان دریافت کنید.