Le sélecteur de photos intégré : un moyen plus simple de demander des photos et des vidéos de manière privée dans votre application
Préparez-vous à améliorer l'expérience utilisateur de votre application grâce à une nouvelle façon d'utiliser le sélecteur de photos Android. Le nouveau sélecteur de photos intégré permet aux utilisateurs de sélectionner des photos et des vidéos de manière simple et respectueuse de la confidentialité, directement dans l'interface de votre application. Votre application peut désormais bénéficier de tous les avantages disponibles avec le sélecteur de photos, y compris l'accès au contenu cloud, intégré directement à l'expérience de votre application.
Pourquoi l'intégration ?
Nous savons que de nombreuses applications souhaitent offrir une expérience hautement intégrée et fluide aux utilisateurs lorsqu'ils sélectionnent des photos ou des vidéos. Le sélecteur de photos intégré est conçu pour cela. Il permet aux utilisateurs d'accéder rapidement à leurs photos récentes sans jamais quitter votre application. Ils peuvent également explorer l'intégralité de leur bibliothèque dans leur fournisseur de médias cloud préféré (par exemple, Google Photos), y compris les favoris, les albums et la fonctionnalité de recherche. Les utilisateurs n'ont donc plus besoin de passer d'une application à l'autre ni de se demander si la photo qu'ils souhaitent est stockée localement ou dans le cloud.
Intégration parfaite, confidentialité renforcée
Avec le sélecteur de photos intégré, votre application n'a pas besoin d'accéder aux photos ou vidéos de l'utilisateur tant qu'il n'a rien sélectionné. Cela signifie une plus grande confidentialité pour vos utilisateurs et une expérience plus fluide. De plus, le sélecteur de photos intégré permet aux utilisateurs d'accéder à l'ensemble de leur bibliothèque multimédia cloud, tandis que l'autorisation photo standard est limitée aux fichiers locaux.
Le sélecteur de photos intégré dans Google Messages
Google Messages illustre la puissance du sélecteur de photos intégré. Voici comment il a été intégré :
- Placement intuitif : le sélecteur de photos se trouve juste en dessous du bouton de l'appareil photo, ce qui permet aux utilisateurs de choisir clairement entre prendre une nouvelle photo ou en sélectionner une existante.
- Aperçu dynamique : immédiatement après qu'un utilisateur a appuyé sur une photo, un grand aperçu s'affiche, ce qui lui permet de confirmer facilement sa sélection. S'il désélectionne la photo, l'aperçu disparaît, ce qui permet de conserver une expérience claire et épurée.
- Développer pour plus de contenu : la vue initiale est simplifiée et permet d'accéder facilement aux photos récentes. Toutefois, les utilisateurs peuvent facilement développer le sélecteur de photos pour parcourir et choisir parmi toutes les photos et vidéos de leur bibliothèque, y compris le contenu cloud de Google Photos.
- Respect des choix de l'utilisateur : le sélecteur de photos intégré n'accorde l'accès qu'aux photos ou vidéos spécifiques que l'utilisateur sélectionne, ce qui signifie qu'il peut cesser de demander les autorisations photo et vidéo. Cela évite également à Messages de devoir gérer les situations dans lesquelles les utilisateurs n'accordent qu'un accès limité aux photos et vidéos.
Mise en œuvre
L'intégration du sélecteur de photos intégré est facilitée par la bibliothèque Jetpack Photo Picker.
Jetpack Compose
Tout d'abord, incluez la bibliothèque Jetpack Photo Picker en tant que dépendance.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
La fonction composable EmbeddedPhotoPicker fournit un mécanisme permettant d'inclure l'interface utilisateur du sélecteur de photos intégré directement dans votre écran Compose. Ce composable crée une SurfaceView qui héberge l'interface utilisateur du sélecteur de photos intégré. Il gère la connexion au service EmbeddedPhotoPicker, gère les interactions de l'utilisateur et communique les URI multimédias sélectionnés à l'application appelante.
@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)
}
}
)
}
}
}
}
}
Vues
Tout d'abord, incluez la bibliothèque Jetpack Photo Picker en tant que dépendance.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Pour ajouter le sélecteur de photos intégré, vous devez ajouter une entrée à votre fichier de mise en page.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Et initialisez-le dans votre activité/fragment.
// 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()
)
}
Vous pouvez appeler différentes méthodes de EmbeddedPhotoPickerSession pour interagir avec le sélecteur intégré.
// 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)
Il est important de noter que l'expérience du sélecteur de photos intégré est disponible pour les utilisateurs exécutant Android 14 (niveau d'API 34) ou version ultérieure avec les extensions SDK 15 ou version ultérieure. En savoir plus sur la disponibilité du sélecteur de photos sur les appareils.
Pour renforcer la confidentialité et la sécurité des utilisateurs, le système affiche le sélecteur de photos intégré de manière à empêcher tout dessin ou superposition. Ce choix de conception intentionnel signifie que votre UX doit considérer la zone d'affichage du sélecteur de photos comme un élément distinct et dédié, tout comme vous le feriez pour une bannière publicitaire.
Si vous avez des commentaires ou des suggestions, envoyez des tickets à notre outil de suivi des problèmes.
Lire la suite
-
Nouveautés produit
La confidentialité et le contrôle de l'utilisateur restent au cœur de l'expérience Android. Tout comme le sélecteur de photos a rendu le partage de médias sécurisé et facile à implémenter, nous apportons désormais le même niveau de confidentialité, de simplicité et d'expérience utilisateur de qualité à la sélection de contacts.
Roxanna Aliabadi Walker • 4 minutes de lecture
-
Nouveautés produit
Proposer l'expérience Google Play la plus sécurisée et la plus fiable possible. Aujourd'hui, nous annonçons un nouvel ensemble de mises à jour des règles et une fonctionnalité de transfert de compte pour renforcer la confidentialité des utilisateurs et protéger votre entreprise contre la fraude.
Bennet Manuel • 3 minutes de lecture
-
Nouveautés produit
Il n'a jamais été aussi facile de tester les interactions multi-appareils avec Android Emulator.
Steven Jenkins • 2 minutes de lecture
Restez informé
Recevez chaque semaine les dernières informations sur le développement Android directement dans votre boîte de réception.