Công cụ chọn ảnh được nhúng: Cách liền mạch hơn để yêu cầu ảnh và video một cách riêng tư trong ứng dụng
Hãy sẵn sàng nâng cao trải nghiệm người dùng trong ứng dụng của bạn bằng một cách mới thú vị để sử dụng công cụ chọn ảnh của Android! Công cụ chọn ảnh mới được nhúng mang đến cho người dùng một cách 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 mà công cụ chọn ảnh mang lại, 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 cung cấp trải nghiệm tích hợp cao và liền mạch cho người dùng khi chọn ảnh hoặc video. Công cụ chọn ảnh được nhúng được thiết kế để làm 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ọ ưu tiê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 ả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 giúp tăng cường quyền riêng tư cho người dùng và mang lại trải nghiệm hợp lý hơn. Ngoài ra, công cụ chọn ảnh được nhúng 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 vào ảnh theo tiêu chuẩn chỉ áp dụng cho các tệp trên thiết bị.
Công cụ chọn ảnh được nhúng trong Google Tin nhắn
Google Tin nhắn cho thấy sức mạnh của công cụ chọn ảnh được nhúng. Dưới đây là cách họ tích hợp:
- Vị trí trực quan: Công cụ chọn ảnh nằm ngay bên dưới nút camera, giúp người dùng dễ dàng lựa chọn giữa việc chụp ảnh mới hoặc chọn ảnh hiện có.
- Bản xem trước linh động: Ngay sau khi người dùng nhấn vào một bức ảnh, họ sẽ thấy một bản xem trước lớn, giúp họ 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 luôn gọn gàng và không bị lộn xộn.
- Mở rộng để xem thêm nội dung: Chế độ xem ban đầu được đơn giản hoá, giúp bạn dễ dàng xem ảnh gần đây. Tuy nhiên, người dùng có thể dễ dàng mở rộng công cụ chọn ảnh để duyệt xem và chọn trong số tất cả ảnh và video trong thư viện của họ, bao gồm cả nội dung trên đám mây trong Google Photos.
- Tôn trọng sự lựa chọn của người dùng: Công cụ chọn ảnh được nhúng chỉ cấp quyền truy cập vào những ảnh hoặc video cụ thể mà người dùng chọn, tức là họ có thể ngừng yêu cầu quyền truy cập vào ảnh và video. Điều này cũng giúp ứng dụng Tin nhắn không cần xử lý các trường hợp người dùng chỉ cấp quyền truy cập có giới hạn vào ảnh và video.
Triển khai
Bạn có thể dễ dàng tích hợp công cụ chọn ảnh được nhúng bằng thư viện Jetpack của Công cụ chọn ảnh.
Jetpack Compose
Trước tiên, hãy thêm thư viện Công cụ chọn ảnh của Jetpack làm phần phụ thuộc.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Hàm composable EmbeddedPhotoPicker cung cấp một cơ chế để đưa giao diện người dùng của công cụ chọn ảnh được nhúng trực tiếp vào màn hình Compose. Thành phần kết hợp này tạo ra một SurfaceView lưu trữ giao diện người dùng của công cụ chọn ảnh được nhúng. Lớp này quản lý kết nối với dịch vụ EmbeddedPhotoPicker, xử lý các hoạt động tương tác của người dùng và truyền đạt URI nội dung nghe nhìn đã chọn đến ứ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ị
Trước tiên, hãy thêm thư viện Công cụ chọn ảnh của Jetpack làm phần phụ thuộc.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Để thêm công cụ chọn ảnh được nhúng, bạn cần thêm một mục vào tệp bố cục.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />Và khởi chạy nó trong hoạt động/mảnh 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 bộ 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)
Xin lưu ý rằng người dùng chạy Android 14 (cấp độ API 34) trở lên có SDK Extensions 15 trở lên có thể sử dụng công cụ chọn ảnh được nhúng. Đọc thêm về phạm vi cung cấp của công cụ chọn ảnh trên thiết bị.
Để tăng cường quyền riêng tư của người dùng và bảo mật, hệ thống sẽ hiển thị công cụ chọn ảnh được nhúng theo cách ngăn chặn mọi hoạt động vẽ hoặc phủ. Lựa chọn thiết kế có chủ đích này có nghĩa là trải nghiệm người dùng của bạn nên xem vùng hiển thị của công cụ chọn ảnh là một phần tử riêng biệt và chuyên dụng, giống như cách bạn lập kế hoạch cho biểu ngữ quảng cáo.
Nếu bạn có ý kiến phản hồi hoặc đề xuất, hãy gửi phiếu yêu cầu đến trình theo dõi sự cố của chúng tôi.
-
Tin tức về sản phẩmCác ứng dụng nhắm đến bản phát hành Android sắp tới sẽ không thể ghi trực tiếp vào danh bạ bằng quyền WRITE_CONTACTS nữa.
Roxanna Aliabadi Walker • Đọc trong 6 phút -
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. Giống như 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 • Thời gian đọc: 4 phút -
Tin tức về sản phẩmTrong kỷ nguyên trí tuệ nhân tạo, người dùng không còn chỉ thao tác trên các ứng dụng mà còn thể hiện những mục tiêu cấp cao và mong đợi các tác nhân AI như Gemini hoàn thành các quy trình làm việc nhiều bước, đôi khi trên nhiều ứng dụng trên thiết bị của họ.
Jingyu Shi • Thời gian đọc: 4 phút
Nhận thông tin chi tiết mới nhất về hoạt động phát triển Android trong hộp thư đến của bạn hằng tuần.