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 kullanabileceğiniz şu üç 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 ekleme: Sohbet uygulamasında bir FAB; aşağıdaki işlemler için bir arayüz açabilir: kullanıcı sohbete ekleyebiliyor.
  • 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

Kayma işlemi oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da düğmelerinden hemen sonra, parametrelerin arasında çok fazla fark yoktur. 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 kayan işlem düğmesi oluşturmak için FloatingActionButton composable. 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 kayan işlem düğmesi oluşturmak için SmallFloatingActionButton composable. Aşağıdaki örnekte, ekleyerek bunu nasıl yapacağınızı öğrenebilirsiniz.

@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 composable, en büyük farklardan biri, aslında diğer örneklerden daha büyük bir düğme sağlar.

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:

'add' değeri içeren LargefloatingActionButton uygulaması simgesini tıklayın.
Ş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" yazan bir metin gösteren ExtendedfloatingActionButton uygulaması ve düzenle simgesini tıklayın.
Şekil 5. Hem metin hem de simge içeren kayan bir işlem düğmesi.

Ek kaynaklar