Tin tức về sản phẩm

Công cụ chọn ảnh được nhúng

Đọc trong 8 phút

Công cụ chọn ảnh được nhúng: Một 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

photopicker.png

Chuẩn bị sẵn sàng nâng cao trải nghiệm người dùng của ứng dụng bằng một cách mới thú vị để sử dụng công cụ chọn ảnh Android! Công cụ chọn ảnh được nhúng mới mang đến một cách liền mạch và tập trung vào quyền riêng tư để người dùng 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ư 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 lại là 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 tích hợp cao 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ế để 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ững bức ả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 đa phương tiệ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. Điều này giúp 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 mà họ muốn được lưu trữ cục bộ hay trên đám mây.

Tích hợp liền mạch, nâng cao 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à quyền riêng tư của người dùng sẽ được đảm bảo hơn và trải nghiệm sẽ được đơn giản hoá hơn. Ngoài ra, công cụ chọn ảnh được nhúng cung cấp cho người dùng quyền truy cập vào toàn bộ thư viện nội dung đa phương tiện hoạt động trên nền tảng đám mây, trong khi quyền truy cập ảnh tiêu chuẩn chỉ bị hạn chế ở các tệp cục bộ.

Công cụ chọn ảnh được nhúng trong Google Tin nhắn

Google Tin nhắn thể hiện 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 công cụ này:

  • 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 có thể 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 nhấn vào một bức ảnh, họ sẽ thấy bản xem trước lớn, giúp họ dễ dàng xác nhận lựa chọn. Nếu họ bỏ chọn ảnh, bản xem trước sẽ biến mất, giúp trải nghiệm trở nên gọn gàng và không bị rối.
  • Mở rộng để xem thêm nội dung: Chế độ xem ban đầu được đơn giản hoá, giúp dễ dàng truy cập vào những bức ả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 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 từ Google Photos.
  • Tôn trọng 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, 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 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.
gif1.gif
gif2.gif

Triển khai

Việc tích hợp công cụ chọn ảnh được nhúng trở nên dễ dàng hơn nhờ thư viện Jetpack Photo Picker.  

Jetpack Compose

Trước tiên, hãy đưa thư viện Jetpack Photo Picker vào dưới dạng 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ông cụ chọn ảnh được nhúng trực tiếp vào màn hình Compose. Hàm có khả năng kết hợp này tạo ra một SurfaceView lưu trữ giao diện người dùng công cụ chọn ảnh được nhúng. Hàm này quản lý kết nối với dịch vụ EmbeddedPhotoPicker, xử lý các tương tác của người dùng và truyền đạt URI nội dung đa phương tiện đã chọn cho ứng dụng thực hiện lệnh 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 đưa thư viện Jetpack Photo Picker vào dưới dạng 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 mục đó trong hoạt động/mảnh.

  // 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 công cụ chọn ảnh đượ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 công cụ chọn ảnh được nhúng chỉ dành cho người dùng chạy Android 14 (cấp độ API 34) trở lên với Tiện ích SDK 15 trở lên. Tìm hiểu thêm về khả năng sử dụng công cụ chọn ảnh trên thiết bị.

Để nâng cao quyền riêng tư và bảo mật của người dùng, 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 thao tác vẽ hoặc lớp 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 phải xem xét vùng hiển thị của công cụ chọn ảnh như một phần tử riêng biệt và chuyên dụng, giống như cách bạn lên kế hoạch cho một 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 lỗi của chúng tôi.

Tác giả:

Tiếp tục đọc