اخبار محصول

انتخاب‌گر عکس جاسازی‌شده

‫۸ دقیقه خواندن

انتخابگر عکس جاسازی‌شده: روشی یکپارچه‌تر برای درخواست خصوصی عکس‌ها و ویدیوها در برنامه شما

photopicker.png

با روش جدید و هیجان‌انگیز استفاده از انتخاب‌گر عکس Android، برای بهبود تجربه کاربری برنامه‌تان آماده شوید! انتخاب‌گر عکس جاسازی‌شده جدید روشی یکپارچه و با تمرکز بر حریم خصوصی برای کاربران ارائه می‌دهد تا عکس‌ها و ویدیوها را مستقیماً در میانای برنامه شما انتخاب کنند. اکنون برنامه‌تان می‌تواند از همه مزایای موجود در انتخاب‌گر عکس، ازجمله دسترسی به محتوای ابری، که مستقیماً در تجربه برنامه‌تان ادغام شده است بهره‌مند شود.

چرا جاسازی‌شده؟

می‌دانیم که بسیاری از برنامه‌ها می‌خواهند هنگام انتخاب عکس یا ویدیو، تجربه‌ای بسیار یکپارچه و روان برای کاربران فراهم کنند. انتخاب‌گر عکس جاسازی‌شده دقیقاً برای همین کار طراحی شده است و به کاربران امکان می‌دهد بدون ترک کردن برنامه شما، به‌سرعت به عکس‌های اخیرشان دسترسی پیدا کنند. آن‌ها همچنین می‌توانند کل کتابخانه‌شان را در ارائه‌دهنده رسانه ابری دلخواهشان (مثلاً Google Photos)، ازجمله موارد دلخواه، آلبوم‌ها، و عملکرد جستجو کاوش کنند. این کار نیاز به جابه‌جایی بین برنامه‌ها یا نگرانی درباره اینکه عکس موردنظر در دستگاه ذخیره شده است یا در فضای ابری را ازبین می‌برد.

ادغام یکپارچه، حریم خصوصی بهبودیافته

با انتخاب‌گر عکس جاسازی‌شده، برنامه‌تان تا زمانی که کاربر واقعاً چیزی را انتخاب نکند، نیازی به دسترسی به عکس‌ها یا ویدیوهای کاربر ندارد. این یعنی حریم خصوصی بیشتر برای کاربران شما و تجربه‌ای ساده‌تر. به‌علاوه، انتخاب‌گر عکس جاسازی‌شده به کاربران امکان می‌دهد به کل کتابخانه رسانه‌ای مبتنی بر ابر خود دسترسی داشته باشند، درحالی‌که اجازه عکس استاندارد فقط به فایل‌های محلی محدود می‌شود.

انتخاب‌گر عکس جاسازی‌شده در «پیام‌نگار Google»

«پیام‌نگار Google» قدرت انتخاب‌گر عکس جاسازی‌شده را نشان می‌دهد. در اینجا نحوه ادغام آن را می‌بینید:

  • جای‌گذاری شهودی: انتخاب‌گر عکس درست زیر دکمه دوربین قرار دارد و به کاربران امکان می‌دهد به‌راحتی بین گرفتن عکس جدید یا انتخاب عکس موجود یکی را انتخاب کنند.
  • پیش‌نمایش پویا: بلافاصله پس‌از اینکه کاربر روی عکسی تک‌ضرب می‌زند، پیش‌نمایش بزرگی می‌بیند که تأیید انتخاب را آسان می‌کند. اگر انتخاب عکس را لغو کنند، پیش‌نمایش ناپدید می‌شود و تجربه تمیز و مرتب باقی می‌ماند.
  • ازهم باز کردن برای محتوای بیشتر: نمای اولیه ساده شده است و دسترسی آسان به عکس‌های اخیر را ارائه می‌دهد. بااین‌حال، کاربران می‌توانند به‌راحتی انتخابگر عکس را گسترش دهند تا همه عکس‌ها و ویدیوهای موجود در کتابخانه خود، ازجمله محتوای ابری Google Photos، را مرور و انتخاب کنند.
  • احترام به انتخاب‌های کاربر: انتخاب‌گر عکس جاسازی‌شده فقط به عکس‌ها یا ویدیوهای خاصی که کاربر انتخاب می‌کند دسترسی می‌دهد، یعنی برنامه‌ها می‌توانند درخواست اجازه‌های عکس و ویدیو را به‌طور کامل متوقف کنند. این کار همچنین باعث می‌شود «پیام‌نگار» نیازی به مدیریت شرایطی نداشته باشد که کاربران فقط دسترسی محدودی به عکس‌ها و ویدیوها اعطا می‌کنند.
gif1.gif
gif2.gif

پیاده‌سازی

ادغام کردن انتخاب‌گر عکس جاسازی‌شده با کتابخانه 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 شما باید ناحیه نمایش انتخاب‌گر عکس را به‌عنوان یک عنصر متمایز و اختصاصی درنظر بگیرد، درست مانند برنامه‌ریزی برای یک برنمای تبلیغاتی.

اگر بازخورد یا پیشنهادی دارید، تیکت‌ها را به ردیاب مشکل ما ارسال کنید.

نویسنده:
ادامه خواندن