Kayan işlem düğmesi

Kayan İşlem Düğmesi (FAB), kullanıcının uygulamada birincil işlem gerçekleştirmesini sağlayan 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ına sabitlenmiş tek bir odaklı işlemi teşvik eder.

FAB kullanabileceğiniz şu üç 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 ekleme: Bir sohbet uygulamasında FAB, kullanıcının sohbete birini eklemesine olanak tanıyan bir arayüz açabilir.
  • Ortaya konum: Bir harita arayüzünde, bir FAB, haritayı kullanıcının geçerli konumuna göre ortalayabilir.

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 bir simgeden daha fazlasını içeren kayan bir 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

Materyal Tasarım ile tutarlı olan kayan işlem düğmeleri oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da, bunların parametreleri arasında büyük fark yoktur. 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 kayan işlem düğmesi oluşturmak için temel FloatingActionButton composable'ı kullanın. Aşağıdaki örnekte, bir FAB'nin 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öşeye, gölgeye ve "ekle" simgesine sahip standart bir kayan işlem düğmesi.
Ş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'ı kullanın. Aşağıdaki örnekte, özel renkler ekleyerek bunu nasıl yapacağınız 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 daha büyük bir düğme sağlaması dışında, diğer örneklerden önemli ölçüde farklı değil.

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 composable ile daha karmaşık kayan işlem düğmeleri oluşturabilirsiniz. Bu ile FloatingActionButton arasındaki temel fark, özel icon ve text parametreleri olmasıdır. Bu sayede, daha karmaşık içeriğe sahip olan ve içeriğine uygun şekilde ölçeklenen bir düğme oluşturabilirsiniz.

Aşağıdaki snippet, icon ve text için iletilmiş örnek değerlerle ExtendedFloatingActionButton yöntemini nasıl uygulayacağınızı göstermektedir.

@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" yazılı bir metin ve bir düzenleme simgesi görüntüleyen ExtendedKayingActionButton uygulaması.
Şekil 5. Hem metin hem de simge içeren kayan bir işlem düğmesi.

Ek kaynaklar