Wbudowany selektor zdjęć: łatwiejszy sposób na prywatne proszenie o zdjęcia i filmy w aplikacji
Przygotuj się na zwiększenie wygody korzystania z aplikacji dzięki nowemu, ekscytującemu sposobowi używania selektora zdjęć na Androidzie. Nowy wbudowany selektor zdjęć umożliwia użytkownikom bezproblemowe i bezpieczne wybieranie zdjęć i filmów bezpośrednio w interfejsie aplikacji. Teraz Twoja aplikacja może korzystać ze wszystkich zalet selektora zdjęć, w tym z dostępu do treści w chmurze, bezpośrednio w aplikacji.
Dlaczego warto korzystać z wbudowanych funkcji?
Wiemy, że wiele aplikacji chce zapewnić użytkownikom wysoce zintegrowane i płynne działanie 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ą oni też przeglądać całą bibliotekę u preferowanego dostawcy multimediów w chmurze (np. Zdjęcia Google), w tym ulubione, albumy i funkcje wyszukiwania. Dzięki temu użytkownicy nie muszą przełączać się między aplikacjami ani martwić się, czy zdjęcie, którego szukają, jest przechowywane lokalnie czy w chmurze.
Płynna integracja, ulepszona ochrona prywatności
Dzięki wbudowanemu selektorowi zdjęć aplikacja nie potrzebuje dostępu do zdjęć ani filmów użytkownika, dopóki nie wybierze on konkretnych plików. Oznacza to większą prywatność dla użytkowników i bardziej usprawnione działanie. Ponadto wbudowany selektor zdjęć zapewnia użytkownikom dostęp do całej biblioteki multimediów w chmurze, podczas gdy standardowe uprawnienia 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 to zintegrowali:
- Intuicyjne umiejscowienie: selektor zdjęć znajduje się tuż pod przyciskiem aparatu, dzięki czemu użytkownicy mogą łatwo wybrać, czy chcą zrobić nowe zdjęcie, czy wybrać istniejące.
- Dynamiczny podgląd: zaraz po kliknięciu zdjęcia użytkownik widzi duży podgląd, co ułatwia potwierdzenie wyboru. Jeśli odznaczą zdjęcie, podgląd zniknie, dzięki czemu interfejs pozostanie przejrzysty i uporządkowany.
- Rozwijanie w celu wyświetlenia większej ilości treści: widok początkowy 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.
- Szanowanie 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 aplikacje mogą całkowicie przestać prosić o uprawnienia 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
Integrację wbudowanego selektora zdjęć ułatwia biblioteka Jetpack selektora zdjęć.
Jetpack Compose
Najpierw dodaj bibliotekę selektora zdjęć Jetpack jako zależność.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
Funkcja typu „composable” EmbeddedPhotoPicker umożliwia umieszczenie interfejsu wbudowanego selektora zdjęć bezpośrednio na ekranie Compose. Ten element kompozycyjny tworzy obiekt SurfaceView, który zawiera 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ę selektora zdjęć Jetpack 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" />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()
)
}Możesz wywoływać różne metody EmbeddedPhotoPickerSession, aby wchodzić w interakcje z umieszczonym selektorem.
// 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)
Warto pamiętać, że wbudowany selektor zdjęć jest dostępny dla użytkowników Androida 14 (API na poziomie 34) lub nowszego z rozszerzeniami pakietu SDK w wersji 15 lub nowszej. Więcej informacji o dostępności selektora zdjęć na urządzeniach
Aby zwiększyć prywatność użytkownika i bezpieczeństwo, system renderuje wbudowany selektor zdjęć w sposób, który uniemożliwia rysowanie i nakładanie. Ten celowy wybór projektowy oznacza, że w ramach UX należy traktować obszar wyświetlania selektora zdjęć jako odrębny i dedykowany element, podobnie jak w przypadku banera reklamowego.
Jeśli masz jakieś uwagi lub sugestie, prześlij zgłoszenie do naszego systemu śledzenia błędów.
-
Wiadomości o usłudzePrywatność i ustawienia dostępne dla użytkownika pozostają podstawą działania Androida. Podobnie jak selektor zdjęć ułatwił udostępnianie multimediów i ich wdrażanie, teraz wprowadzamy ten sam poziom prywatności, prostoty i wygody użytkownika w przypadku wybierania kontaktów.
Roxanna Aliabadi Walker • Czas czytania: 4 min -
Wiadomości o usłudzeW miarę jak rozwój agentów przyspiesza, inżynieria Androida osiąga nowy, ekscytujący etap: przechodzi od wspomagania uzupełniania kodu do agentów wykonujących zadania od początku do końca pod Twoim kierunkiem. Masz pełną swobodę i elastyczność w wyborze modeli i agentów, których używasz.
Jason Buchel • Czas czytania: 3 min -
Wiadomości o usłudzeDziś przedstawiliśmy, jak zamierzamy realizować naszą wizję „więcej niż sklep” w kolejnym rozdziale. Od karty Ty, która jest teraz osobistą bazą dla ponad 250 milionów aktywnych użytkowników miesięcznie, po ujednoliconą platformę do gier łączącą ponad 700 milionów profili graczy – Google Play jest zawsze tam, gdzie użytkownicy.
Paul Feng • Czas czytania: 3 min
Otrzymuj co tydzień najnowsze informacje o tworzeniu aplikacji na Androida na swoją skrzynkę odbiorczą.