Pemilih Foto yang Disematkan: Cara yang lebih lancar untuk meminta foto dan video secara pribadi di aplikasi Anda
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.
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
-
Berita Produk
Privasi dan kontrol pengguna tetap menjadi inti dari pengalaman Android. Sama seperti pemilih foto yang membuat berbagi media menjadi aman dan mudah diterapkan, kini kami menghadirkan tingkat privasi, kesederhanaan, dan pengalaman pengguna yang sama baiknya untuk pemilihan kontak.
Roxanna Aliabadi Walker • Waktu baca: 4 menit
-
Berita Produk
Setiap developer memiliki alur kerja dan kebutuhan AI yang unik, dan penting untuk dapat memilih cara AI membantu pengembangan Anda. Pada bulan Januari, kami memperkenalkan kemampuan untuk memilih model AI lokal atau jarak jauh guna mendukung fungsi AI di Android Studio
Matthew Warner • Waktu baca: 2 menit
-
Berita Produk
Android Studio Panda 3 kini stabil dan siap digunakan dalam produksi. Rilis ini memberi Anda lebih banyak kontrol dan penyesuaian atas alur kerja yang didukung AI, sehingga mempermudah pembuatan aplikasi Android berkualitas tinggi.
Matt Dyor • Waktu baca 3 menit
Terus dapatkan informasi
Dapatkan insight pengembangan Android terbaru yang dikirim ke kotak masuk Anda setiap minggu.