İpucu

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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

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

API yüzeyi

Uygulamanızda ipuçları uygulamak için TooltipBox bileşenini kullanabilirsiniz. TooltipBox görünümünü aşağıdaki ana parametrelerle kontrol edersiniz:

• positionProvider: İpucunu ana içeriğe göre yerleştirir. Genellikle TooltipDefaults'ten varsayılan bir konum sağlayıcı kullanırsınız veya özel konumlandırma mantığına ihtiyacınız varsa kendi sağlayıcınızı sağlayabilirsiniz.
• tooltip: İpucu içeriğini içeren derlenebilir öğe. Genellikle PlainTooltip veya RichTooltip bileşenlerini kullanırsınız.
  • Simge düğmelerinin öğelerini veya işlemlerini açıklamak için PlainTooltip simgesini kullanın.
  • Bir özelliğin değerini açıklamak gibi daha fazla ayrıntı sağlamak için RichTooltip simgesini kullanın. Zengin ipuçları isteğe bağlı bir 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 tutucusu.
• content: İpucu metninin sabitlendiği birleştirilebilir içerik.

Basit bir araç ipucu gösterme

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

@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 basit bir ipucu oluşturur.
  • TooltipDefaults.rememberPlainTooltipPositionProvider(), düz ipuçları için varsayılan konumlandırma sağlar.
  • tooltip, PlainTooltip bileşenini kullanarak ipucu içeriğini tanımlayan bir lambda işlevidir.
  • Text(plainTooltipText), ipucun içindeki metni gösterir.
  • tooltipState, ipucu durumunu kontrol eder.
• IconButton, simge içeren tıklanabilir bir düğme oluşturur.
  • Icon(...), düğmenin içinde kalp simgesi gösterir.
  • Kullanıcı IconButton ile etkileşime geçtiğinde "Favorilere ekle" metninin yer aldığı ipucu gösterilir. Kullanıcılar, cihaza bağlı olarak ipucu metnini aşağıdaki yöntemlerle tetikleyebilir:
  • İmleci simgenin üzerine getirmek
  • Mobil cihazda simgeye uzun basma

Sonuç

Bu örnekte, simgenin üzerinde düz bir ipucu gösterilmektedir:

Zengin bir ipucu görüntüleme

Bir kullanıcı arayüzü öğesiyle ilgili ek bağlam sağlamak için zengin ipucu kullanın. Bu örnekte, bir Icon öğesine sabitlenmiş bir başlık içeren çok satırlı zengin bir ipucu oluşturulur:

@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 dinleyicilerini işler ve TooltipState'ı buna göre günceller. TooltipState, ipucunun gösterilmesi gerektiğini belirttiğinde ipucu lambdası yürütülür ve RichTooltip gösterilir. TooltipBox, hem içerik hem de ipucu için ankraj 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ğinin herhangi bir yerinde uzun basıldığında (dokunmatik cihazlarda) veya fareyle üzerine gelindiğinde (fare işaretçisiyle olduğu gibi) daha fazla bilgi gösteren ipucu görüntülenir.
• RichTooltip bileşeni, başlık ve gövde metni dahil olmak üzere ipucu içeriğini tanımlar. TooltipDefaults.rememberRichTooltipPositionProvider(), zengin ipuçları için konumlandırma bilgilerini sağlar.

Sonuç

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

Zengin ipucu özelleştirme

Bu kod snippet'inde, bir kamera simgesi düğmesinin üzerinde başlık, özel işlemler ve özel bir ok (ok) bulunan zengin bir ipucu gösterilmektedir:

@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)
                        }
                    }
                },
                caretSize = DpSize(32.dp, 16.dp)
            ) {
                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 fareyle ToolTipBoxiçeriğin üzerine gelerek etkinleştirilen ipucu yaklaşık bir saniye boyunca gösterilir. Ekranın başka bir yerine dokunarak veya kapatma işlem düğmesini kullanarak bu ipucunu kapatabilirsiniz.
• Kapatma işlemi yürütüldüğünde tooltipState.dismiss çağrısı yapmak için bir coroutine başlatılır. Bu sayede, ipucu gösterilirken işlemin yürütülmesi engellenmez.
• onClick = coroutineScope.launch { tooltipState.show() } }, tooltipState.show kullanarak ipucu metnini manuel olarak göstermek için bir coroutine başlatır.
• action parametresi, ipucu öğesine etkileşimli öğeler (ör. düğme) eklemenize olanak tanır.
• caretSize parametresi, ipucu oku boyutunu değiştirir.

Sonuç

Bu örnekte aşağıdakiler elde edilir:

Ek kaynaklar

• Materyal Tasarım: İpucu