Kayan işlem düğmesi

Kayan İşlem Düğmesi (FAB), kullanıcının bir uygulamadaki birincil işlemi gerçekleştirmesine olanak tanıyan, yüksek vurgulu bir düğmedir. Kullanıcının izleyebileceği en yaygın yol olan ve genellikle ekranın sağ alt kısmında bulunan tek ve odaklı bir işlemi teşvik eder.

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

  • Yeni öğe oluştur: Not alma uygulamasında hızlı bir şekilde yeni bir not oluşturmak için FAB kullanılabilir.
  • Yeni kişi ekleme: Sohbet uygulamasında FAB, kullanıcının görüşmeye kişi eklemesine izin veren bir arayüz açabilir.
  • Merkezi konum: Bir harita arayüzünde, FAB haritayı kullanıcının mevcut konumuna ortalayabilir.

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

  • FAB: Normal boyutta 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: Bir simgeden daha fazlasını içeren kayan bir işlem düğmesi.
Dört kayan işlem düğmesi bileşeninin her birine bir örnek.
Şekil 1. Dört kayan işlem düğmesi türü.

API yüzeyi

Materyal Tasarım ile tutarlı olarak kayan işlem düğmeleri oluşturmak için kullanabileceğiniz birkaç composable olsa da, bunların parametreleri büyük ölçüde farklılık göstermez. Unutmamanız gereken temel parametreler ş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 kayan işlem düğmesi oluşturmak için temel FloatingActionButton composable'ı kullanın. Aşağıdaki örnekte, bir 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öşeli standart kayan işlem düğmesi, gölge ve "ekle" simgesi.
Ş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'ı kullanın. Aşağıdaki örnekte, özel renklerin eklenmesiyle 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 bir SmallFloatingActionButton uygulaması.
Şekil 3. 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'ı kullanın. Bu composable, ortaya çıkan daha büyük bir düğme olması dışında, diğer örneklerden çok 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 composable ile daha karmaşık kayan işlem düğmeleri oluşturabilirsiniz. Bu parametre ile FloatingActionButton arasındaki temel fark, özel icon ve text parametrelerine sahip olmasıdır. Bunlar, içeriğin uygun şekilde sığması için ölçeklendirilen daha karmaşık içeriğe sahip bir düğme oluşturmanıza olanak tanır.

Aşağıdaki snippet, icon ve text için iletilen örnek değerlerle ExtendedFloatingActionButton özelliğinin nasıl uygulanacağını gösterir.

@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 düzenleme simgesini gösteren bir ExtendedFloatingActionButton uygulaması.
Şekil 5. Hem metin hem de simge içeren bir kayan işlem düğmesi.

Ek kaynaklar