Kayan işlem düğmesi (FAB) oluşturma

Kayan işlem düğmesi (FAB), kullanıcının bir uygulamada birincil işlem yapmasını sağlayan, yüksek öneme sahip bir düğmedir. Kullanıcının izleyebileceği en yaygın yol olan tek ve odaklanmış bir işlemi teşvik eder ve genellikle ekranın sağ alt kısmına sabitlenir.

FAB'ı kullanabileceğiniz üç kullanım alanını göz önünde bulundurun:

• Yeni öğe oluşturma: Not alma uygulamasında, hızlıca yeni bir not oluşturmak için FAB kullanılabilir.
• Yeni kişi ekle: Bir sohbet uygulamasında FAB, kullanıcının bir kişiyi ileti dizisine eklemesine olanak tanıyan bir arayüz açabilir.
• Konumu ortalayın: Bir FAB, harita arayüzünde haritayı kullanıcının mevcut konumunun ortasına getirebilir.

Materyal Tasarım'da dört tür FAB vardır:

• FAB: Normal boyutlu bir kayan işlem düğmesi.
• Küçük FAB: Daha küçük bir kayan işlem düğmesi.
• Büyük FAB: Daha büyük bir kayan işlem düğmesi.
• Genişletilmiş FAB: Yalnızca bir simge değil, daha fazlasını içeren kayan işlem düğmesi.

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

  implementation platform('androidx.compose:compose-bom:2025.01.01')

Temel bir kayan işlem düğmesi oluşturma

Genel bir kayan işlem düğmesi oluşturmak için temel FloatingActionButton bileşenini kullanın:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Sonuç

Küçük bir kayan işlem düğmesi oluşturma

Küçük bir yüzen işlem düğmesi oluşturmak için SmallFloatingActionButton bileşenini kullanın. Aşağıdaki örnekte, özel renkler eklenerek bunun nasıl yapılacağı gösterilmektedir.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

Sonuç

Büyük bir kayan işlem düğmesi oluşturma

Büyük bir yüzen işlem düğmesi oluşturmak için LargeFloatingActionButton bileşenini kullanın. Bu kompozisyon, daha büyük bir düğme oluşturması dışında diğer örneklerden önemli ölçüde farklı değildir.

Aşağıda, büyük bir FAB'ın basit bir uygulaması gösterilmektedir.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Sonuç

Genişletilmiş kayan işlem düğmesi oluşturma

ExtendedFloatingActionButton bileşeni ile daha karmaşık kayan işlem düğmeleri oluşturabilirsiniz. Bu işlev ile FloatingActionButton arasındaki temel fark, özel icon ve text parametrelerine sahip olmasıdır. Bu öğeler, içeriğine uygun şekilde ölçeklendirilen daha karmaşık içeriklere sahip bir düğme oluşturmanıza olanak tanır.

Aşağıdaki snippet'te, icon ve text için örnek değerler geçirilerek ExtendedFloatingActionButton işlevinin nasıl uygulanacağı gösterilmektedir.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

Sonuç

Önemli noktalar

Material Design'a uygun kayan işlem düğmeleri oluşturmak için kullanabileceğiniz birkaç bileşen olsa da bu bileşenlerin parametreleri birbirinden çok farklı değildir. Aklınızda tutmanız gereken önemli parametreler şunlardır:

• onClick: Kullanıcı düğmeye bastığında çağrılan işlev.
• containerColor: Düğmenin rengi.
• contentColor: Simgenin rengi.

z## Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Etkileşimli bileşenleri görüntüleme

Birleştirilebilir işlevlerin, Materyal Tasarım tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenleri oluşturmanızı nasıl kolaylaştırabileceğini öğrenin.

Hızlı rehber koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.

SSS'ye gidin Geri bildirim gönderin