اخبار محصول

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

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

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

photopicker.png

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

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

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

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

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

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

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

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

پیاده‌سازی

ادغام انتخاب‌گر عکس جاسازی‌شده با کتابخانه 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) یا بالاتر با «افزونه‌های کیت توسعه نرم‌افزار» نسخه ۱۵ به بالا استفاده می‌کنند دردسترس است. درباره دردسترس بودن انتخاب‌گر عکس در دستگاه‌ها بیشتر بخوانید.

برای افزایش حریم خصوصی و امنیت کاربر، سیستم انتخاب‌گر عکس جاسازی‌شده را به‌گونه‌ای پردازش می‌کند که از هرگونه طراحی یا رونهاد جلوگیری شود. این انتخاب طراحی عمدی به این معنی است که تجربه کاربری شما باید ناحیه نمایش انتخابگر عکس را به‌عنوان عنصری متمایز و اختصاصی درنظر بگیرد، درست مثل اینکه برای یک برنمای تبلیغاتی برنامه‌ریزی می‌کنید.

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

نوشته:
ادامه خواندن