Eingebettete Bildauswahl: Fotos und Videos in Ihrer App auf privatem Wege anfordern
Mit einer neuen Funktion der Android-Bildauswahl können Sie die Nutzerfreundlichkeit Ihrer App verbessern. Die neue eingebettete Bildauswahl bietet Nutzern eine nahtlose und datenschutzfreundliche Möglichkeit, Fotos und Videos direkt über die Benutzeroberfläche Ihrer App auszuwählen. Ihre App kann jetzt alle Vorteile der Bildauswahl nutzen, einschließlich des Zugriffs auf Cloud-Inhalte, die direkt in die App eingebunden sind.
Warum eingebettet?
Wir wissen, dass viele Apps Nutzern eine nahtlose und hochgradig integrierte Möglichkeit bieten möchten, Fotos oder Videos auszuwählen. Die eingebettete Bildauswahl wurde genau dafür entwickelt. Nutzer können schnell auf ihre letzten Fotos zugreifen, ohne Ihre App zu verlassen. Sie können auch ihre gesamte Mediathek in ihrem bevorzugten Cloud-Medienanbieter (z. B. Google Fotos) durchsuchen, einschließlich Favoriten, Alben und Suchfunktionen. Nutzer müssen so nicht mehr zwischen Apps wechseln oder sich fragen, ob das gewünschte Foto lokal oder in der Cloud gespeichert ist.
Nahtlose Integration, verbesserter Datenschutz
Mit der eingebetteten Bildauswahl benötigt Ihre App erst dann Zugriff auf die Fotos oder Videos des Nutzers, wenn er tatsächlich etwas auswählt. Das bedeutet mehr Datenschutz für Ihre Nutzer und eine optimierte Nutzererfahrung. Außerdem haben Nutzer mit der eingebetteten Bildauswahl Zugriff auf ihre gesamte cloudbasierte Mediathek, während die Standardberechtigung für Fotos auf lokale Dateien beschränkt ist.
Die eingebettete Bildauswahl in Google Messages
Google Messages zeigt die Leistungsfähigkeit der eingebetteten Bildauswahl. So haben sie es integriert:
- Intuitive Platzierung : Die Bildauswahl befindet sich direkt unter der Schaltfläche für die Kamera. Nutzer können also ganz einfach zwischen einem neuen Foto und einem vorhandenen Foto wählen.
- Dynamische Vorschau:Unmittelbar nachdem ein Nutzer auf ein Foto tippt, wird eine große Vorschau angezeigt, sodass er seine Auswahl leicht bestätigen kann. Wenn sie die Auswahl des Fotos aufheben, verschwindet die Vorschau wieder.
- Mehr Inhalte aufrufen : Die ursprüngliche Ansicht ist vereinfacht und bietet einfachen Zugriff auf aktuelle Fotos. Nutzer können die Bildauswahl jedoch ganz einfach maximieren, um alle Fotos und Videos in ihrer Fotogalerie aufzurufen und auszuwählen, einschließlich Cloud-Inhalten aus Google Fotos.
- Nutzerauswahl respektieren:Die eingebettete Bildauswahl gewährt nur Zugriff auf die Fotos oder Videos, die der Nutzer auswählt. Das bedeutet, dass Sie die Foto- und Videoberechtigungen nicht mehr anfordern müssen. Außerdem muss die Messages App nicht mehr mit Situationen umgehen, in denen Nutzer nur eingeschränkten Zugriff auf Fotos und Videos gewähren.
Implementierung
Die Einbindung der eingebetteten Bildauswahl wird durch die Jetpack-Bibliothek für die Bildauswahl erleichtert.
Jetpack Compose
Fügen Sie zuerst die Jetpack-Bildauswahl-Bibliothek als Abhängigkeit hinzu.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Die zusammensetzbare Funktion „EmbeddedPhotoPicker“ bietet einen Mechanismus, um die eingebettete Benutzeroberfläche der Bildauswahl direkt in Ihren Compose-Bildschirm einzufügen. Mit dieser zusammensetzbaren Funktion wird eine SurfaceView erstellt, in der die eingebettete Benutzeroberfläche der Bildauswahl gehostet wird. Sie verwaltet die Verbindung zum Dienst „EmbeddedPhotoPicker“, verarbeitet Nutzerinteraktionen und kommuniziert ausgewählte Media-URIs an die aufrufende Anwendung.
@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) } } ) } } } } }
Aufrufe
Fügen Sie zuerst die Jetpack-Bildauswahl-Bibliothek als Abhängigkeit hinzu.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Wenn Sie die eingebettete Bildauswahl hinzufügen möchten, müssen Sie Ihrer Layoutdatei einen Eintrag hinzufügen.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />Initialisieren Sie sie dann in Ihrer Aktivität oder Ihrem 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() ) }
Sie können verschiedene Methoden von EmbeddedPhotoPickerSession aufrufen, um mit der eingebetteten Auswahl zu interagieren.
// 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)
Die eingebettete Bildauswahl ist für Nutzer mit Android 14 (API-Level 34) oder höher mit SDK-Erweiterungen ab Version 15 verfügbar. Weitere Informationen zur Geräteverfügbarkeit der Bildauswahl
Zum Schutz der Nutzer und zur Verbesserung der Sicherheit rendert das System die eingebettete Bildauswahl so, dass kein Zeichnen oder Überlagern möglich ist. Diese bewusste Designentscheidung bedeutet, dass Sie bei der UX den Anzeigebereich der Bildauswahl als separates und dediziertes Element betrachten sollten, ähnlich wie bei der Planung eines Werbebanners.
Wenn Sie Feedback oder Vorschläge haben, senden Sie Tickets an unseren Issue Tracker.
Weiterlesen
-
Produktneuheiten
Datenschutz und Nutzerkontrolle bleiben das Herzstück von Android. So wie die Fotogalerie die Freigabe von Medien sicher und einfach gemacht hat, bieten wir jetzt dasselbe Maß an Datenschutz, Einfachheit und Nutzerfreundlichkeit für die Auswahl von Kontakten.
Roxanna Aliabadi Walker • Lesezeit: 4 Minuten
-
Produktneuheiten
Die KI-Workflows und ‑Anforderungen jedes Entwicklers sind einzigartig. Daher ist es wichtig, dass Sie selbst entscheiden können, wie KI Sie bei der Entwicklung unterstützen soll. Im Januar haben wir die Möglichkeit eingeführt, ein beliebiges lokales oder Remote-KI-Modell für KI-Funktionen in Android Studio auszuwählen.
Matthew Warner • Lesezeit: 2 Minuten
-
Produktneuheiten
Android Studio Panda 3 ist jetzt stabil und kann für die Produktion verwendet werden. Mit dieser Version haben Sie noch mehr Kontrolle und können Ihre KI-basierten Workflows noch besser anpassen. So wird es noch einfacher, hochwertige Android-Apps zu entwickeln.
Matt Dyor • Lesezeit: 3 Minuten
Auf dem Laufenden bleiben
Lassen Sie sich Woche für Woche die neuesten Informationen zur Android-Entwicklung zusenden.