Oluşturulabilir önizlemelerle kullanıcı arayüzünüzü önizleme

Bir composable, işlev tarafından tanımlanır ve @Composable ile ek açıklama olarak belirtilir:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

Bu composable'ın önizlemesini etkinleştirmek için, @Composable ve @Preview ile. Bu yeni, ek açıklamalı composable artık başlangıçta oluşturduğunuz composable, SimpleComposable:

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

@Preview ek açıklaması, Android Studio'ya bu composable, bu dosyanın tasarım görünümünde gösterilmelidir. Canlı arama sonuçları güncellemelerinizi composable önizlemenizde görebilirsiniz.

Android Studio'nun kullanılma şeklini özelleştirmek için parametreleri kodunuza manuel olarak ekleyebilirsiniz @Preview oluşturur. Hatta @Preview ek açıklamasını da aynı farklı özelliklere sahip bir composable'ı önizlemek için birden fazla kez çalışır.

@Preview composable'ı kullanmanın temel avantajlarından biri, güvenilir olmaması . Bellek açısından yoğun şekilde başlatılan emülatörü, son görünüm ve izlenim değişiklikleri ve @Preview ve küçük kod değişikliklerini kolayca test edebilirsiniz.

@Preview ek açıklamasından en etkili şekilde yararlanmak için giriş olarak aldığı durum ve bu sayfa için sağlanan etkinlikler açısından çıktı.

@Preview tanımlayın

Android Studio, composable önizlemeleri genişletmek için bazı özellikler sunar. Şunları yapabilirsiniz: tasarımlarını değiştirebilir, onlarla etkileşime girebilir veya doğrudan bir veya cihaza bağlı olabilir.

Boyutlar

Varsayılan olarak @Preview boyutları, içeriğinin sarmalanması için otomatik olarak seçilir. Boyutları manuel olarak ayarlamak için heightDp ve widthDp parametrelerini ekleyin. Bu değerler zaten dp olarak yorumlandığı için .dp eklemeniz gerekmez alıcı:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}
AndroidStudioComposeSnippets.kt

Dinamik renk önizlemesi

Dinamik Arama Ağı'nı etkinleştirdiyseniz renk ekleyebilirsiniz. duvar kağıtlarını değiştirmek ve kullanıcı arayüzünüzün nasıl tepki verdiğini görmek için wallpaper özelliğini kullanın. farklı kullanıcılara duvar kağıdını kullandığınızdan emin olun. Farklı duvar kağıdı temaları arasından seçim yapın sunan Wallpaper sınıfını kullanır. Bu özellik Compose 1.4.0 veya sonraki sürümünü gerektirir.

Farklı cihazlarla kullanma

Android Studio Flamingo'da, Önizlemenin device parametresini düzenleyebilirsiniz ek açıklaması sunar.

Cihaz parametresinde boş bir dize (@Preview(device = "")) olduğunda şunları yapabilirsiniz: Ctrl + Space tuşlarına basarak otomatik tamamlamayı çağırın. Ardından, bu değerleri her parametreden oluşur.

Otomatik tamamlamada, listeden herhangi bir cihaz seçeneğini belirleyebilirsiniz. Örneğin, @Preview(device = "id:pixel_4") Alternatif olarak, özel bir cihaz da girebilirsiniz bağımsız değerleri ayarlamak için spec:width=px,height=px,dpi=int…'yi seçerek her parametreye dahil edilir.

Uygulamak için Enter tuşuna basın veya Esc ile iptal edin.

Geçersiz bir değer ayarlarsanız bildirimin altı kırmızıyla çizilir ve bir düzeltme kullanılabilir (Alt + Enter (⌥OS for macOS için ⌥ + ⌥) > Değiştir .... İnceleme, girişinize en yakın olan düzeltmeyi sağlamaya çalışır.

Yerel ayar

Farklı kullanıcı yerel ayarlarını test etmek için locale parametresini ekleyin:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greeting))
}
AndroidStudioComposeSnippets.kt

Arka plan rengini ayarla

Varsayılan olarak, composable'ınız şeffaf bir arka planla görüntülenir. Bir showBackground ve backgroundColor parametrelerini ekleyin. Şurada sakla: backgroundColor öğesinin bir Color değil, ARGB Long olduğunu unutmayın değer:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

Sistem Arayüzü

Bir önizlemenin içinde durumu ve işlem çubuklarını görüntülemeniz gerekiyorsa showSystemUi parametresi:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

kullanıcı arayüzü modu

