Yerleştirilmiş fotoğraf seçici

Sürekli fotoğraf seçici seçim sürecini gösteren animasyon

Yerleştirilmiş fotoğraf seçici, fotoğraf seçme deneyiminin farklı bir biçimidir ve doğrudan uygulamaların kullanıcı arayüzlerinde etkileşime izin verir. Klasik fotoğraf seçiciye kıyasla gelişmiş entegrasyon ve özelleştirme seçenekleri sunar. SurfaceView yöntemi kullanılarak setChildSurfacePackage üzerinde oluşturulduğu için yerleştirilmemiş sürümün güvenlik ve gizlilik özelliklerini korur.

Yerleştirilmiş fotoğraf seçici sayesinde kullanıcılar, istemci uygulamasında odaklarını kaybetmeden hem cihazlarından hem de bulut fotoğraf kitaplıklarından sürekli olarak fotoğraf ve video seçebilir. İstemci uygulaması etkin kalır, etkinliği devam eder ve kullanıcı seçimlerine gerçek zamanlı olarak yanıt verebilir.

Yerleştirilmiş fotoğraf seçici, daha sorunsuz bir kullanıcı arayüzü entegrasyonu sunar ancak özel bir SurfaceView üzerinde oluşturulduğu için standart fotoğraf seçiciyle aynı güvenlik ve gizlilik özelliklerini korur.

Uygun cihazlar

Yerleştirilmiş fotoğraf seçici, SDK Uzantıları sürümü 15 veya daha yeni olan Android 14 (API düzeyi 34) yüklü cihazlarda desteklenir.

Bu özelliklere uymayan cihazlar, Google Play Hizmetleri'ni kullanarak klasik fotoğraf seçiciyi veya geri bağlanmış sürümü kullanabilir.

Jetpack kitaplığı bağımlılığı

Jetpack fotoğraf seçici kitaplığını bağımlı kaynak olarak ekleyin:

// For apps using Jetpack Compose
implementation("androidx.photopicker:photopicker-compose:1.0.0-alpha01")

// For apps using Views
implementation("androidx.photopicker:photopicker:1.0.0-alpha01")

Yerleştirilmiş fotoğraf seçiciyi Jetpack Compose (önerilir) veya Görünümler'i kullanarak entegre edebilirsiniz.

Jetpack Compose entegrasyonu

EmbeddedPhotoPicker composable işlevi, yerleştirilmiş fotoğraf seçici kullanıcı arayüzünü doğrudan Jetpack 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, çalışması için birkaç parametreyle birlikte arayan uygulamaya iletir:

val coroutineScope = rememberCoroutineScope()
val pickerState = rememberEmbeddedPhotoPickerState()

EmbeddedPhotoPicker(
    state = pickerState,
    onUriPermissionGranted = { uris ->
        _attachments.value += uris
    },
    onUriPermissionRevoked = { uris ->
        _attachments.value -= uris
    },
    onSelectionComplete = {
        // Hide the embedded photo picker as the user is done with the
        // photo/video selection
    },
)

Sürekli seçim

Sürekli fotoğraf seçici seçim sürecini gösteren animasyon

Yerleştirilmiş fotoğraf seçici, kullanıcıların seçiciyi kapatmadan fotoğraf kitaplığındaki öğeleri sürekli olarak seçip seçimini kaldırmasına olanak tanır. Uygulamanın kullanıcı arayüzünde seçilen ve seçimi kaldırılan öğeler, fotoğraf seçiciyle senkronize edilerek sorunsuz bir kullanıcı deneyimi sunar.

Uri öğesini deselectUri veya deselectUris yöntemini kullanarak pickerState öğesinden kaldırın. Bu işlem, yerleştirilmiş seçiciye kullanıcının uygulamanın kullanıcı arayüzünden bir öğenin seçimini kaldırdığını bildirir. Bu yöntemleri çağırmak, onUriPermissionRevoked geri çağırma işlevi aracılığıyla uygulamanızı yeni iptal edilen URI'ler hakkında bilgilendirmediğinden kendi uygulama kullanıcı arayüzü durumunuzu manuel olarak güncellemeniz gerekir.

