오늘의 이야기

https://medium.com/kotlin-academy/say-hello-to-jetpack-compose-and-compare-with-xml-6bc6053aec13

 

Say Hello 👋 to Jetpack Compose and Compare with XML

Introduction

blog.kotlin-academy.com

오늘도 또 하나의 글을 찾았다... Jetpack Compose 로 만드는 화면과 기존 xml 로 만드는 화면의 차이에 대한 글을 하나 찾았다.

 

xml 와 만드는 화면과 Jetpack Compose 을 비교해 보니 이해가 되는 것 같기도 하고... 아직은 갈 길이 멀어 보인다.

 

<xml layout 예제>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/txtHeader"
            style="@style/TextAppearance.MaterialComponents.Headline2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:paddingHorizontal="20dp"
            android:text="Hello Compose"
            android:textAlignment="center" />

        <ImageView
            android:id="@+id/imgSelectedAnimal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="selected animal image"
            android:paddingHorizontal="20dp"
            android:scaleType="centerCrop"
            android:layout_marginBottom="20dp"
            android:src="@drawable/ic_launcher_foreground" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginBottom="20dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/radioButtonDog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <Space
                android:layout_width="100dp"
                android:layout_height="wrap_content" />

            <RadioButton
                android:id="@+id/radioButtonCat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>

        <Button
            android:id="@+id/btnScrollToTop"
            android:layout_width="wrap_content"
            android:backgroundTint="@color/black"
            android:textColor="@color/white"
            android:text="Scroll to Top"
            android:textAllCaps="false"
            android:layout_height="wrap_content"/>

    </LinearLayout>

</ScrollView>

 

<Jetpack Compose 화면 예제>

        val scrollState = rememberScrollState()
        val scope = rememberCoroutineScope()
        var selectedAnimal by remember { mutableStateOf<Animal?>(null) }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(scrollState),
            verticalArrangement = Arrangement.spacedBy(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Hello Compose",
                style = MaterialTheme.typography.h2,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 24.dp)
            )

            Image(
                painter = painterResource(
                    id = selectedAnimal?.imageSrc ?: R.drawable.ic_launcher_foreground
                ),
                contentDescription = "selected animal image",
                modifier = Modifier
                    .fillMaxWidth(fraction = 0.75f)
                    .aspectRatio(3 / 8f),
                contentScale = ContentScale.Crop
            )

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {

                RadioButton(
                    selected = selectedAnimal is Animal.Dog,
                    onClick = { selectedAnimal = Animal.Dog },
                )

                RadioButton(
                    selected = selectedAnimal is Animal.Cat,
                    onClick = { selectedAnimal = Animal.Cat },
                )
            }

            Button(
                onClick = {
                    scope.launch {
                        scrollState.animateScrollTo(0)
                    }
                },
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = Color.Black,
                    contentColor = Color.White,
                )
            ) {
                Text(text = "Scroll to Top")
            }

            Spacer(modifier = Modifier.size(100.dp))
        }

 

이렇게 구현하는 것을 언제 쯤 이면 수월하게 할 수 있을 까 ?  잘 되는 날이 올 때 까지...

 

다시한번 글을 작성해 주신 원작자에게 감사를 드리며... 잘 읽어 보겠습니다.