uiMode parametresi, Configuration.UI_* parametrelerinden herhangi birini alabilir sabit değerleri içerir ve önizleme davranışını buna göre değiştirmenize olanak tanır. Örneğin, Örneğin, temanın nasıl tepki verdiğini görmek için önizlemeyi Gece Modu'na ayarlayabilirsiniz.

LocalInspectionMode

LocalInspectionMode üzerinden okuyabilirsiniz CompositionLocal, composable'ın önizlemede oluşturulup oluşturulmadığını ( incelenemez bileşen). Beste oluşturulursa önizlemede LocalInspectionMode.current, true olarak değerlendirilir. Bu önizlemenizi özelleştirmenize olanak sağlar; Mesela projenin hedeflerine önizleme penceresinde gerçek verileri göstermek yerine yer tutucu resim kullanabilirsiniz.

Bu şekilde sınırlamaları da çözebilirsiniz. Örneğin, örneğin, ağ isteği yerine örnek veri gösterme.

@Composable
fun GreetingScreen(name: String) {
    if (LocalInspectionMode.current) {
        // Show this text in a preview window:
        Text("Hello preview user!")
    } else {
        // Show this text in the app:
        Text("Hello $name!")
    }
}
AndroidStudioComposeSnippets.kt

@Preview ile etkileşim kurun

Android Studio, tanımladığınız verilerle etkileşime geçmenizi sağlayan önizlemeler. Bu etkileşim, önizlemelerinizin çalışma zamanı davranışı ve önizlemeler sayesinde kullanıcı arayüzünüzde daha iyi gezinmenizi sağlar.

Etkileşimli mod

Etkileşimli mod, her zamanki gibi önizlemeyle etkileşim kurmanıza olanak tanır. programınızı çalıştıran bir cihazda (ör. telefon veya tablet) kullanabilirsiniz. Etkileşimli mod korumalı alan ortamında izole (yani diğer önizlemelerden izole), Burada öğeleri tıklayabilir ve önizlemede kullanıcı girişi girebilirsiniz. Çok hızlı bir şekilde farklı durumları, hareketleri, hatta composable'ınızın animasyonlarını test etmenin bir yolunu sunar.

Kodda gezinme ve composable ana hatlar

İmleci bir önizlemenin üzerine getirerek, içerdiği composable'ların ana hatlarını görebilirsiniz emin olmanız gerekir. Oluşturulabilir bir ana hat tıklandığında, gezinme için düzenleyici görünümü tetiklenir tanımlayacağım.

Önizlemeyi çalıştır

Bir emülatörde veya fiziksel cihazda belirli bir @Preview çalıştırabilirsiniz. İlgili içeriği oluşturmak için kullanılan Önizleme, yeni bir Activity ile aynı proje uygulaması içinde dağıtılır. Bu nedenle aynı bağlamı ve izinleri paylaşır. Etiketleme için İzin verilip verilmediğini soran ortak kod.

Önizlemeyi Çalıştır simgesini tıklayın. önizlemenin üst kısmında veya @Preview ek açıklamasının üstüne veya Android'e Studio, bu @Preview öğesini bağlı cihazınıza veya emülatörünüze dağıtır.

Oluşturulan @Preview değerini kopyala

Oluşturulan her önizleme, sağ tıklanarak resim olarak kopyalanabilir.

Aynı @Preview ek açıklamasının birden çok önizlemesi

Aynı @Preview composable'ın birden fazla composable'ını kullanarak, veya composable'a iletilen bir farklı parametre ekleyebilirsiniz. Bu bu şekilde, aksi halde yazmanız gereken standart kodu azaltabilirsiniz.

Çoklu önizleme şablonları

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ Çoklu önizleme sürümü kullanıma sunuldu API şablonları: @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark, ve @PreviewDynamicColors. Böylece tek bir ek açıklamayla, Sık karşılaşılan senaryolarda Compose kullanıcı arayüzünüzü önizleyin.

Özel çoklu önizleme ek açıklamaları oluşturma

Çoklu önizleme ile, birden fazla ek açıklama sınıfı tanımlayabilirsiniz. Farklı yapılandırmalara sahip @Preview ek açıklama. Bu ek açıklama şuraya ekleniyor: bir composable işlev, tüm farklı önizlemeleri otomatik olarak bir kez. Örneğin, birden fazla cihazı, yazı tipini ve yazı tipini önizlemek için Aynı anda farklı boyutlar ya da temalara sahip tek composable.

Kendi özel ek açıklama sınıfınızı oluşturarak başlayın:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews
AndroidStudioComposeSnippets.kt

Önizleme composable'larınız için bu özel ek açıklamayı kullanabilirsiniz:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

