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

Kayan işlem düğmesi (FAB), kullanıcının bir uygulamada birincil işlem gerçekleştirmesine olanak tanıyan, yüksek vurgulu bir düğmedir. Kullanıcının izleyebileceği en yaygın yol olan tek ve odaklanmış bir işlemi teşvik eder. Genellikle ekranın sağ alt kısmına sabitlenmiş olarak bulunur.

FAB kullanabileceğiniz üç kullanım alanını inceleyelim:

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

Materyal Tasarım'da dört tür kayan işlem düğmesi vardır:

  • FAB: Normal boyutta bir kayan işlem düğmesi.
  • Küçük KİD: Daha küçük bir kayan işlem düğmesi.
  • Büyük KİD: Daha büyük bir kayan işlem düğmesi.
  • Genişletilmiş FAB: Yalnızca simge içermeyen bir kayan işlem düğmesi.

Sürüm uyumluluğu

Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya daha yüksek bir düzeye ayarlanmasını gerektirir.

Bağımlılıklar

Kotlin

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

Groovy

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

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

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

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

Sonuç

Yuvarlak köşeli, gölgeli ve "ekle" simgeli standart bir kayan işlem düğmesi.
1. şekil. Kayan işlem düğmesi.

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

Küçük bir kayan işlem düğmesi oluşturmak için SmallFloatingActionButton composable'ını kullanın. Aşağıdaki örnekte, özel renkler eklenerek bu işlemin 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ç

"Ekle" simgesi içeren bir SmallFloatingActionButton uygulaması.
Şekil 2. Küçük bir kayan işlem düğmesi.

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

Büyük bir kayan işlem düğmesi oluşturmak için LargeFloatingActionButton composable'ını kullanın. Bu composable, daha büyük bir düğmeyle sonuçlanması dışında diğer örneklerden önemli ölçüde farklı değildir.

Aşağıda, büyük bir kayan işlem düğmesinin basit bir uygulaması verilmiştir.

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

Sonuç

"Ekle" simgesi içeren bir LargeFloatingActionButton uygulaması.
3.şekil Büyük bir kayan işlem düğmesi.

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

ExtendedFloatingActionButton composable'ı ile daha karmaşık kayan işlem düğmeleri oluşturabilirsiniz. Bu işlev ile FloatingActionButton arasındaki temel fark, bu işlevin özel icon ve text parametrelerine sahip olmasıdır. Bu düğmeler, içeriğine uygun şekilde ölçeklenen daha karmaşık içeriklere sahip düğmeler oluşturmanıza olanak tanır.

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

@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ç

"Genişletilmiş düğme" metnini ve bir düzenleme simgesini gösteren ExtendedFloatingActionButton uygulaması.
4.şekil Hem metin hem de simge içeren bir kayan işlem düğmesi.

Önemli noktalar

Material Design'a uygun kayan işlem düğmeleri oluşturmak için kullanabileceğiniz birkaç composable olsa da parametreleri çok farklı değildir. Aklınızda bulundurmanız gereken önemli parametrelerden bazıları ş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 kapsamlı Android geliştirme hedeflerini ele alan şu seçilmiş Hızlı Kılavuz koleksiyonlarının bir parçasıdır:

Composable işlevlerin, Materyal Tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenlerini kolayca oluşturmanıza nasıl olanak tanıyabileceğini öğrenin.
Hızlı kılavuz koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek hızlı kılavuzlar hakkında bilgi edinebilir veya düşüncelerinizi bize iletebilirsiniz.
SSS'ye git Geri bildirim gönder