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 library 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 menunjukkan kecanggihan 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 mereka 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 membuat aplikasi Pesan tidak 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. Layanan ini mengelola koneksi ke layanan EmbeddedPhotoPicker, menangani interaksi pengguna, dan mengomunikasikan URI media yang dipilih ke aplikasi panggilan.
@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)
Penting untuk diperhatikan bahwa pengalaman pemilih foto yang disematkan 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.
Ditulis oleh:
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
Jika Anda adalah developer Android yang ingin menerapkan fitur AI inovatif ke dalam aplikasi, kami baru saja meluncurkan update baru yang canggih.
Thomas Ezan • Waktu baca 3 menit
-
Berita Produk
Android 17 telah mencapai beta 4, beta terjadwal terakhir dari siklus rilis ini, yang merupakan pencapaian penting untuk kompatibilitas aplikasi dan stabilitas platform.
Daniel Galpin • Waktu baca: 4 menit
Terus dapatkan informasi
Dapatkan insight pengembangan Android terbaru yang dikirim ke kotak masuk Anda setiap minggu.
