Kayan işlem düğmesi

Kayan İşlem Düğmesi (FAB), kullanıcının bir tıklama gerçekleştirmesini uygulamada birincil işlem gerçekleştirme. Belirli bir konuya odaklanan tek bir işlemi teşvik eder kullanıcının izleyebileceği en yaygın yoldur ve genellikle ekranın sağ alt kısmına sabitlenir.

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

  • Yeni öğe oluşturma: Not alma uygulamasında hızlı bir şekilde ilerlemek için FAB kullanılabilir. yeni bir not oluşturun.
  • 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 merkeze alma: Bir harita arayüzünde, FAB, haritayı Konumu Google'a gönderir.

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

  • FAB: Sıradan 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şenine ö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. Unutmamanız gereken önemli parametreler arasında şunlar vardı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, bir FAB'nin temel uygulaması:

@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öşeye, gölgeye ve "ekle"ye sahip standart bir kayan işlem düğmesi simgesini tıklayın.
Şekil 2. Kayan bir 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 kayan işlem düğmesi oluşturmak için LargeFloatingActionButton composable. Bu derleme, 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'nin basit bir şekilde uygulanması 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 yüzen işlem düğmeleri oluşturabilirsiniz. Aradaki temel fark FloatingActionButton ise özel icon ve text değerine sahip parametreleridir. Ölçeklenen daha karmaşık içeriğe sahip bir düğme oluşturmanıza olanak tanır uygun hale getirmesini sağlar.

Aşağıdaki snippet, ExtendedFloatingActionButton (icon ve için iletilmiş örnek değerlerle birlikte) text.

@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 kayan bir işlem düğmesi.

Ek kaynaklar