[jetpack compose] 1. Box

 

1. Activity의 setCompose에서 MaterialTheme를 지정한 함수 안에 Surface로 자식 View를 지정한다.

2. Surface는 화면의 최상위 View로 Container 역할을 한다.

 

setContent()에서 MaterialTheme View 설정

 

Theme(QuickComposeTutorailTheme) 설정함수

 

---

modifier는 대부분의 View에서 사용되며 View의 속성을 지정할 때 사용된다.

 

3. Box는 Surface와 비슷한 Container View이다. 그리고 modifier의 메소드를 통해서 

• padding(dp) <- 패딩설정
• fillMaxWidth() <- width를 최대
• fillMaxHeight() <- height를 최대
• background(Color값) <-배경색

등을 설정할 수 있다. 

 

 

4. Box의 경우, Child View에서 Modifier.align을 지정하여 상단(Top), 중단(Center), 하단(Bottom)을 기준으로 처음(Start), 중앙(Center), 끝(End)를 지정할 수 있다. 

 

 

 

예제화면

 

전체소스

package com.psw.quick.compose.ui.activity

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.psw.quick.compose.ui.theme.QuickComposeTutorialTheme

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

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

    @Composable
    fun ExampleMain(
    ) {

        Box(modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.Cyan)) {

            Box(modifier = Modifier
                .padding(20.dp)
                .fillMaxWidth()
                .fillMaxHeight()
                .background(Color.Red)) {

                Box(modifier = Modifier
                    .padding(30.dp)
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .background(Color.White)) {

                    Text("😀", modifier = Modifier.align(Alignment.TopStart))
                    Text("😀", modifier = Modifier.align(Alignment.TopCenter))
                    Text("😀", modifier = Modifier.align(Alignment.TopEnd))
                    Text("🐯", modifier = Modifier.align(Alignment.Center), fontSize = 90.sp)
                    Text("😀", modifier = Modifier.align(Alignment.BottomStart))
                    Text("😀", modifier = Modifier.align(Alignment.BottomCenter))
                    Text("😀", modifier = Modifier.align(Alignment.BottomEnd))

                }

            }

        }

    }
}

 

---

[github]

GitHub - VintageAppMaker/QuickComposeTutorial: Jetpack compose QuickStart