Kayan işlem düğmesi

Kayan işlem düğmesi (FAB), kullanıcının bir uygulamada birincil işlem gerçekleştirmesine olanak tanıyan, yüksek vurgulu 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 sabitlenmiş olarak bulunur.

FAB kullanabileceğiniz şu üç kullanım alanını inceleyin:

  • Yeni öğe oluşturma: Not alma uygulamasında FAB, hızlıca yeni not oluşturmak için kullanılabilir.
  • Yeni kişi ekleme: Bir sohbet uygulamasında FAB, kullanıcının görüşmeye birini eklemesine olanak tanıyan bir arayüz açabilir.
  • Konumu ortalama: Harita arayüzünde FAB, haritayı kullanıcının mevcut konumuna ortalayabilir.

Materyal Tasarım'da dört tür FAB vardır:

  • FAB: Normal boyutta 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çermeyen kayan işlem düğmesi.
Dört kayan işlem düğmesi bileşeninin her birine örnek.
Şekil 1. Dört kayan işlem düğmesi türü.

API yüzeyi

Materyal Tasarım ile tutarlı kayan işlem düğmeleri oluşturmak için kullanabileceğiniz çeşitli composable'lar olsa da parametreleri çok farklı değildir. Aklınızda bulundurmanız gereken temel parametrelerden bazıları şunlardır:

  • onClick: Kullanıcı düğmeye bastığında çağrılan işlev.
  • containerColor: Düğmenin rengi.
  • 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'nin temel bir 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:

Yuvarlak köşeli, gölgeli ve "ekle" simgeli standart bir kayan işlem düğmesi.
Şekil 2. Kayan işlem düğmesi.

Küçük düğme

Küçük bir kayan işlem düğmesi oluşturmak için SmallFloatingActionButton composable'ını 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:

"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'ını kullanın. Bu composable, 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 FAB'nin 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:

"Ekle" simgesi içeren bir 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. FloatingActionButton ile arasındaki temel fark, özel icon ve text parametrelerine sahip olmasıdır. Bu sayede, içeriğine uygun şekilde ölçeklenen daha karmaşık içerikli bir düğme oluşturabilirsiniz.

Aşağıdaki snippet'te, icon ve text için örnek değerler ile ExtendedFloatingActionButton'nin 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:

"Genişletilmiş düğme" metnini ve düzenleme simgesini gösteren bir ExtendedFloatingActionButton uygulaması.
Şekil 5. Hem metin hem de simge içeren kayan işlem düğmesi.

Ek kaynaklar