Công cụ chọn ảnh nhúng: Cách thức liền mạch hơn để yêu cầu ảnh và video riêng tư trong ứng dụng của bạn
Chuẩn bị sẵn sàng để cải thiện trải nghiệm người dùng của ứng dụng bằng một cách thức mới thú vị để sử dụng công cụ chọn ảnh của Android! Công cụ chọn ảnh nhúng mới mang đến cho người dùng một cách thức liền mạch và chú trọng đến quyền riêng tư để chọn ảnh và video ngay trong giao diện của ứng dụng. Giờ đây, ứng dụng của bạn có thể nhận được tất cả lợi ích tương tự như khi dùng công cụ chọn ảnh, bao gồm cả quyền truy cập vào nội dung trên đám mây, được tích hợp trực tiếp vào trải nghiệm của ứng dụng.
Tại sao nên nhúng?
Chúng tôi hiểu rằng nhiều ứng dụng muốn mang đến trải nghiệm liền mạch và có mức độ tích hợp cao cho người dùng khi họ chọn ảnh hoặc video. Công cụ chọn ảnh nhúng được thiết kế để thực hiện chính xác điều đó, cho phép người dùng nhanh chóng truy cập vào ảnh gần đây mà không cần rời khỏi ứng dụng của bạn. Họ cũng có thể khám phá toàn bộ thư viện trong nhà cung cấp nội dung nghe nhìn trên đám mây mà họ muốn (ví dụ: Google Photos), bao gồm cả mục yêu thích, album và chức năng tìm kiếm. Nhờ đó, người dùng không cần phải chuyển đổi giữa các ứng dụng hoặc lo lắng về việc bức ảnh họ muốn có được lưu trữ trên thiết bị hay trên đám mây hay không.
Tích hợp liền mạch, tăng cường quyền riêng tư
Với công cụ chọn ảnh được nhúng, ứng dụng của bạn không cần quyền truy cập vào ảnh hoặc video của người dùng cho đến khi họ thực sự chọn một nội dung nào đó. Điều này có nghĩa là người dùng của bạn sẽ có quyền riêng tư cao hơn và trải nghiệm đơn giản hơn. Ngoài ra, công cụ chọn ảnh được nhúng còn cho phép người dùng truy cập vào toàn bộ thư viện nội dung nghe nhìn trên đám mây, trong khi quyền truy cập ảnh tiêu chuẩn chỉ giới hạn ở các tệp cục bộ.
Công cụ chọn ảnh được nhúng trong Google Tin nhắn
Google Messages thể hiện sức mạnh của trình chọn ảnh tích hợp. Đây là cách họ đã tích hợp nó:
- Vị trí trực quan: Trình chọn ảnh nằm ngay bên dưới nút chụp ảnh, cho phép người dùng lựa chọn rõ ràng giữa việc chụp ảnh mới hoặc chọn ảnh hiện có.
- Xem trước động: Ngay sau khi người dùng chạm vào ảnh, họ sẽ thấy bản xem trước lớn, giúp dễ dàng xác nhận lựa chọn của mình. Nếu người dùng bỏ chọn ảnh, bản xem trước sẽ biến mất, giúp trải nghiệm người dùng được gọn gàng và không bị rối mắt.
- Mở rộng để xem thêm nội dung: Giao diện ban đầu được đơn giản hóa, giúp dễ dàng truy cập vào các ảnh gần đây. Tuy nhiên, người dùng có thể dễ dàng mở rộng trình chọn ảnh để duyệt và chọn từ tất cả ảnh và video trong thư viện của họ, bao gồm cả nội dung đám mây từ Google Photos.
- Tôn trọng sự lựa chọn của người dùng: Trình chọn ảnh nhúng chỉ cấp quyền truy cập vào các ảnh hoặc video cụ thể mà người dùng chọn, nghĩa là họ có thể ngừng yêu cầu quyền truy cập ảnh và video hoàn toàn. Điều này cũng giúp ứng dụng Tin nhắn không cần phải xử lý các trường hợp người dùng chỉ cấp quyền truy cập hạn chế vào ảnh và video.
Thực hiện
Việc tích hợp trình chọn ảnh nhúng trở nên dễ dàng hơn với thư viện Photo Picker Jetpack.
Jetpack Compose
Đầu tiên, hãy thêm thư viện Jetpack Photo Picker vào danh sách phụ thuộc.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Chức năng EmbeddedPhotoPicker cung cấp một cơ chế để tích hợp giao diện người dùng chọn ảnh nhúng trực tiếp vào màn hình Soạn thảo của bạn. Thành phần có thể kết hợp này tạo ra một SurfaceView chứa giao diện người dùng chọn ảnh được nhúng. Nó quản lý kết nối đến dịch vụ EmbeddedPhotoPicker, xử lý các tương tác của người dùng và truyền đạt các URI phương tiện đã chọn cho ứng dụng gọi.
@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)
}
}
)
}
}
}
}
}Khung hiển thị
Đầu tiên, hãy thêm thư viện Jetpack Photo Picker vào danh sách phụ thuộc.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Để thêm trình chọn ảnh nhúng, bạn cần thêm một mục vào tệp bố cục của mình.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />Và khởi tạo nó trong activity/fragment của bạn.
// 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()
)
}Bạn có thể gọi các phương thức khác nhau của EmbeddedPhotoPickerSession để tương tác với trình chọn được nhúng.
// 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)
Điều quan trọng cần lưu ý là trải nghiệm chọn ảnh nhúng khả dụng cho người dùng chạy Android 14 (API cấp 34) trở lên với SDK Extensions 15+. Đọc thêm về tính khả dụng của thiết bị chọn ảnh.
Để tăng cường quyền riêng tư và bảo mật cho người dùng, hệ thống hiển thị trình chọn ảnh nhúng theo cách ngăn chặn mọi hành động vẽ hoặc chồng ảnh lên nhau. Lựa chọn thiết kế có chủ ý này có nghĩa là trải nghiệm người dùng (UX) của bạn nên coi khu vực hiển thị của trình chọn ảnh là một yếu tố riêng biệt và độc lập, tương tự như cách bạn thiết kế một banner quảng cáo.
Nếu bạn có bất kỳ phản hồi hoặc đề xuất nào, vui lòng gửi yêu cầu hỗ trợ đến hệ thống của chúng tôi.trình theo dõi sự cố .
-
Tin tức về sản phẩmQuyền riêng tư và quyền kiểm soát của người dùng vẫn là yếu tố cốt lõi trong trải nghiệm Android. Tương tự như cách công cụ chọn ảnh giúp việc chia sẻ nội dung nghe nhìn trở nên an toàn và dễ triển khai, giờ đây, chúng tôi cũng mang đến mức độ riêng tư, sự đơn giản và trải nghiệm người dùng tuyệt vời tương tự cho việc chọn người liên hệ.
Roxanna Aliabadi Walker • 4 phút đọc -
Tin tức về sản phẩmĐây là bản phát hành ổn định cuối cùng cho Android Studio Quail. Các tính năng mới trong Android Studio giúp bạn xây dựng các ứng dụng cao cấp bằng AI một cách hiệu quả.
Amman Asfaw • 5 phút đọc -
Tin tức về sản phẩmDuy trì một hệ sinh thái Android lành mạnh là cam kết chung mà mọi ứng dụng và trò chơi đều có vai trò trong đó.
Raghavendra Hareesh Pottamsetty • 4 phút đọc
Nhận thông tin chi tiết mới nhất về hoạt động phát triển trên Android trong hộp thư đến của bạn mỗi tuần.