Wbudowany selektor zdjęć: wygodniejszy sposób na prywatne wysyłanie próśb o zdjęcia i filmy w aplikacji
Przygotuj się na ulepszenie aplikacji dzięki nowemu, ciekawemu sposobowi korzystania z selektora zdjęć na Androidzie. Nowy wbudowany selektor zdjęć umożliwia użytkownikom wygodne i bezpieczne wybieranie zdjęć i filmów bezpośrednio w interfejsie aplikacji. Teraz Twoja aplikacja może korzystać z tych samych zalet, które oferuje selektor zdjęć, w tym z dostępu do treści w chmurze, zintegrowanego bezpośrednio z aplikacją.
Dlaczego wbudowany?
Wiemy, że wiele aplikacji chce zapewnić użytkownikom wysoce zintegrowane i wygodne środowisko podczas wybierania zdjęć lub filmów. Wbudowany selektor zdjęć został zaprojektowany właśnie w tym celu. Umożliwia użytkownikom szybki dostęp do ostatnich zdjęć bez opuszczania aplikacji.Mogą też przeglądać całą bibliotekę w preferowanym dostawcy multimediów w chmurze (np. w Zdjęciach Google), w tym ulubione, albumy i funkcję wyszukiwania. Dzięki temu użytkownicy nie muszą przełączać się między aplikacjami ani martwić się, czy zdjęcie, które chcą wybrać, jest przechowywane lokalnie czy w chmurze.
Płynna integracja, większa prywatność
Dzięki wbudowanemu selektorowi zdjęć aplikacja nie potrzebuje dostępu do zdjęć ani filmów użytkownika, dopóki nie wybierze on żadnego z nich. Oznacza to większą prywatność dla użytkowników i wygodniejsze korzystanie z aplikacji. Ponadto wbudowany selektor zdjęć zapewnia użytkownikom dostęp do całej biblioteki multimediów w chmurze, podczas gdy standardowe uprawnienia dostępu do zdjęć są ograniczone tylko do plików lokalnych.
Wbudowany selektor zdjęć w Wiadomościach Google
Wiadomości Google pokazują możliwości wbudowanego selektora zdjęć. Oto jak został zintegrowany:
- Intuicyjne umiejscowienie: selektor zdjęć znajduje się bezpośrednio pod przyciskiem aparatu, dzięki czemu użytkownicy mogą łatwo wybrać, czy chcą zrobić nowe zdjęcie, czy wybrać istniejące.
- Dynamiczny podgląd: natychmiast po kliknięciu zdjęcia użytkownik widzi jego duży podgląd, co ułatwia potwierdzenie wyboru. Jeśli użytkownik odznaczy zdjęcie, podgląd zniknie, co zapewni przejrzystość i porządek.
- Rozwiń, aby zobaczyć więcej treści: początkowy widok jest uproszczony i zapewnia łatwy dostęp do ostatnich zdjęć. Użytkownicy mogą jednak łatwo rozwinąć selektor zdjęć, aby przeglądać i wybierać wszystkie zdjęcia i filmy w bibliotece, w tym treści w chmurze ze Zdjęć Google.
- Respektowanie wyborów użytkowników: wbudowany selektor zdjęć przyznaje dostęp tylko do konkretnych zdjęć lub filmów wybranych przez użytkownika, co oznacza, że użytkownicy mogą całkowicie zrezygnować z próśb o uprawnienia dostępu do zdjęć i filmów. Dzięki temu Wiadomości nie muszą obsługiwać sytuacji, w których użytkownicy przyznają tylko ograniczony dostęp do zdjęć i filmów.
Implementacja
Integracja wbudowanego selektora zdjęć jest łatwa dzięki bibliotece Jetpack Photo Picker.
Jetpack Compose
Najpierw dodaj bibliotekę Jetpack Photo Picker jako zależność.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Funkcja composable EmbeddedPhotoPicker umożliwia umieszczenie interfejsu wbudowanego selektora zdjęć bezpośrednio na ekranie Compose. Ten composable tworzy SurfaceView, który hostuje interfejs wbudowanego selektora zdjęć. Zarządza połączeniem z usługą EmbeddedPhotoPicker, obsługuje interakcje użytkownika i przekazuje wybrane identyfikatory URI multimediów do aplikacji wywołującej.
@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)
}
}
)
}
}
}
}
}Wyświetlenia
Najpierw dodaj bibliotekę Jetpack Photo Picker jako zależność.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
Aby dodać wbudowany selektor zdjęć, musisz dodać wpis do pliku układu.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />I zainicjuj go w aktywności lub fragmencie.
// 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()
)
}Aby wchodzić w interakcje z wbudowanym selektorem, możesz wywoływać różne metody 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)
Pamiętaj, że wbudowany selektor zdjęć jest dostępny dla użytkowników Androida 14 (API na poziomie 34) lub nowszego z rozszerzeniami SDK w wersji 15 lub nowszej. Więcej informacji o dostępności selektora zdjęć na urządzeniach.
Aby zwiększyć prywatność i bezpieczeństwo użytkowników, system renderuje wbudowany selektor zdjęć w sposób, który uniemożliwia rysowanie i nakładanie. Ten celowy wybór projektu oznacza, że interfejs użytkownika powinien traktować obszar wyświetlania selektora zdjęć jako odrębny i dedykowany element, podobnie jak w przypadku banera reklamowego.
Jeśli masz jakieś opinie lub sugestie, prześlij zgłoszenie do naszego narzędzia do śledzenia problemów.
-
Nowości dotyczące produktówPrywatność i ustawienia dostępne dla użytkownika nadal są najważniejsze w Androidzie. Tak jak selektor zdjęć sprawił, że udostępnianie multimediów stało się bezpieczne i łatwe do wdrożenia, tak teraz zapewniamy ten sam poziom prywatności, prostoty i wygody użytkownika w przypadku wybierania kontaktów.
Roxanna Aliabadi Walker • Czas czytania: 4 minuty -
Nowości dotyczące produktówZapewnienie bezpiecznego środowiska online i ochrona użytkowników przed szkodliwymi treściami to dla nas w Google Play priorytet.
Paul Feng • Czas czytania: 2 minuty -
Nowości dotyczące produktówDziś oficjalnie obchodzimy 5. rocznicę wydania Jetpack Compose 1.0. Od wersji 1.0, ogłoszonej 28 lipca 2021 r., do najnowszej wersji 1.11, API znacznie się rozwinęły na przestrzeni lat, dlatego chcemy to uczcić.
Rebecca Franks, Nick Butcher, Loryn Hairston • Czas czytania: 5 minut
Otrzymuj co tydzień najnowsze informacje o tworzeniu aplikacji na Androida na swoją skrzynkę odbiorczą.