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 üç 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.
- Konumu ortalayın: Bir FAB, harita arayüzünde haritayı kullanıcının mevcut konumunun ortasına getirebilir.
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.
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. 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 yüzen işlem düğmesi oluşturmak için temel FloatingActionButton bileşenini kullanın. Aşağıdaki örnekte, FAB'ın temel uygulaması gösterilmektedir:
@Composable
fun Example(onClick: () -> Unit) {
FloatingActionButton(
onClick = { onClick() },
) {
Icon(Icons.Filled.Add, "Floating action button.")
}
}
Bu uygulama aşağıdaki gibi görünür:
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.")
}
}
Bu uygulama aşağıdaki gibi görünür:
Büyük düğme
Büyük bir yüzen işlem düğmesi oluşturmak için LargeFloatingActionButton bileşenini kullanın. Bu kompozisyon, 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 = { onClick() },
shape = CircleShape,
) {
Icon(Icons.Filled.Add, "Large floating action button")
}
}
Bu uygulama aşağıdaki gibi görünür:
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 = { onClick() },
icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
text = { Text(text = "Extended FAB") },
)
}
Bu uygulama aşağıdaki gibi görünür:
