İpucu

Bir düğmeye veya başka bir kullanıcı arayüzü öğesine bağlam eklemek için ipuçlarını kullanın. İki tür ipucu vardır:

• Düz ipuçları: Simge düğmelerinin öğelerini veya işlemlerini açıklar.
• Zengin ipuçları: Bir özelliğin değeri gibi daha fazla ayrıntı sağlar. İsteğe bağlı olarak başlık, bağlantı ve düğmeler de içerebilir.

API yüzeyi

Uygulamanızda ipuçları uygulamak için TooltipBox composable'ı kullanabilirsiniz. TooltipBox görünümünü şu ana parametrelerle kontrol edebilirsiniz:

• positionProvider: İpucunu, sabit içerikle ilişkili olarak yerleştirir. Genellikle TooltipDefaults içindeki varsayılan bir konum sağlayıcıyı kullanırsınız veya özel konumlandırma mantığına ihtiyacınız varsa kendi konum sağlayıcınızı kullanabilirsiniz.
• tooltip: İpucunun içeriğini barındıran composable. Genellikle PlainTooltip veya RichTooltip bileşenlerini kullanırsınız.
  • Simge düğmelerinin öğelerini veya işlemlerini açıklamak için PlainTooltip özelliğini kullanın.
  • Bir özelliğin değerini açıklamak gibi daha fazla ayrıntı sağlamak için RichTooltip kullanın. Zengin ipuçları isteğe bağlı başlık, bağlantı ve düğmeler içerebilir.
• state: Bu ipucu için kullanıcı arayüzü mantığını ve öğe durumunu içeren durum bilgisi depolayıcı.
• content: İpucunun sabitlendiği composable içerik.

Düz bir ipucu gösterin

Bir kullanıcı arayüzü öğesini kısaca açıklamak için düz bir ipucu kullanın. Bu kod snippet'i, "Favorilere ekle" etiketli bir simge düğmesinin üzerinde düz bir ipucu gösterir:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Kodla ilgili önemli noktalar

• TooltipBox, "Favorilere ekle" metnini içeren bir ipucu oluşturur.
  • TooltipDefaults.rememberPlainTooltipPositionProvider(), düz ipuçları için varsayılan konumlandırma sağlar.
  • tooltip, PlainTooltip composable'ını kullanarak ipucunun içeriğini tanımlayan bir lambda işlevidir.
  • Text(plainTooltipText), ipucundaki metni gösterir.
  • tooltipState, ipucunun durumunu kontrol eder.
• IconButton, simge içeren tıklanabilir bir düğme oluşturur.
  • Icon(...), düğmenin içinde bir kalp simgesi gösterir.
  • Kullanıcı IconButton ile etkileşimde bulunduğunda TooltipBox, "Favorilere ekle" metnini içeren ipucunu gösterir. Kullanıcılar, cihaza bağlı olarak ipucunu aşağıdaki şekillerde tetikleyebilir:
  • İmleçle simgenin üzerine gelme
  • Mobil cihazda simgeye uzun basarak

Sonuç

Bu örnek, bir simgenin üzerinde düz bir ipucu oluşturur:

Zengin ipucu gösterme

Bir kullanıcı arayüzü öğesi hakkında ek bağlam sağlamak için zengin ipucu kullanın. Bu örnekte, Icon öğesine sabitlenmiş başlığı olan çok satırlı bir zengin ipucu oluşturulmaktadır:

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Kodla ilgili önemli noktalar

• TooltipBox, kullanıcı etkileşimleri için etkinlik işleyicileri yönetir ve TooltipState'yi buna göre günceller. TooltipState, ipucunun gösterilmesi gerektiğini belirttiğinde ipucu lambda'sı yürütülür ve TooltipBox, RichTooltip öğesini gösterir. TooltipBox, hem içerik hem de ipucu için sabitleyici ve kapsayıcı görevi görür.
  • Bu durumda içerik, dokunulabilir işlem davranışını sağlayan bir IconButton bileşenidir. TooltipBox içeriğinde herhangi bir yere uzun süre basıldığında (dokunmatik cihazlarda) veya fareyle üzerine gelindiğinde (fare işaretçisiyle) daha fazla bilgi gösteren ipucu görüntülenir.
• RichTooltip composable'ı, başlık ve gövde metni de dahil olmak üzere ipucunun içeriğini tanımlar. TooltipDefaults.rememberRichTooltipPositionProvider(), zengin ipuçları için konumlandırma bilgileri sağlar.

Sonuç

Bu örnekte, bilgi simgesine eklenmiş başlığı olan zengin bir ipucu oluşturulur:

Zengin ipucunu özelleştirme

Bu kod snippet'i, başlık, özel işlemler ve kamera simgesi düğmesinin üstünde özel bir imleç (ok) içeren zengin bir ipucu gösterir:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Kodla ilgili önemli noktalar

• RichTooltip, başlık ve kapatma işlemi içeren bir ipucu gösterir.
• Uzun basarak veya fare işaretçisini TooltipBox içeriğinin üzerine getirerek etkinleştirildiğinde ipucu yaklaşık bir saniye boyunca gösterilir. Bu ipucunu kapatmak için ekranda başka bir yere dokunabilir veya kapatma işlem düğmesini kullanabilirsiniz.
• Kapatma işlemi yürütüldüğünde sistem, tooltipState.dismiss işlevini çağırmak için bir eş yordam başlatır. Bu, ipucu gösterilirken işlem yürütmenin engellenmediğini doğrular.
• onClick = coroutineScope.launch { tooltipState.show() } }, tooltipState.show kullanarak ipucunu manuel olarak göstermek için bir eş yordam başlatır.
• action parametresi, ipucuna düğme gibi etkileşimli öğeler eklenmesine olanak tanır.
• caretSize parametresi, ipucunun okunun boyutunu değiştirir.

Sonuç

Bu örnekte aşağıdaki sonuç elde edilir:

Ek kaynaklar

• Materyal Tasarım: İpuçları