Android Compose 시작하기

hjseo-dev·2022년 8월 24일

Android

목록 보기

17/18

📍 Android JetPack Compose

시작은.. 간단하게 compose 기본 ui를 만들어보았다!
먼저 MainActivity의 onCreate 안에 있는 기본적인 구성이다.

setContent는 xml과 같은 역할로, 앱의 큰 틀을 만들어준다.
Greeting 을 통해 내부 화면 구성을 그리도록 되어있다. Surface는 화면 크기와 배경색 등 테마를 바꿔줄 수 있다.

 setContent {  // xml
            ComposeBasicTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }

이제 Greeting을 구성해 보았다.

💡 Scaffold

Scaffold는 기본 material 디자인 레이아웃 구조를 구현하는 레이아웃이다. TopBar, BottomBar, FAB 또는 서랍과 같은 항목을 추가할 수 있습니다.

아래 문서에 따라 앱바와 floating버튼을 추가하는 코드이다.

참고문서
https://foso.github.io/Jetpack-Compose-Playground/material/scaffold/

@Composable
fun Greeting(name: String) {
    Scaffold(topBar = { // material 디자인 삽입 (앱바, 플로팅버튼)
        TopAppBar(
            title = { Text("테스트앱") },
            backgroundColor = Color(0xfff25287)
        )
    },floatingActionButtonPosition = FabPosition.End,
        floatingActionButton = { FloatingActionButton(onClick = {}){
            Text("click")
        } }
    ) {
       // Text(text = "안녕하세용 $name!")
        MyComposableView()
    }
}

Scaffold 안에 또 다른 @Composable 만들어 추가
간단하게 텍스트를 여러줄로 출력하는 코드이다.

@Composable
fun MyComposableView(){
    Log.d("tag","myComposableView : ")
    //vertical linearlayout
    Column (
        Modifier
            .background(Color.Green)
            .verticalScroll(rememberScrollState())  // 스크롤 가능
            ){
        for (i in 1..20){
            MyRowItem()
        }
    }
}

MyRowItem으로 텍스트를 만들고 Colum 안에서 for 문으로 여러개 호출한다.
Row 와 Colum은 각각 horizental / vertical 리니어 레이아웃과 같기 때문에
잘 섞어서 사용하도록 한다.