اخبار محصول

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

۸ دقیقه مطالعه
Roxanna Aliabadi Walker و Yacine Rezgui

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

انتخابگر عکس.png

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

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

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

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

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

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

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

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

پیاده‌سازی

ادغام انتخابگر عکس تعبیه‌شده با کتابخانه Photo Picker Jetpack آسان شده است.

جت‌پک آهنگسازی

ابتدا، کتابخانه Jetpack Photo Picker را به عنوان یک وابستگی اضافه کنید.

implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")

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

  @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)

لازم به ذکر است که قابلیت انتخابگر عکس تعبیه‌شده برای کاربرانی که اندروید ۱۴ (سطح API ۳۴) یا بالاتر با افزونه‌های SDK نسخه ۱۵+ دارند، در دسترس است. درباره در دسترس بودن دستگاه انتخابگر عکس بیشتر بخوانید .

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

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

    نوشته شده توسط:

    ادامه مطلب