הכלי המוטמע לבחירת תמונות: דרך חלקה יותר לבקש תמונות וסרטונים באופן פרטי באפליקציה
אנחנו משיקים דרך חדשה ומרגשת לשימוש בכלי לבחירת תמונות ב-Android, שתעזור לכם לשפר את חוויית המשתמש באפליקציה. הכלי החדש לבחירת תמונות שמוטמע באפליקציה מאפשר למשתמשים לבחור תמונות וסרטונים בצורה חלקה תוך שמירה על הפרטיות, ישירות בממשק של האפליקציה. עכשיו האפליקציה יכולה ליהנות מכל היתרונות של הכלי לבחירת תמונות, כולל גישה לתוכן בענן, שמשולב ישירות בחוויית השימוש באפליקציה.
למה כדאי להטמיע?
אנחנו מבינים שבעלי אפליקציות רבים רוצים לספק למשתמשים חוויה משולבת וחלקה מאוד כשבוחרים תמונות או סרטונים. הכלי המוטמע לבחירת תמונות נועד בדיוק למטרה הזו, והוא מאפשר למשתמשים לגשת במהירות לתמונות האחרונות שלהם בלי לצאת מהאפליקציה. הם יכולים גם לעיין בספרייה המלאה שלהם בספק המדיה המועדף שלהם בענן (למשל, תמונות Google), כולל תמונות מועדפות, אלבומים ופונקציונליות חיפוש. כך המשתמשים לא צריכים לעבור בין אפליקציות או לדאוג אם התמונה שהם רוצים שמורה באופן מקומי או בענן.
שילוב חלק, פרטיות משופרת
בעזרת הכלי המוטמע לבחירת תמונות, האפליקציה לא צריכה לגשת לתמונות או לסרטונים של המשתמשים עד שהם בוחרים משהו. המשמעות היא יותר פרטיות למשתמשים וחוויה חלקה יותר. בנוסף, כלי לבחירת תמונות המוטמע מספק למשתמשים גישה לכל ספריית המדיה שלהם שמבוססת-ענן, בעוד שהרשאת התמונות הרגילה מוגבלת לקבצים מקומיים בלבד.
כלי לבחירת תמונות שמוטמע ב-Google Messages
אפליקציית Google Messages מדגימה את היכולות של כלי בחירת התמונות המוטמע. כך הם שילבו את התכונה:
- מיקום אינטואיטיבי: הכלי לבחירת תמונות ממוקם ממש מתחת ללחצן המצלמה, כך שהמשתמשים יכולים לבחור בקלות בין צילום תמונה חדשה לבין בחירת תמונה קיימת.
- תצוגה מקדימה דינמית: מיד אחרי שהמשתמש מקיש על תמונה, הוא רואה תצוגה מקדימה גדולה, וכך קל לו לאשר את הבחירה. אם הם יבטלו את הבחירה בתמונה, התצוגה המקדימה תיעלם, והחוויה תישאר נקייה ופשוטה.
- הרחבה לצפייה בתוכן נוסף: התצוגה הראשונית פשוטה ומאפשרת גישה נוחה לתמונות האחרונות. עם זאת, המשתמשים יכולים להרחיב בקלות את כלי בחירת התמונות כדי לעיין בכל התמונות והסרטונים בספרייה שלהם ולבחור מתוכם, כולל תוכן בענן מ-Google Photos.
- כיבוד הבחירות של המשתמשים: כלי לבחירת תמונות המוטמע מעניק גישה רק לתמונות או לסרטונים הספציפיים שהמשתמש בוחר, כך שהמשתמש יכול להפסיק את הבקשה להרשאות גישה לתמונות ולסרטונים לגמרי. בנוסף, כך לא צריך לטפל במצבים שבהם המשתמשים מעניקים גישה מוגבלת בלבד לתמונות ולסרטונים.
הטמעה
קל להטמיע את הכלי המוטמע לבחירת תמונות באמצעות הספרייה Photo Picker Jetpack.
Jetpack Compose
קודם כול, צריך לכלול את ספריית Jetpack Photo Picker כתלות.
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")
הפונקציה הקומפוזבילית EmbeddedPhotoPicker מספקת מנגנון לכלול את ממשק המשתמש של הכלי לבחירת תמונות מוטמעות ישירות במסך Compose. רכיב ה-Composable הזה יוצר 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 ומעלה. מידע נוסף על הזמינות של הכלי לבחירת תמונות במכשירים
כדי לשפר את הפרטיות והאבטחה של המשתמשים, המערכת מעבדת את הכלי המוטמע לבחירת תמונות באופן שמונע ציור או שכבת-על. הבחירה העיצובית הזו אומרת שחוויית המשתמש צריכה להתייחס לאזור התצוגה של בוחר התמונות כאל רכיב נפרד וייעודי, בדומה לתכנון של באנר פרסומי.
אם יש לכם משוב או הצעות, אתם יכולים לשלוח כרטיסים לכלי למעקב אחר בעיות.
להמשך הקריאה
-
חדשות על מוצרים
הפרטיות והשליטה של המשתמשים ממשיכות להיות בבסיס חוויית השימוש ב-Android. בדיוק כמו שכלי בחירת התמונות הפך את שיתוף המדיה לבטוח וקל ליישום, עכשיו אנחנו מביאים את אותה רמה של פרטיות, פשטות וחוויית משתמש מעולה לבחירת אנשי קשר.
Roxanna Aliabadi Walker • משך הקריאה: 4 דקות
-
חדשות על מוצרים
אנחנו ב-Google Play מחויבים לספק למשתמשים את החוויה הכי טובה שאפשר, ולוודא שלמפתחים יש את הכלים והגמישות הדרושים כדי להצליח.
Paul Feng • משך הקריאה: 3 דקות
-
חדשות על מוצרים
בשנה שעברה השקנו אימות מפתחים ב-Android כדי לחזק את אבטחת הסביבה העסקית ולמנוע מגורמים זדוניים להסתתר מאחורי אנונימיות כדי לפרסם אפליקציות מזיקות.
Matthew Forsythe • משך הקריאה: 2 דקות
כדאי תמיד להיות בעניינים
רוצים לקבל טיפים עדכניים לפיתוח Android ישירות לאימייל כל שבוע?