Berita Produk

Pemilih Foto Tersemat

Waktu baca: 8 menit

Pemilih Foto yang Disematkan: Cara yang lebih lancar untuk meminta foto dan video secara pribadi di aplikasi Anda

photopicker.png

Bersiaplah untuk meningkatkan pengalaman pengguna aplikasi Anda dengan cara baru yang menarik untuk menggunakan pemilih foto Android. Pemilih foto tersemat yang baru menawarkan cara yang lancar dan berfokus pada privasi bagi pengguna untuk memilih foto dan video, langsung di dalam antarmuka aplikasi Anda. Sekarang, aplikasi Anda bisa mendapatkan semua manfaat yang sama yang tersedia dengan pemilih foto, termasuk akses ke konten cloud, yang terintegrasi langsung ke dalam pengalaman aplikasi Anda.

Mengapa disematkan?

Kami memahami bahwa banyak aplikasi ingin memberikan pengalaman yang sangat terintegrasi dan lancar bagi pengguna saat memilih foto atau video. Pemilih foto yang disematkan dirancang untuk melakukan hal itu, sehingga pengguna dapat mengakses foto terbaru mereka dengan cepat tanpa harus keluar dari aplikasi Anda. Mereka juga dapat menjelajahi seluruh koleksi di penyedia media cloud pilihan mereka (misalnya, Google Foto), termasuk favorit, album, dan fungsi penelusuran. Dengan begitu, pengguna tidak perlu berpindah-pindah aplikasi atau khawatir apakah foto yang mereka inginkan disimpan secara lokal atau di cloud.

Integrasi yang lancar, privasi yang ditingkatkan

Dengan pemilih foto yang disematkan, aplikasi Anda tidak memerlukan akses ke foto atau video pengguna hingga mereka benar-benar memilih sesuatu. Artinya, privasi pengguna Anda akan lebih terjaga dan pengalaman mereka akan lebih lancar. Selain itu, pemilih foto yang disematkan memberi pengguna akses ke seluruh koleksi media berbasis cloud mereka, sedangkan izin foto standar hanya dibatasi untuk file lokal.

Pemilih foto yang disematkan di Google Message

Google Message menampilkan keunggulan pemilih foto tersemat. Berikut cara mereka mengintegrasikannya:

  • Penempatan yang intuitif: Pemilih foto berada tepat di bawah tombol kamera, sehingga pengguna dapat dengan jelas memilih antara mengambil foto baru atau memilih foto yang sudah ada.
  • Pratinjau dinamis: Segera setelah pengguna mengetuk foto, mereka akan melihat pratinjau besar, sehingga memudahkan mereka mengonfirmasi pilihan. Jika pengguna membatalkan pilihan foto, pratinjau akan menghilang, sehingga pengalaman tetap bersih dan tidak berantakan.
  • Perluas untuk melihat lebih banyak konten: Tampilan awal disederhanakan, sehingga memudahkan akses ke foto terbaru. Namun, pengguna dapat dengan mudah memperluas pemilih foto untuk menelusuri dan memilih dari semua foto dan video di galeri mereka, termasuk konten cloud dari Google Foto.
  • Menghormati pilihan pengguna: Alat pilih foto yang disematkan hanya memberikan akses ke foto atau video tertentu yang dipilih pengguna, yang berarti mereka dapat berhenti meminta izin foto dan video sama sekali. Hal ini juga mencegah aplikasi Pesan perlu menangani situasi saat pengguna hanya memberikan akses terbatas ke foto dan video.
gif1.gif
gif2.gif

Penerapan

Mengintegrasikan pemilih foto sematan menjadi lebih mudah dengan library Jetpack Pemilih Foto.  

Jetpack Compose

Pertama, sertakan library Jetpack Photo Picker sebagai dependensi.

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

Fungsi composable EmbeddedPhotoPicker menyediakan mekanisme untuk menyertakan UI pemilih foto sematan langsung dalam layar Compose Anda. Composable ini membuat SurfaceView yang menghosting UI alat pilih foto yang disematkan. Aplikasi ini mengelola koneksi ke layanan EmbeddedPhotoPicker, menangani interaksi pengguna, dan mengomunikasikan URI media yang dipilih ke aplikasi yang memanggil.  

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

Tampilan

Pertama, sertakan library Jetpack Photo Picker sebagai dependensi.

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

Untuk menambahkan pemilih foto sematan, Anda perlu menambahkan entri ke file tata letak.  

  <view class="androidx.photopicker.EmbeddedPhotoPickerView"
    android:id="@+id/photopicker"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Lalu, lakukan inisialisasi di aktivitas/fragmen Anda.

  // 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()
    )
}

Anda dapat memanggil berbagai metode EmbeddedPhotoPickerSession untuk berinteraksi dengan pemilih yang disematkan.

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

Perlu diperhatikan bahwa pengalaman pemilih foto sematan tersedia bagi pengguna yang menjalankan Android 14 (level API 34) atau yang lebih tinggi dengan Ekstensi SDK 15+. Baca selengkapnya tentang ketersediaan perangkat pemilih foto.

Untuk meningkatkan privasi dan keamanan pengguna, sistem merender pemilih foto yang disematkan dengan cara yang mencegah gambar atau overlay apa pun. Pilihan desain yang disengaja ini berarti UX Anda harus mempertimbangkan area tampilan pemilih foto sebagai elemen yang berbeda dan khusus, seperti yang akan Anda rencanakan untuk banner iklan.

Jika ada masukan atau saran, kirimkan tiket ke pelacak masalah kami.

Lanjutkan membaca