Kayan işlem düğmesi

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 şu üç kullanım alanını göz önünde bulundurun:

  • 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.
Dört kayan işlem düğmesi bileşeninin her birine ait örnek.
1. Şekil. Dört kayan işlem düğmesi türü.

API yüzeyi

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.

Kayan işlem düğmesi

Genel bir kayan işlem düğmesi oluşturmak için temel FloatingActionButton composable'ını kullanın. Aşağıdaki örnekte, bir kayan işlem düğmesinin temel uygulaması gösterilmektedir:

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

Bu uygulama aşağıdaki gibi görünür:

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

Küçük düğme

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

Bu uygulama aşağıdaki gibi görünür:

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

Büyük düğme

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

Bu uygulama aşağıdaki gibi görünür:

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

Genişletilmiş düğme

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çerikli bir düğme 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

Bu uygulama aşağıdaki gibi görünür:

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

Ek kaynaklar