הכלי המוטמע לבחירת תמונות: דרך חלקה יותר לבקש תמונות וסרטונים באופן פרטי באפליקציה
מכינים את הקרקע לשיפור חוויית השימוש באפליקציה עם דרך חדשה ומעניינת להשתמש בכלי לבחירת תמונות ב-Android! הכלי החדש לבחירת תמונות מוטמע באפליקציה ומאפשר למשתמשים לבחור תמונות וסרטונים בצורה חלקה ועם דגש על פרטיות, ישירות בממשק של האפליקציה. עכשיו האפליקציה שלכם יכולה ליהנות מכל היתרונות של הכלי לבחירת תמונות, כולל גישה לתוכן בענן, שמשולב ישירות בחוויית השימוש באפליקציה.
למה כדאי להטמיע?
אנחנו מבינים שמפתחי אפליקציות רבים רוצים לספק למשתמשים חוויה משולבת וחלקה כשהם בוחרים תמונות או סרטונים. הכלי המוטמע לבחירת תמונות נועד בדיוק למטרה הזו: הוא מאפשר למשתמשים לגשת במהירות לתמונות האחרונות שלהם בלי לצאת מהאפליקציה. הם יכולים גם לעיין בספרייה המלאה שלהם בספק המדיה המועדף עליהם בענן (למשל, Google Photos), כולל המועדפים, האלבומים ופונקציונליות החיפוש. כך המשתמשים לא צריכים לעבור בין אפליקציות או לדאוג אם התמונה שהם רוצים מאוחסנת באופן מקומי או בענן.
שילוב חלק, פרטיות משופרת
עם הכלי המוטמע לבחירת תמונות, האפליקציה לא צריכה גישה לתמונות או לסרטונים של המשתמש עד שהוא בוחר משהו בפועל. כך המשתמשים נהנים מיותר פרטיות ומחוויה חלקה יותר. בנוסף, הכלי המוטמע לבחירת תמונות מאפשר למשתמשים לגשת לכל ספריית המדיה שלהם בענן, בעוד שההרשאה הרגילה לתמונות מוגבלת לקבצים מקומיים בלבד.
הכלי המוטמע לבחירת תמונות ב-Google Messages
ב-Google Messages אפשר לראות את היכולות של הכלי המוטמע לבחירת תמונות. כך הם שילבו את זה:
- מיקום אינטואיטיבי: הכלי לבחירת תמונות נמצא ממש מתחת לכפתור המצלמה, כך שהמשתמשים יכולים לבחור בקלות אם לצלם תמונה חדשה או לבחור תמונה קיימת.
- תצוגה מקדימה דינמית: מיד אחרי שהמשתמשים לוחצים על תמונה, הם רואים תצוגה מקדימה גדולה, שמאפשרת להם לאשר בקלות את הבחירה שלהם. אם הם מבטלים את הבחירה בתמונה, התצוגה המקדימה נעלמת, וכך חוויית המשתמש נשארת נקייה ומסודרת.
- הרחבה לתוכן נוסף: התצוגה הראשונית פשוטה ומאפשרת גישה קלה לתמונות האחרונות. עם זאת, המשתמשים יכולים להרחיב בקלות את הכלי לבחירת תמונות כדי לעיין בכל התמונות והסרטונים בספרייה שלהם ולבחור מתוכם, כולל תוכן בענן מ-Google Photos.
- כיבוד הבחירות של המשתמשים: הכלי המוטמע לבחירת תמונות מעניק גישה רק לתמונות או לסרטונים הספציפיים שהמשתמש בוחר, כך שהאפליקציות יכולות להפסיק לבקש הרשאות גישה לתמונות ולסרטונים. כך גם לא צריך לטפל במצבים שבהם המשתמשים נותנים ל-Messages רק גישה מוגבלת לתמונות ולסרטונים.
הטמעה
קל לשלב את הכלי המוטמע לבחירת תמונות באמצעות ספריית Jetpack של הכלי לבחירת תמונות.
Jetpack Compose
קודם כול, צריך לכלול את הספרייה של כלי בחירת התמונות של Jetpack כתלות.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
הפונקציה הקומפוזבילית EmbeddedPhotoPicker מספקת מנגנון להכללת ממשק המשתמש של הכלי לבחירת תמונות מוטמע ישירות במסך Compose. הפונקציה הזו יוצרת SurfaceView שמארח את ממשק המשתמש של הכלי המוטמע לבחירת תמונות. הוא מנהל את החיבור לשירות EmbeddedPhotoPicker, מטפל באינטראקציות של המשתמשים ומעביר את כתובות ה-URI של המדיה שנבחרה לאפליקציה שמפעילה את השירות.
@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)
}
}
)
}
}
}
}
}צפיות
קודם כול, צריך לכלול את ספריית Jetpack Photo Picker כתלות.
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")
כדי להוסיף את הכלי המוטמע לבחירת תמונות, צריך להוסיף רשומה לקובץ הפריסה.
<view class="androidx.photopicker.EmbeddedPhotoPickerView"
android:id="@+id/photopicker"
android:layout_width="match_parent"
android:layout_height="match_parent" />ולהפעיל אותו בפעילות או בקטע.
// 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()
)
}אתם יכולים להפעיל שיטות שונות של 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)
חשוב לציין שהכלי המוטמע לבחירת תמונות זמין למשתמשים עם Android בגרסה 14 (רמת API 34) ואילך, עם SDK Extensions בגרסה 15 ומעלה. מידע נוסף על הזמינות של הכלי לבחירת תמונות במכשירים
כדי לשפר את פרטיות המשתמשים והאבטחה, המערכת מעבדת את הכלי לבחירת תמונות המוטמע באופן שמונע כל ציור או שכבת-על. הבחירה העיצובית הזו היא מכוונת, ומשמעותה היא שחוויית המשתמש צריכה להתייחס לאזור התצוגה של הכלי לבחירת תמונות כאל רכיב נפרד וייעודי, בדומה לתכנון של באנר פרסום.
אם יש לכם משוב או הצעות, אתם יכולים לשלוח כרטיסי תמיכה ל-Issue Tracker.
-
חדשות על המוצראפליקציות שמטרגטות את הגרסה הבאה של Android לא יוכלו יותר לכתוב ישירות לאנשי קשר באמצעות ההרשאה WRITE_CONTACTS.
Roxanna Aliabadi Walker • משך הקריאה: 6 דקות -
חדשות על המוצרהפרטיות והשליטה של המשתמשים עדיין נמצאות בלב חוויית השימוש ב-Android. כמו שהכלי לבחירת תמונות הפך את שיתוף המדיה למאובטח וקל ליישום, עכשיו אנחנו מביאים את אותה רמה של פרטיות, פשטות וחוויית משתמש מעולה לבחירת אנשי קשר.
Roxanna Aliabadi Walker • משך הקריאה: 4 דקות -
חדשות על המוצרהיום, במפגש של מפתחי Android, אנחנו מכריזים על הזמינות הרחבה של הרבה כלים וממשקי API שנועדו להסיר את החיכוך היומיומי ולתת לכם יותר גמישות ליצור אפליקציות Android נהדרות.
Matthew McCullough • משך הקריאה: 4 דקות
רוצים לקבל טיפים עדכניים לפיתוח Android ישירות לאימייל כל שבוע?