coroutineScope.launch {
    // Signal unselected media to the picker
    pickerState.deselectUris(uris)
    // Remove them from the list of selected media to be reflected in the app's UI
    _attachments.value -= uris
}

Fotoğraf seçiciyi kişiselleştirme

Yerleştirilmiş fotoğraf seçici, kişiselleştirme seçenekleri sunar. Bu sayede, görünümünü ve davranışını uygulamanızın tasarımı ve kullanıcı deneyimiyle daha iyi entegre olacak şekilde ayarlayabilirsiniz.

Vurgu rengi

Varsayılan olarak, yerleştirilmiş fotoğraf seçici, kullanıcının cihaz temalandırma seçeneklerinde uygulamalar arasında ayarlayabileceği sistem tarafından sağlanan dinamik renkleri kullanır. Vurgu rengi, fotoğraf seçicideki çeşitli birincil öğeler için kullanılır. Diğer tüm renkler, Android Materyal kurallarına göre ayarlanır. Seçicinin vurgu rengini kişiselleştirmek için EmbeddedPhotoPickerFeatureInfo seçeneğini tanımlayın:

val info = EmbeddedPhotoPickerFeatureInfo.Builder().setAccentColor(0xFF0000).build()

EmbeddedPhotoPicker(
    embeddedPhotoPickerFeatureInfo = info,
    ...
)
Vurgu rengi ayarlanmadan Vurgu rengiyle (en yüksek) Vurgu rengiyle (genişletilmiş)
Vurgu rengi ayarlanmamışken fotoğraf seçicinin ekran görüntüsü Vurgu rengiyle fotoğraf seçicinin ekran görüntüsü (en yüksek) Vurgu rengiyle fotoğraf seçici ekran görüntüsü (genişletilmiş)

Vurgu rengi tamamen opak olmalıdır. Alfa (şeffaflık) değeri yok sayılır. Yalnızca parlaklık değeri 0,05 ile 0,9 arasında olan renklere izin verilir.

Boyutlar

Varsayılan olarak, yerleştirilmiş seçicinin boyutu sınırlı değildir ancak bunu sınırlamak için bir değiştirici belirtebilirsiniz:

EmbeddedPhotoPicker(
    modifier = Modifier.height(500.dp),
    ...
)
Sınırsız (genişletilmiş) 500 dp sınırı ile (genişletilmiş)
Fotoğraf seçici ekran görüntüsü Fotoğraf seçici ekran görüntüsü

Görüntüleme entegrasyonu

Görünümleri kullanarak yerleştirilmiş fotoğraf seçici eklemek için düzen dosyanıza bir giriş ekleyin:

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

Ardından, etkinliğinizin onCreate yönteminde fotoğraf seçiciyi başlatmak için aşağıdakileri yapın:

  1. Düzenden EmbeddedPhotoPickerView cihazınızın referansını alma
  2. Seçim etkinliklerini işlemek için EmbeddedPhotoPickerStateChangeListener öğesini ekleyin.
  3. Fotoğraf seçiciyi EmbeddedPhotoPickerFeatureInfo ile yapılandırın. Vurgu rengi gibi özel ayarlar da dahil edilebilir.
// Keep track of the selected media
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) {
        // Keep reference to the session to notify the embedded picker of user
        // interactions on the calling app
        openSession = newSession
    }

    override fun onSessionError(throwable: Throwable) {}

    override fun onUriPermissionGranted(uris: List<Uri>) {
        // Add newly selected media to our tracked list
        _attachments += uris
    }

    override fun onUriPermissionRevoked(uris: List<Uri>) {
        // Remove newly unselected media from our tracked list
        _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)
    picker = findViewById(R.id.photopicker)

    // Attach the embedded picker event listener to update the app's UI
    picker.addEmbeddedPhotoPickerStateChangeListener(pickerListener)

    // Customize embedded picker's features: accent color, max selectable items,
    // pre-selected URIs, filter out mime types
    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 kullanarak arama yapabilirsiniz:

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