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 ş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 ekle: Bir sohbet uygulamasında FAB, kullanıcının bir kişiyi ileti dizisine 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: 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

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. 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 temel FloatingActionButton composable'ı kullanın. Aşağıdaki örnekte, FAB'ın temel uygulaması gösterilmektedir:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
         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 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() },
        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'ı kullanın. 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'ın basit bir uygulaması gösterilmektedir.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
         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() },
        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 bir kayan işlem düğmesi.

Ek kaynaklar