Встроенное окно выбора фотографий – более удобный способ запрашивать доступ к фото и видео в приложении
Мы добавили в окно выбора фотографий Android новые возможности, которые помогут вам улучшить взаимодействие пользователей с вашим приложением. Новое встроенное окно выбора фотографий позволяет пользователям выбирать фото и видео прямо в интерфейсе вашего приложения, не покидая его. Теперь ваше приложение может получать все те же преимущества, что и при использовании выбора фотографий, включая доступ к облачному контенту, интегрированному непосредственно в интерфейс приложения.
Почему именно встроенные?
Мы понимаем, что многие приложения хотят обеспечить удобство выбора фотографий и видео. Встроенный инструмент выбора фотографий позволяет пользователям быстро находить недавние снимки, не покидая ваше приложение. Кроме того, они могут просматривать всю свою библиотеку в облачном сервисе, например в Google Фото, включая избранные фотографии, альбомы и результаты поиска. Пользователям не нужно переключаться между приложениями и беспокоиться о том, где хранится нужное фото – локально или в облаке.
Простая интеграция и повышенная конфиденциальность
Встроенный инструмент выбора фотографий позволяет приложению получить доступ к фотографиям и видео пользователя только после того, как он что-то выберет. Это повышает конфиденциальность данных пользователей и упрощает работу с сервисом. Кроме того, встроенный инструмент выбора фотографий предоставляет пользователям доступ ко всей медиатеке в облаке, а стандартное разрешение на доступ к фотографиям ограничивается только локальными файлами.
Встроенный выбор фотографий в Google Сообщениях
Google Сообщения – это отличный пример того, как можно использовать встроенный инструмент выбора фотографий. Вот как они это сделали:
- Удобное расположение. Инструмент выбора фотографий находится прямо под кнопкой камеры, поэтому пользователям легко выбрать, что они хотят сделать: снять новое фото или выбрать существующее.
- Динамический предварительный просмотр. После того как пользователь нажмет на фотографию, он сразу увидит ее увеличенную версию, чтобы убедиться в правильности выбора. Если пользователь снимет флажок, предпросмотр исчезнет.
- Больше контента. В начальном представлении показываются только недавние фотографии. Однако пользователи могут легко развернуть окно выбора фотографий, чтобы просматривать и выбирать все фотографии и видео в своей библиотеке, включая облачный контент из Google Фото.
- Уважение выбора пользователя. Встроенный инструмент выбора фотографий предоставляет доступ только к тем фото и видео, которые выбрал пользователь. Это означает, что вы можете вообще не запрашивать разрешения на доступ к фото и видео. Это также позволяет приложению "Сообщения" не обрабатывать ситуации, когда пользователи предоставляют только ограниченный доступ к фотографиям и видео.
Реализация
Встроить инструмент выбора фотографий в приложение легко с помощью библиотеки Jetpack для инструмента выбора фотографий.
Jetpack Compose
Сначала добавьте библиотеку Jetpack Photo Picker в качестве зависимости.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Компонуемая функция EmbeddedPhotoPicker позволяет встроить интерфейс выбора фотографий непосредственно в экран Compose. Эта composable-функция создает SurfaceView, в котором размещается встроенный интерфейс инструмента выбора фотографий. Он управляет подключением к сервису 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)
}
}
)
}
}
}
}
}Просмотры
Сначала добавьте библиотеку Jetpack Photo Picker в качестве зависимости.
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 или более поздней версии. Подробнее о доступности инструмента выбора фотографий на устройствах…
Чтобы повысить конфиденциальность и безопасность пользователей, система отрисовывает встроенный инструмент выбора фотографий таким образом, чтобы предотвратить любые рисунки или наложения. Это означает, что при разработке UX необходимо учитывать область отображения фотопикера как отдельный элемент, как если бы вы планировали размещение рекламного баннера.
Если у вас есть отзывы или предложения, отправьте их в систему отслеживания ошибок.
-
Новости продуктовКонфиденциальность и управление данными остаются ключевыми принципами работы Android. Как и в случае с окном выбора фотографий, мы стремимся обеспечить высокий уровень конфиденциальности, простоту использования и удобство для пользователей при выборе контактов.
Roxanna Aliabadi Walker • Время на чтение: 4 минуты -
Новости продуктовУ разработчиков Android есть множество вариантов выбора агентов, больших языковых моделей (LLM), инструментов и интерфейсов командной строки (CLI), которые можно использовать для разработки приложений. Наша цель – помочь вам создавать красивые и качественные приложения для Android, независимо от того, как вы это делаете.
Simona Milanovic • Время на чтение: 4 минуты -
Новости продуктовМы постоянно расширяем возможности платформы подписок в Google Play, чтобы помочь вам развивать бизнес, адаптироваться к новым бизнес-моделям и привлекать пользователей.
Sheenam Mittal • Время на чтение: 4 минуты
Получайте свежие новости о разработке приложений для Android на свою электронную почту каждую неделю.