RecycleView’ı LazyColumn’a Dönüştür – Jetpack Oluştur

Bu yeni başlayanlar için uygun öğretici, bunun nasıl dönüştürüleceğine dair bir örnek sağlar. basit RecycleView uygulaması Jetpack Oluşturmak için.

Ayrıca Jetpack Compose’a geçiş yaptıktan sonra kullanılmayan kodu veya xml’yi temizlemek için bazı ekstra adımlar atıyorum.

1. RecycleView, Layout, Fragment ve Library Dosyalarını Kaldırın

Ondan başka RecycleViewJetpack Compose’un bunlara ihtiyacı olmadığından parça ve düzen dosyalarını da kaldırabilirsiniz.

İstenmeyen kaynak kodlarını kaldırın

• MainFragment.kt
• RecyceViewAdapter.kt
• ItemViewHolder.kt
• ItemDiffCallback.kt

İstenmeyen düzen dosyalarını kaldırın

• main_activity.xml
• main_fragment.xml
• item.xml

İstenmeyen yapı özelliklerini ve kitaplıkları kaldırın

İçinde appbuild.gradlekaldırmak bağlanma verileri bu artık Jetpack Oluşturma için geçerli olmadığından.

buildFeatures {
    dataBinding true
}

Bu bağımlılıkları da kaldırın.

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.4.0'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0'
    implementation 'androidx.fragment:fragment-ktx:1.4.0'
}

MainActivity.kt’deki derleme sorununu düzeltin

içindeki bu kodu kaldır MainActivity::onCreate() çünkü artık parçaya ihtiyacınız yok.

setContentView(R.layout.main_activity)
if (savedInstanceState == null) {
    supportFragmentManager.beginTransaction()
        .replace(R.id.container, MainFragment.newInstance())
        .commitNow()
}

Şimdi başarılı bir şekilde inşa edebilmelisiniz.

2 Jetpack Oluşturma Kitaplıkları Kurulumu

build.gradle’ı güncelleyin (proje düzeyi)

Ekle compose_version içindeki uzatma buildScript{ } böylece oluşturma sürümüne daha sonra başvurulabilir.

buildscript {
    ext {
        compose_version = '1.0.5'
    }
    ...
}

appbuild.gradle’ı güncelleyin(uygulama düzeyi)

Ekle compose yapı özellikleri ve kotlinCompilerExtensionVersion seçenekleri oluşturun.

android {
    ....
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    ....
}

Yer değiştirmek implementation 'androidx.appcompat:appcompat:1.4.0' ile birlikte implementation 'androidx.activity:activity-compose:1.4.0' ve aşağıdaki Jetpack Compose bağımlılıklarını ekleyin.

dependencies {
    ...
    implementation 'androidx.activity:activity-compose:1.4.0'
    ...
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    ...
}

Oluşturmak için MainActivity’yi güncelleyin

Jetpack Compose’da ihtiyacınız yok AppCompatActivity artık, doğrudan devralabilirsiniz ComponentActivity

değiştir MainActivity doğrudan miras almak ComponentActivitygeçersiz kılar onCreate() ve Çağrı yap SetContent{} herhangi birine izin veren @composable fonksiyonlar içeriden çağrılabilir.

class MainActivity : ComponentActivity() {
    ...
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContent {
            
        }  
    }
}

3. Jetpack Oluşturmada Tema Ekleme

Jetpack Compose’a tema eklemeden önce, colors.xml ve themes.xml.

Yalnızca themes.xml renk sağlamak için android:statusBarColor. Böylece onu tutar ve başka bir şeyi kaldırırsınız.

Colours.xml ve theme.xml’yi temizleyin

Bunlar, durum çubuğu rengini özelleştirmek için gereken minimum kod olmalıdır.

renkler.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_700">#FF3700B3</color>
</resources>

temalar.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.RecycleViewDemo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    </style>
</resources>

theme.xml (gece)

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.RecycleViewDemo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    </style>
</resources>

Oluşturma Teması Ekle

Oluşturmak ui.teması paket klasörü, koyar Colors.kt, Shape.kt, Type.kt bu klasöre.

Renkler.kt

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

şekil.kt

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

Type.kt

val Typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
)

Tema.kt

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200
)

@Composable
fun RecycleViewDemoTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Bu dosyalar, temanızı Jetpack Oluşturma için özelleştirmenize olanak tanır.

Uygulamanızın teması için, MainContent() birleştirilebilir işlev RecycleViewDemoTheme. Kod şöyle görünür:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen()
        }
    }
}

@Composable
fun MainScreen() {
    RecycleViewDemoTheme {
        MainContent()
    }
}

@Composable
fun MainContent() {
    
}

4. En İyi Uygulama Çubuğu Ekle

Kaldırdığından beri AppCompatActivity, en iyi uygulama çubuğu artık oluşturulmaz. Jetpack Compose kullanarak oluşturmanız gerekir.

Scaffold() birleştirilebilir işlevi ekle

En iyi uygulama çubuğu oluşturmak için ScaffoldI() birleştirilebilir işlev. Kod şöyle görünür:

