연습: Compose 기본 사항

1 ) 

MainActivity.kt

package com.example.learntogether

import android.os.Bundle
import android.text.style.TextAppearanceSpan
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.learntogether.ui.theme.LearnTogetherTheme
import org.w3c.dom.Text
import kotlin.text.Typography.less

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LearnTogetherTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ){

                    LearnTogether(
                        txt1 = stringResource(R.string.txt1)
                    ,txt2 = stringResource(R.string.txt2)
                        ,txt3 = stringResource(R.string.txt3)
                    )


                }

            }
        }
    }
}
@Composable
fun LearnTogether(txt1: String, txt2: String, txt3:String) {
    val image = painterResource(R.drawable.bg_compose_background)
    Column {
    Image(
        painter = image,
        contentDescription = null,
        modifier = Modifier.fillMaxWidth()
    ) //Image


    Text(
        text = txt1 ,
        fontSize = 24.sp,
        modifier = Modifier
            .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
    )
    Text(
        text = txt2,
        modifier = Modifier
            .padding(start = 16.dp, end = 16.dp),
        textAlign = TextAlign.Justify
    )
        Text(
            text = txt3,
            modifier = Modifier
                .padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 16.dp),
            textAlign = TextAlign.Justify


        )
}
} //LearnTogether


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    LearnTogetherTheme {
        LearnTogether(
            txt1 = stringResource(R.string.txt1),
            txt2 = stringResource(R.string.txt2),
            txt3 = stringResource(R.string.txt3)
        )
    }
}

strings.xml

<resources>
    <string name="app_name">Learn Together</string>
    <string name="txt1">Jetpack Compose tutorial</string>
    <string name="txt2">Jetpack Compose is a modern toolkit for building native Android UI. Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.</string>
    <string name="txt3">In this tutorial, you build a simple UI component with declarative functions. You call Compose functions to say what elements you want and the Compose compiler does the rest. Compose is built around Composable functions. These functions let you define your app\'s UI programmatically because they let you describe how it should look and provide data dependencies, rather than focus on the process of the UI\'s construction, such as initializing an element and then attaching it to a parent. To create a Composable function, you add the @Composable annotation to the function name.</string>
</resources>

결과화면

 

2) 

q. column() 로 하면 안되고 column{ } 로 하면 되는 이유

q. box 레이아웃은 언제 쓰나? column은 열방형으로 정렬, row는 행방향으로 정렬 , 그러면 box는?

 

 

결과화면

 

여기까지는 했는데 결과화면 처럼의 여유공간을 어떻게 줘야하지

horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center 

  modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),

-> 해주면 여유공간이 생긴다.

 

@Composable
fun TaskCompleted() {
    Column( modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center){
        val image = painterResource(R.drawable.ic_task_completed)
        Image(painter = image, contentDescription =null )
        Text(
            text = stringResource(R.string.txt1),
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(top=24.dp, bottom = 8.dp)
        )
        Text(
            text= stringResource(R.string.txt2),
            fontSize = 16.sp
        )
         }
    }

3) Compose 사분면