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.
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.") } }
Bu uygulama aşağıdaki gibi görünür:
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.") } }
Bu uygulama aşağıdaki gibi görünür:
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") } }
Bu uygulama aşağıdaki gibi görünür:
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") }, ) }
Bu uygulama aşağıdaki gibi görünür: