Ürün Haberleri

Yerleştirilmiş fotoğraf seçici

Okuma süresi: 8 dakika
Roxanna Aliabadi Walker ve Yacine Rezgui

Yerleştirilmiş fotoğraf seçici: Uygulamanızda fotoğraf ve videoları gizli olarak istemenin daha sorunsuz yolu

photopicker.png

Android fotoğraf seçiciyi kullanmanın heyecan verici yeni bir yoluyla uygulamanızın kullanıcı deneyimini iyileştirmeye hazırlanın. Yeni yerleştirilmiş fotoğraf seçici, kullanıcıların doğrudan uygulamanızın arayüzünde fotoğraf ve video seçebileceği sorunsuz ve gizlilik odaklı bir yöntem sunar. Artık uygulamanız, fotoğraf seçiciyle sunulan tüm avantajlardan yararlanabilir. Örneğin, bulut içeriğine erişim doğrudan uygulamanızın deneyimine entegre edilebilir.

Neden yerleştirme?

Birçok uygulamanın, fotoğraf veya video seçerken kullanıcılara yüksek düzeyde entegre ve sorunsuz bir deneyim sunmak istediğini biliyoruz. Yerleştirilmiş fotoğraf seçici tam da bu amaçla tasarlanmıştır. Kullanıcılar, uygulamanızdan ayrılmadan son fotoğraflarına hızlıca erişebilir.Ayrıca, tercih ettikleri bulut medya sağlayıcıda (ör. Google Fotoğraflar) favoriler, albümler ve arama işlevi dahil olmak üzere kitaplıklarının tamamını keşfedebilirler. Bu sayede kullanıcıların uygulamalar arasında geçiş yapması veya istedikleri fotoğrafın yerel olarak mı yoksa bulutta mı depolandığı konusunda endişelenmesi gerekmez.

Sorunsuz entegrasyon, gelişmiş gizlilik

Yerleştirilmiş fotoğraf seçici sayesinde uygulamanız, kullanıcı bir öğe seçene kadar kullanıcının fotoğraflarına veya videolarına erişmek zorunda kalmaz. Bu sayede kullanıcılarınızın gizliliği artar ve daha sorunsuz bir deneyim yaşarlar. Ayrıca, yerleşik fotoğraf seçici, kullanıcılara bulut tabanlı medya kitaplıklarının tamamına erişim imkanı sunarken standart fotoğraf izni yalnızca yerel dosyalarla sınırlıdır.

Google Mesajlar'daki yerleştirilmiş fotoğraf seçici

Google Mesajlar, yerleşik fotoğraf seçicinin gücünü gösteren örneklerden biri. Bu özelliği nasıl entegre ettiklerini aşağıda görebilirsiniz:

  • Sezgisel yerleştirme: Fotoğraf seçici, kamera düğmesinin hemen altında yer alır. Böylece kullanıcılar yeni bir fotoğraf çekmek veya mevcut bir fotoğrafı seçmek arasında net bir seçim yapabilir.
  • Dinamik önizleme: Kullanıcılar bir fotoğrafa dokunduktan hemen sonra büyük bir önizleme görür. Bu sayede seçimlerini kolayca onaylayabilirler. Fotoğrafın seçimi kaldırılırsa önizleme kaybolur ve deneyim temiz ve düzenli kalır.
  • Daha fazla içerik için genişletin:  İlk görünüm basitleştirildi ve son fotoğraflara kolay erişim sağlandı. Ancak kullanıcılar, kitaplıklarındaki tüm fotoğraf ve videolara (Google Fotoğraflar'daki bulut içerikleri dahil) göz atmak ve bunları seçmek için fotoğraf seçiciyi kolayca genişletebilir.
  • Kullanıcı tercihlerine saygı duyma: Yerleştirilmiş fotoğraf seçici yalnızca kullanıcının seçtiği belirli fotoğraf veya videolara erişim izni verir. Bu nedenle, fotoğraf ve video izinleri tamamen istenmeyebilir. Bu sayede Mesajlar'ın, kullanıcıların fotoğraf ve videolara yalnızca sınırlı erişim izni verdiği durumları işlemesi de gerekmez.
gif1.gif
gif2.gif

Uygulama

Yerleştirilmiş fotoğraf seçiciyi entegre etmek için Photo Picker Jetpack kitaplığını kullanabilirsiniz.  

Jetpack Compose

Öncelikle, Jetpack Photo Picker kitaplığını bağımlılık olarak ekleyin.

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

EmbeddedPhotoPicker composable işlevi, yerleşik fotoğraf seçici kullanıcı arayüzünü doğrudan Compose ekranınıza dahil etme mekanizması sağlar. Bu composable, yerleştirilmiş fotoğraf seçici kullanıcı arayüzünü barındıran bir SurfaceView oluşturur. EmbeddedPhotoPicker hizmetine bağlantıyı yönetir, kullanıcı etkileşimlerini işler ve seçilen medya URI'lerini çağıran uygulamaya iletir.  

  @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)
                            }
                        }
                    )
                }
            }
        }
    }
}

Görüntüleme sayısı

Öncelikle, Jetpack Photo Picker kitaplığını bağımlılık olarak ekleyin.

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

Yerleştirilmiş fotoğraf seçiciyi eklemek için düzen dosyanıza bir giriş eklemeniz gerekir.  

  <view class="androidx.photopicker.EmbeddedPhotoPickerView"
    android:id="@+id/photopicker"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Etkinliğinizde/parçanızda başlatın.

  // 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()
    )
}

Yerleştirilmiş seçiciyle etkileşim kurmak için EmbeddedPhotoPickerSession farklı yöntemlerini çağırabilirsiniz.

  // 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)

Yerleştirilmiş fotoğraf seçici deneyiminin, SDK Uzantıları 15 veya sonraki sürümlerin yüklü olduğu Android 14 (API düzeyi 34) ya da sonraki sürümleri çalıştıran kullanıcılara sunulduğunu belirtmek isteriz. Fotoğraf seçicinin cihazlarda kullanılabilirliği hakkında daha fazla bilgi edinin.

Sistem, kullanıcı gizliliğini ve güvenliğini artırmak için yerleştirilmiş fotoğraf seçiciyi çizim veya yerleştirme işlemlerini engelleyecek şekilde oluşturur. Bu kasıtlı tasarım tercihi, kullanıcı deneyiminizin fotoğraf seçicinin görüntüleme alanını ayrı ve özel bir öğe olarak değerlendirmesi gerektiği anlamına gelir. Bu, reklam banner'ı planlamanıza benzer.

Geri bildiriminiz veya önerileriniz varsa sorun izleyicimize bilet gönderin.

Yazan:

Okumaya devam edin