انتخابگر عکس جاسازیشده: روشی یکپارچهتر برای درخواست خصوصی عکسها و ویدیوها در برنامه شما
با روش جدید و هیجانانگیزی برای استفاده از انتخابگر عکس Android، آماده بهبود تجربه کاربری برنامهتان شوید! انتخابگر عکس جاسازیشده جدید روشی یکپارچه و حریم خصوصیمحور برای کاربران فراهم میکند تا عکسها و ویدیوها را مستقیماً در رابط برنامه شما انتخاب کنند. اکنون برنامه شما میتواند از همه مزایای موجود در انتخابگر عکس، ازجمله دسترسی به محتوای ابری، که مستقیماً در تجربه برنامه شما ادغام شده است، بهرهمند شود.
چرا جاسازیشده؟
ما درک میکنیم که بسیاری از برنامهها میخواهند هنگام انتخاب عکسها یا ویدیوها، تجربه یکپارچه و یکپارچهای را برای کاربران فراهم کنند. انتخابگر عکس جاسازیشده دقیقاً برای همین منظور طراحی شده است و به کاربران امکان میدهد بدون اینکه از برنامه شما خارج شوند، بهسرعت به عکسهای اخیرشان دسترسی پیدا کنند. آنها همچنین میتوانند کتابخانه کامل خود را در ارائهدهنده رسانه ابری ترجیحیشان (برای نمونه، Google Photos)، ازجمله موارد دلخواه، آلبومها، و عملکرد جستجو، کاوش کنند. این کار نیاز کاربران به جابهجایی بین برنامهها یا نگرانی درباره اینکه عکس موردنظرشان بهصورت محلی یا در فضای ابری ذخیره شده است را ازبین میبرد.
ادغام یکپارچه، حریم خصوصی بهبودیافته
با انتخابگر عکس جاسازیشده، برنامه شما تا زمانی که کاربر چیزی را انتخاب نکرده است نیازی به دسترسی به عکسها یا ویدیوهای کاربر ندارد. این یعنی حریم خصوصی بیشتر برای کاربران شما و تجربه روانتر. بهعلاوه، انتخابگر عکس جاسازیشده به کاربران امکان میدهد به کل کتابخانه رسانهای ابری خود دسترسی داشته باشند، درحالیکه اجازه عکس استاندارد فقط به فایلهای محلی محدود میشود.
انتخابگر عکس جاسازیشده در «پیامنگار Google»
«پیامنگار Google» قدرت انتخابگر عکس جاسازیشده را بهنمایش میگذارد. در اینجا نحوه ادغام آن آمده است:
- جایگذاری شهودی: انتخابگر عکس درست زیر دکمه دوربین قرار میگیرد و به کاربران امکان میدهد بهراحتی بین گرفتن عکس جدید یا انتخاب عکس موجود یکی را انتخاب کنند.
- پیشنمایش پویا: بلافاصله پساز اینکه کاربر روی عکسی تکضرب میزند، پیشنمایش بزرگی از آن را میبیند که تأیید انتخاب را آسان میکند. اگر عکس را لغو انتخاب کنند، پیشنمایش ناپدید میشود و تجربه تمیز و بدون درهمریختگی باقی میماند.
- ازهم بازکردن برای محتوای بیشتر: نمای اولیه ساده شده است و دسترسی آسان به عکسهای اخیر را ارائه میدهد. بااینحال، کاربران میتوانند بهراحتی انتخابگر عکس را ازهم باز کنند تا همه عکسها و ویدیوهای کتابخانهشان، ازجمله محتوای ابری Google Photos، را مرور و انتخاب کنند.
- احترام به انتخابهای کاربر: انتخابگر عکس جاسازیشده فقط به عکسها یا ویدیوهای خاصی که کاربر انتخاب میکند دسترسی میدهد، یعنی کاربر میتواند درخواست اجازههای عکس و ویدیو را بهطور کامل متوقف کند. این کار همچنین «پیامنگار» را از نیاز به مدیریت موقعیتهایی که کاربران فقط دسترسی محدود به عکسها و ویدیوها اعطا میکنند بینیاز میکند.
پیادهسازی
ادغام انتخابگر عکس جاسازیشده با کتابخانه Photo Picker Jetpack آسان شده است.
Jetpack Compose
ابتدا کتابخانه Jetpack Photo Picker را بهعنوان وابستگی اضافه کنید.
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 Photo Picker را بهعنوان وابستگی اضافه کنید.
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 (سطح API 34) یا بالاتر با «افزونههای کیت توسعه نرمافزار» نسخه ۱۵ به بالا استفاده میکنند دردسترس است. درباره دردسترس بودن انتخابگر عکس در دستگاهها بیشتر بخوانید.
برای افزایش حریم خصوصی و امنیت کاربر، سیستم انتخابگر عکس جاسازیشده را بهگونهای پردازش میکند که از هرگونه طراحی یا رونهاد جلوگیری شود. این انتخاب طراحی عمدی به این معنی است که تجربه کاربری شما باید ناحیه نمایش انتخابگر عکس را بهعنوان عنصری متمایز و اختصاصی درنظر بگیرد، درست مثل اینکه برای یک برنمای تبلیغاتی برنامهریزی میکنید.
اگر بازخورد یا پیشنهادی دارید، درخواست پشتیبانی در سامانه پیگیری ثبت کنید.
-
اخبار محصولحریم خصوصی و کنترل کاربر همچنان در قلب تجربه Android قرار دارند. همانطور که انتخابگر عکس همرسانی رسانه را ایمن و پیادهسازی آن را آسان کرد، اکنون همان سطح از حریم خصوصی، سادگی، و تجربه کاربری عالی را به انتخاب مخاطب میآوریم.
Roxanna Aliabadi Walker • ۴ دقیقه خواندن -
اخبار محصولبهعنوان توسعهدهندگان Android، وقتی نوبت به انتخاب عاملها، مدلهای زبانی بزرگ، ابزارها، و میاناهای خط فرمان (CLI) میرسد که برای توسعه نرمافزار استفاده میکنید، گزینههای زیادی دارید. هدف ما این است که به شما کمک کنیم برنامههای Android زیبا و با کیفیت بالا بسازید، مهم نیست که چگونه میخواهید بسازید.
Simona Milanovic • ۴ دقیقه خواندن -
اخبار محصولدر Google Play، ما بهطور مداوم پلاتفرم اشتراک خود را گسترش میدهیم تا به شما کمک کنیم رشد کنید، با مدلهای کسبوکار جدید سازگار شوید، و دقیقاً در جایی که کاربران شما هستند با آنها ارتباط برقرار کنید.
Sheenam Mittal • ۴ دقیقه خواندن
هر هفته جدیدترین اطلاعات آماری توسعه Android را در صندوق ورودیتان دریافت کنید.