@Composable
fun MainScreen() {
    RecycleViewDemoTheme {
        Scaffold(
            topBar = { TopAppBar (title = {Text(stringResource(R.string.app_name))})
            }
        ) {
            MainContent()
        }
    }
}

Oluşturulabilir bir işlevi önizleyin

Oluşturulabilir bir işlevi önizlemek için aşağıdaki kodu eklersiniz:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainScreen()
}

Derledikten sonra, sağınızda böyle bir şey görmelisiniz. Uygulamanızı çalıştırırsanız, önizlemedekiyle aynı kullanıcı arayüzünü görmelisiniz.

Artık uygulama, Jetpack Oluşturma koduyla tamamen uygulanmaktadır. Bu noktada, UI, geri dönüşüm görünümü içeriği olmadan görünüm tabanlı UI yaklaşımıyla tamamen aynıdır.

5. LazyColumn Oluşturulabilir İşlevi Gerçekleştirin

Eşdeğer RecycleView Jetpack’te oluştur LazyColumn birleştirilebilir işlev.

Kesin konuşmak gerekirse, aynı değiller. LazyColumn öğe kullanıcı arabirimini gerçekten geri dönüştürmez. Sadece tüm öğe kullanıcı arayüzünü yeniden oluşturur. Yani teoride, RecycleView performans daha iyi olmalı LazyColumn.

hakkında iyi olan şey LazyColumn o zamandan beri daha az kod kullanıyor RecycleView çok sayıda kazan plakası koduna sahiptir. Uygulamak için kaç adım gerektiğini görün RecyceView burada:

MainViewModel oluşturun ve MainContent’e geçin

Veriler geldiği için MainViewModelile yaratırsın by viewModels devredilen mülk içinde MainActivity parametre olarak iletin MainContent() birleştirilebilir işlev.

MainActivity.kt

class MainActivity : ComponentActivity() {  
    val viewModel by viewModels<MainViewModel>()  

    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContent {  
            MainScreen(viewModel)  
        }  
    }  
}

by viewModels yeniden oluşturmamanız için kullanılır. MainViewModel örneğin ne zaman MainActivity yok edilir ve yeniden oluşturulur. Açıklamaya bakın burada.

MainScreen.kt

@Composable
fun MainScreen(viewModel: MainViewModel) {
    RecycleViewDemoTheme {
        Scaffold(
            topBar = { TopAppBar (title = {Text(stringResource(R.string.app_name))})
            }
        ) {
            MainContent(viewModel)
        }
    }
}

LiveData’yı Duruma Dönüştür

Jetpack Compose’da, LiveData<T> ile State<T> böylece veriler değiştirildiğinde veya güncellendiğinde doğru şekilde yeniden oluşturulabilir. Dönüştürmek için kullanırsınız observeAsState() LiveData işlev.

Bundan önce, bu kitaplık bağımlılığını eklemeniz gerekir:

implementation "androidx.compose.runtime:runtime-livedata:$compose_version"

dönüştürdükten sonra State<T>değeri geçtiniz (yani List<ItemData>) parametreleri olarakListContent() birleştirilebilir işlev.

@Composable
fun MainContent(viewModel: MainViewModel) {
    val itemsState = viewModel.items.observeAsState()

    itemsState.value?.let { items ->
        ListContent(items)
    }
}

LazyColumn’u uygula

Beri RecycleView öğe orijinal uygulaması tüm ekran genişliğini doldurur ve merkeze hizalanır, aynısını yapmanız gerekir. Bu aracılığıyla yapılabilir modifer ve horizontalAlignment parametreleri LazyColumn

Son parametrede LazyColumn dır-dir Alıcılı Fonksiyon Değişmezi (Lambda Fonksiyonu). bu LazyListScope alıcıdır.

Öğeleri eklemek için (ör. List<ItemData>), siz arayın LazyListSciope.items() birleştirilebilir işlev. Öğe içeriğini eklemek için şunları uygularsınız: ShowItem() sadece metni gösteren birleştirilebilir işlev.

Orijinali eşleştirmek için RecycleView uygulamada, yazı tipi boyutunu 34.sp ve FontWeight.Bold.

Kod şöyle görünür:

@Composable
fun ListContent(items: List<ItemData>) {
    LazyColumn (
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        items(items = items) { item ->
            ShowItem(item)
        }
    }
}

@Composable
fun ShowItem(item: ItemData) {
    Text(
        text = item.id.toString(),
        fontSize = 34.sp,
        fontWeight = FontWeight.Bold
    )
}

Önizlemeyi MainViewModel oluşturmayı içerecek şekilde güncelleyin

Beri MainScreen() içeri alır MainViewModel parametre olarak, onu oluşturmanız ve iletmeniz gerekir.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    val viewModel = MainViewModel()
    MainScreen(viewModel)
}

6. Bitti

Sonunda yapıldı!. Uygulama şuna benziyor, bu da uygulamayla tamamen aynı. RecycleView görünüm tabanlı UI yaklaşımı.

İsterseniz, kodu dışarı taşıyarak da yeniden düzenleyebilirsiniz. MainContent() biraz daha temiz olan ayrı bir dosyaya birleştirilebilir işlevi.

Referans