Produktneuheiten

Die eingebettete Bildauswahl

Lesezeit: 8 Minuten

Die eingebettete Bildauswahl: Fotos und Videos in Ihrer App auf datenschutzfreundlichere Weise anfordern

photopicker.png

Mit der neuen 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 in der 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?

Viele Apps möchten Nutzern eine nahtlose und hochgradig integrierte Möglichkeit bieten, Fotos oder Videos auszuwählen. Die eingebettete Bildauswahl wurde genau dafür entwickelt. Nutzer können schnell auf ihre letzten Fotos zugreifen, ohne die App zu verlassen. Sie können auch ihre gesamte Mediathek bei ihrem bevorzugten Cloud-Media-Anbieter (z. B. Google Fotos) durchsuchen, einschließlich Favoriten, Alben und Suchfunktionen. So müssen Nutzer nicht 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 etwas ausgewählt hat. Das bedeutet mehr Datenschutz für Ihre Nutzer und eine optimierte Nutzererfahrung. Außerdem bietet die eingebettete Bildauswahl Nutzern Zugriff auf ihre gesamte cloudbasierte Mediathek, während die Standardberechtigung für Fotos nur auf lokale Dateien beschränkt ist.

Die eingebettete Bildauswahl in Google Messages

Google Messages zeigt die Leistungsfähigkeit der eingebetteten Bildauswahl. So wurde sie eingebunden:

  • Intuitive Platzierung:  Die Bildauswahl befindet sich direkt unter der Schaltfläche für die Kamera. Nutzer können also ganz einfach auswählen, ob sie ein neues Foto aufnehmen oder ein vorhandenes auswählen möchten.
  • Dynamische Vorschau:Unmittelbar nachdem ein Nutzer auf ein Foto tippt, wird eine große Vorschau angezeigt, damit er seine Auswahl bestätigen kann. Wenn er die Auswahl des Fotos aufhebt, wird die Vorschau ausgeblendet, sodass die Benutzeroberfläche übersichtlich bleibt.
  • Mehr Inhalte anzeigen : Die ursprüngliche Ansicht ist vereinfacht und bietet einfachen Zugriff auf die letzten Fotos. Nutzer können die Bildauswahl jedoch ganz einfach erweitern, um alle Fotos und Videos in ihrer Mediathek zu durchsuchen und auszuwählen, einschließlich Cloud-Inhalten aus Google Fotos.
  • Nutzerentscheidungen respektieren:Die eingebettete Bildauswahl gewährt nur Zugriff auf die Fotos oder Videos, die der Nutzer auswählt. Das bedeutet, dass er die Berechtigungen für Fotos und Videos nicht mehr anfordern muss. Außerdem müssen in Messages keine Situationen mehr berücksichtigt werden, in denen Nutzer nur eingeschränkten Zugriff auf Fotos und Videos gewähren.
gif1.gif
gif2.gif

Implementierung

Die Einbindung der eingebetteten Bildauswahl wird durch die Jetpack-Bibliothek für die Bildauswahl erleichtert.  

Jetpack Compose

Fügen Sie zuerst die Jetpack-Bibliothek für die Bildauswahl als Abhängigkeit hinzu.

implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")

Die zusammensetzbare Funktion „EmbeddedPhotoPicker“ bietet einen Mechanismus, um die Benutzeroberfläche der eingebetteten Bildauswahl direkt in Ihren Compose-Bildschirm einzufügen. Mit dieser zusammensetzbaren Funktion wird eine SurfaceView erstellt, in der die Benutzeroberfläche der eingebetteten Bildauswahl gehostet wird. Sie verwaltet die Verbindung zum EmbeddedPhotoPicker-Dienst, 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-Bibliothek für die Bildauswahl 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/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.

Aus Gründen des Datenschutzes und der Sicherheit wird die eingebettete Bildauswahl so gerendert, dass kein Zeichnen oder Überlagern möglich ist. Diese bewusste Designentscheidung bedeutet, dass Sie den Anzeigebereich der Bildauswahl als separates und dediziertes Element betrachten sollten, ähnlich wie bei einem Werbebanner.

Wenn Sie Feedback oder Vorschläge haben, senden Sie Tickets an unsere Issue Tracker.

Weiterlesen