Birden çok çoklu önizleme ek açıklamasını ve normal önizleme ek açıklamasını birleştirebilirsiniz kullanarak daha kapsamlı bir önizleme grubu oluşturabilirsiniz. Çoklu önizleme ek açıklamalarını birleştirme tüm farklı kombinasyonların gösterileceği anlamına gelmez. Bunun yerine çoklu önizleme ek açıklaması bağımsız çalışır ve yalnızca kendi varyantlarını oluşturur.

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

Çoklu önizleme (ve normal önizleme) sayesinde, birden fazla önizlemeyi birlikte kullanabilirsiniz. kapsamlı testler yapmanıza yardımcı olur.

@Preview ve büyük veri kümeleri

Genellikle, composable’ınıza büyük bir veri kümesi aktarmanız gereken bir ihtiyaç ortaya çıkar önizle. Bunu yapmak için örnek veriyi bir Oluşturulabilir Önizleme işlevine iletmek için @PreviewParameter ile bir parametre ekleyerek ek açıklaması da yer alır.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

Örnek veri sağlamak için şunu uygulayan bir sınıf oluşturun: PreviewParameterProvider ve şunu döndürür: örnek verilerini sıralayabilirsiniz.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

Bu işlem, dizideki her veri öğesi için bir önizleme oluşturur:

Birden fazla önizleme için aynı sağlayıcı sınıfını kullanabilirsiniz. Gerekirse "limit" parametresini ayarlayarak önizleme sayısını sınırlandırabilirsiniz.

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

Sınırlamalar ve en iyi uygulamalar

Android Studio, önizleme kodunu doğrudan önizleme alanında yürütür. Gelmiyor veya fiziksel bir cihaz kullanıyorsanız Android çerçevesinin Layoutlib adlı bir parçası. Layoutlib bir özeldir Android cihazların dışında çalışacak şekilde tasarlanmış Android çerçevesinin sürümü İlgili içeriği oluşturmak için kullanılan kitaplığın amacı, Android Studio'da düzenin önizlemesini sunmaktır. cihazlarda oluşturulmasına çok yakındır.

Önizleme sınırlamaları

Önizlemelerin Android Studio'da oluşturulma biçimi nedeniyle hafiftir ve bunları oluşturmak için tüm Android çerçevesinin kullanılmasını gerektirmez. Ancak, bu durum aşağıdaki sınırlamalara tabidir:

• Ağ erişimi yok
• Dosya erişimi yok
• Bazı Context API'leri tam olarak kullanılamayabilir

Önizlemeler ve ViewModels

ViewModel kullanılırken önizlemeler sınırlıdır composable'dan bahsetmek istiyorum. Önizleme sistemi, önizleme sisteminden gelen ViewModel öğesine iletilen parametreler (kod depoları, kullanım alanları, yöneticiler ve kullanabilirsiniz. Ayrıca, ViewModel uygulamanız bağımlılık yerleştirmeye katılırsa ( önizleme sistemi, Hilt gibi) bağımlılığın tamamını ViewModel oluşturma grafiğini kullanabilirsiniz.

Bir composable'ı ViewModel ile önizlemeye çalıştığınızda Android Studio hatası oluştu:

ViewModel kullanan bir composable'ı önizlemek istiyorsanız ViewModel parametresindeki parametrelerle başka bir composable, composable. Bu şekilde, ViewModel

@Composable
fun AuthorColumn(viewModel: AuthorViewModel = viewModel()) {
  AuthorColumn(
    name = viewModel.authorName,
    // ViewModel sends the network requests and makes posts available as a state
    posts = viewModel.posts
  )
}

@Preview
@Composable
fun AuthorScreenPreview(
  // You can use some sample data to preview your composable without the need to construct the ViewModel
  name: String = sampleAuthor.name,
  posts: List<Post> = samplePosts[sampleAuthor]
) {
  AuthorColumn(...) {
    name = NameLabel(name),
    posts = PostsList(posts)
  }
}

@Preview ek açıklama sınıfı

İstediğiniz zaman 'ctrl' veya ⌘ + tıklama'yı kullanabilirsiniz Android'de @Preview ek açıklaması Studio'da, önizle.

annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    val widthDp: Int = -1,
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT,
    @Wallpaper val wallpaper: Int = Wallpapers.NONE,
)
AndroidStudioComposeSnippets.kt

Ek kaynaklar

Android Studio'nun @Preview kullanım kolaylığını nasıl sunduğu hakkında daha fazla bilgi edinmek ve Araç kullanımıyla ilgili daha fazla ipucu için Oluştur Araçlar.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• CompositionLocal ile yerel kapsamlı veriler
• Compose'da Materyal Tasarım 2
• Compose'da Görünümleri kullanma