嵌入式相片挑選工具:在應用程式中以更流暢的方式私下要求相片和影片
Android 相片挑選工具推出全新功能,可提升應用程式的使用者體驗!新的內嵌相片挑選工具可讓使用者直接在應用程式介面中選取相片和影片,不僅操作流暢,還能保護隱私。現在,您的應用程式可以享有相片挑選工具的所有優點,包括直接在應用程式體驗中整合雲端內容存取權。
為什麼要嵌入?
我們瞭解,許多應用程式希望在使用者選取相片或影片時,提供高度整合且流暢的體驗。嵌入式相片挑選工具正是為此而設計,使用者不必離開應用程式,就能快速存取近期相片。他們也可以在偏好的雲端媒體供應商 (例如 Google 相簿) 中瀏覽完整相片庫,包括收藏、相簿和搜尋功能。這樣一來,使用者就不必切換應用程式,也不用擔心所需相片是儲存在本機還是雲端。
完美整合,隱私權更周全
有了嵌入式相片挑選工具,應用程式就不需要存取使用者的相片或影片,直到使用者實際選取內容為止。這代表使用者的隱私權更有保障,體驗也更流暢。此外,嵌入式相片挑選工具可讓使用者存取整個雲端媒體庫,而標準相片權限僅限於本機檔案。
Google 訊息內建的相片挑選工具
Google 訊息展示了內嵌相片挑選工具的強大功能。以下是他們的整合方式:
- 直覺式位置: 相片挑選工具位於相機按鈕正下方,使用者可以清楚選擇要拍攝新相片或選取現有相片。
- 動態預覽:使用者輕觸相片後,系統會立即顯示大型預覽畫面,方便確認所選內容。如果取消選取相片,預覽畫面就會消失,保持介面簡潔。
- 展開查看更多內容: 初始檢視畫面經過簡化,可輕鬆存取近期相片。不過,使用者可以輕鬆展開相片挑選工具,瀏覽及選擇相片庫中的所有相片和影片,包括 Google 相簿中的雲端內容。
- 尊重使用者選擇:嵌入式相片挑選工具只會授予使用者所選特定相片或影片的存取權,因此應用程式可以完全停止要求相片和影片權限。這樣一來,當使用者只授予相片和影片的有限存取權時,訊息應用程式就不必處理這種情況。
正式推出
使用相片挑選工具 Jetpack 程式庫,即可輕鬆整合嵌入式相片挑選工具。
Jetpack Compose
首先,請將 Jetpack 相片挑選工具程式庫納為依附元件。
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
EmbeddedPhotoPicker 可組合函式提供一種機制,可直接在 Compose 畫面中加入嵌入式相片挑選工具 UI。這個可組合函式會建立 SurfaceView,用於代管嵌入式相片挑選工具 UI。負責管理與 EmbeddedPhotoPicker 服務的連線、處理使用者互動,以及將所選媒體 URI 傳送至呼叫應用程式。
@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)
}
}
)
}
}
}
}
}Views
首先,請將 Jetpack 相片挑選工具程式庫納為依附元件。
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
如要新增嵌入式相片挑選工具,您必須在版面配置檔案中新增項目。
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />並在活動/片段中初始化。
// 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()
)
}您可以呼叫 EmbeddedPhotoPickerSession 的不同方法,與嵌入式挑選器互動。
// 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)
請注意,使用者必須搭載 Android 14 (API 級別 34) 以上版本,以及 SDK 擴充功能 15 以上版本,才能使用嵌入式相片挑選工具。進一步瞭解相片挑選工具的裝置適用情形。
為進一步保護使用者隱私和安全,系統會以防止任何繪圖或疊加的方式,轉譯內嵌相片挑選工具。這項設計選擇意味著您的使用者體驗應將相片挑選工具的顯示區域視為獨立且專用的元素,就像您規劃廣告橫幅一樣。
如果您有任何意見或建議,請透過問題追蹤工具提交票證。
-
產品最新消息如果應用程式指定即將推出的 Android 版本,將無法再透過 WRITE_CONTACTS 權限直接寫入聯絡人資料。
Roxanna Aliabadi Walker • 閱讀時間:6 分鐘 -
產品最新消息隱私權和使用者控制項仍是 Android 體驗的核心。相片挑選工具讓媒體分享功能更安全、更容易導入,現在我們也將同樣的隱私保護、簡易性和優質使用者體驗,帶到聯絡人選取功能。
Roxanna Aliabadi Walker • 閱讀時間:4 分鐘 -
產品最新消息今天,我們在 Android 開發人員高峰會上宣布,將廣泛提供多項工具和 API,旨在消除日常摩擦,讓您更靈活地建構出色的 Android 應用程式。
Matthew McCullough • 閱讀時間:4 分鐘
每週透過電子郵件接收 Android 開發人員的最新深入分析。