Bir composable, işlev tarafından tanımlanır ve @Composable ile ek açıklama olarak belirtilir:
@Composable fun SimpleComposable() { Text("Hello World") }
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() }
@Preview ek açıklaması, Android Studio'ya bu derlenebilir öğenin bu dosyanın tasarım görünümünde gösterilmesi gerektiğini bildirir. Düzenlemelerinizi yaparken, derlenebilir önizlemenizde yapılan canlı güncellemeleri görebilirsiniz.
Android Studio'nun @Preview öğesini oluşturma şeklini özelleştirmek için kodunuza manuel olarak parametreler ekleyebilirsiniz. Hatta @Preview ek açıklamasını da aynı
farklı özelliklere sahip bir composable'ı önizlemek için birden fazla kez çalışır.
@Preview bileşenlerini kullanmanın başlıca avantajlarından biri, Android Studio'daki emülatöre bağımlı olmaktan kaçınmaktır. Daha fazla son görünüm ve his değişikliği yapmak için emülatörde bellek açısından ağır olan başlatma işlemini kaydedebilir ve @Preview'ın küçük kod değişikliklerini kolayca yapıp test etme özelliğinden yararlanabilirsiniz.
@Preview ek açıklamalarından en iyi şekilde yararlanmak için ekranlarınızı, giriş olarak aldığı durum ve yayınladığı etkinlikler açısından tanımladığınızdan emin olun.
@Preview tanımlayın
Android Studio, birleştirilebilir ö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ı olarak değişir.
Boyutlar
Varsayılan olarak, içeriğini sarmalamak için @Preview boyutları otomatik olarak seçilir.
Boyutları manuel olarak ayarlamak için heightDp ve widthDp parametrelerini ekleyin. Bu değerler zaten dp olarak yorumlandığından bunlara .dp eklemeniz gerekmez:
@Preview(widthDp = 50, heightDp = 50) @Composable fun SquareComposablePreview() { Box(Modifier.background(Color.Yellow)) { Text("Hello World") } }
Dinamik renk önizlemesi
Uygulamanızda dinamik rengi etkinleştirdiyseniz duvar kağıdını değiştirmek ve kullanıcı arayüzünüzün farklı kullanıcıların seçtiği duvar kağıdına nasıl tepki verdiğini görmek için wallpaper özelliğini kullanın. Farklı duvar kağıdı temaları arasından seçim yapın
sunan
Wallpaper
sınıfını kullanır. Bu özellik için Compose 1.4.0 veya üzeri sürümler gereklidir.
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, her parametrenin değerlerini ayarlayabilirsiniz.
Otomatik tamamlamada, listeden herhangi bir cihaz seçeneğini belirleyebilirsiniz. Örneğin,
@Preview(device = "id:pixel_4") Alternatif olarak, her parametrenin değerlerini ayrı ayrı ayarlamak için spec:width=px,height=px,dpi=int…'ü seçerek özel bir cihaz girebilirsiniz.
Uygulamak için Enter tuşuna basın veya Esc tuşuyla 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 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)) }
Arka plan rengini ayarla
Birleştirilebilir öğeniz varsayılan olarak şeffaf bir arka planla gösterilir. Arka plan eklemek için showBackground ve backgroundColor parametrelerini ekleyin. backgroundColor değerinin Color değeri değil, ARGB Long olduğunu unutmayın:
@Preview(showBackground = true, backgroundColor = 0xFF00FF00) @Composable fun WithGreenBackground() { Text("Hello World") }
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") }
kullanıcı arayüzü modu
uiMode parametresi, Configuration.UI_* sabitlerinden herhangi birini alabilir ve önizlemenin 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
Birleştirilebilir öğenin önizlemede (denetlenebilir bir bileşenin içinde) oluşturulup oluşturulmadığını görmek için LocalInspectionMode
CompositionLocal değerini okuyabilirsiniz. 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 sayede sınırlamaları da aşabilirsiniz. Ö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!") } }
@Preview ile etkileşim kurun
Android Studio, tanımladığınız önizlemelerle etkileşim kurmanıza olanak tanıyan özellikler sunar. Bu etkileşim, önizlemelerinizin çalışma zamanındaki davranışını anlamanıza yardımcı olur ve önizlemelerle kullanıcı arayüzünüzde daha iyi gezinmenize olanak tanır.
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 edilmişse (diğer önizlemelerden izole edilmişse), 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
Belirli bir @Preview'yi bir emülatörde veya fiziksel cihazda çalıştırabilirsiniz. Önizleme, yeni bir Activity olarak aynı proje uygulamasında dağıtılır. Bu nedenle, aynı bağlamı ve izinleri paylaşır. İzin zaten verilmişse izin isteyen standart kod yazmanıza gerek yoktur.
Ö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.
@Preview oluşturma işlemini kopyalama
Oluşturulan her önizleme, sağ tıklanarak resim olarak kopyalanabilir.
Aynı @Preview ek açıklamanın birden fazla ö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 ve sonraki sürümlerde, @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark ve @PreviewDynamicColors olmak üzere çoklu önizleme API şablonları kullanıma sunulmuştur. Böylece tek bir ek açıklamayla, Oluştur kullanıcı arayüzünüzü yaygın senaryolarda önizleyebilirsiniz.
Ö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, bu notu kullanarak her bir kompozisyon için bu tanımları tekrarlamadan birden fazla cihazı, yazı tipi boyutunu veya temayı aynı anda önizleyebilirsiniz.
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
Önizleme kompozisyonlarınız için bu özel ek açıklamayı kullanabilirsiniz:
@FontScalePreviews @Composable fun HelloWorldPreview() { Text("Hello World") }
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, her çoklu önizleme ek açıklama bağımsız olarak ç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)) } } }
Çoklu önizlemenin ve normal önizlemenin bir arada kullanılabilmesi, daha büyük ölçekli projelerin birçok özelliğini daha kapsamlı bir şekilde test etmenizi sağlar.
@Preview ve büyük veri kümeleri
Genellikle, birleştirilebilir önizlemenize büyük bir veri kümesi iletmeniz gerekir. Bunu yapmak için @PreviewParameter ek açıklamalı bir parametre ekleyerek örnek verileri bir Kompozit Önizleme işlevine iletin.
@Preview @Composable fun UserProfilePreview( @PreviewParameter(UserPreviewParameterProvider::class) user: User ) { UserProfile(user) }
Ö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") ) }
Bu işlem, sıradaki 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ırlayın.
@Preview @Composable fun UserProfilePreview2( @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User ) { UserProfile(user) }
Sınırlılıklar ve en iyi uygulamalar
Android Studio, önizleme kodunu doğrudan önizleme alanında yürütür. Android çerçevesinin Layoutlib adlı taşınmış bir kısmından yararlandığı için emülatör veya fiziksel cihaz çalıştırmayı gerektirmez. 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ı
ContextAPI'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'ünüz bağımlılık ekleme işlemine katılıyorsa (ör. Hilt ile) önizleme sistemi, ViewModel'ü oluşturmak için bağımlılık grafiğinin tamamını oluşturamaz.
Bir composable'ı ViewModel ile önizlemeye çalıştığınızda Android Studio
hatası oluştu:
ViewModel kullanan bir derlenebilir öğeyi önizlemek istiyorsanız derlenebilir öğenin bağımsız değişkenleri olarak ViewModel'teki parametrelerin aktarıldığı başka bir derlenebilir öğe oluşturmanız gerekir. Bu sayede, ViewModel kullanan derlenebilir öğeyi önizlemeniz gerekmez.
@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ı
Önizlemenizi özelleştirirken ayarlanabilen parametrelerin tam listesini görmek için Android Studio'da dilediğiniz zaman @Preview ek açıklamasını "ctrl veya ⌘ + tıklayabilirsiniz".
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, )
Ek kaynaklar
Android Studio'nun @Preview kullanım kolaylığını nasıl artırdığı hakkında daha fazla bilgi edinmek ve daha fazla araç ipucu öğrenmek için Compose Tooling bloguna göz atın.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- CompositionLocal ile yerel kapsamlı veriler
- E-posta Yazma'da Materyal Tasarım 2
- Compose'da Görünümleri kullanma