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 bir simgesini tıklayın.
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. 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
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.") } }
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.](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?authuser=0000&hl=tr)
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.") } }
Bu uygulama aşağıdaki gibi görünür:
!['add' öğesi içeren bir SmallfloatingActionButton uygulaması simgesini tıklayın.](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?authuser=0000&hl=tr)
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") } }
Bu uygulama aşağıdaki gibi görünür:
!['add' değeri içeren LargefloatingActionButton uygulaması simgesini tıklayın.](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?authuser=0000&hl=tr)
Genişletilmiş düğme
Daha karmaşık kayan işlem düğmeleri için
ExtendedFloatingActionButton
composable. 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") }, ) }
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.](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?authuser=0000&hl=tr)