Kayan işlem düğmesi

Kayan işlem düğmesi (FAB), kullanıcının bir uygulamada birincil bir işlem gerçekleştirmesine olanak tanıyan, 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 simge içeren bir kayan işlem düğmesi.
Dört kayan işlem düğmesi bileşeninin her biri için bir örnek.
Şekil 1. 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ç bileşen olsa da bu bileşenlerin parametreleri birbirinden çok farklı değildir. Göz önünde bulundurmanız gereken önemli parametreler şunlardır:

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

Kayan işlem düğmesi

Genel bir yüzen işlem düğmesi oluşturmak için temel FloatingActionButton bileşenini kullanın. Aşağıdaki örnekte, FAB'ın 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:

Yuvarlatılmış köşeleri, gölgesi ve "ekle" simgesi olan standart bir kayan işlem düğmesi.
Şekil 2. Kayan işlem düğmesi.

Küçük düğme

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

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

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

Büyük düğme

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

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

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

Genişletilmiş düğme

ExtendedFloatingActionButton bileşeni ile daha karmaşık kayan işlem düğmeleri oluşturabilirsiniz. Bu yöntem 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

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

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

Ek kaynaklar