[Android Kotlin] Compose (1-1 Ex1~2) Row, Column, Box

1. 예제

(1) OneWeekFirstEx1

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

@Preview
@Composable
fun UserGuidePopupPreview(){
    UserGuidePopup()
}

@Composable
fun UserGuidePopup(){
    Row()
    {
        Button(onClick = { /*TODO*/ },
            modifier = Modifier.weight(1f)) {
            Text(text = "취소")
        }
        Button(onClick = { /*TODO*/ },
            modifier = Modifier.weight(2f)) {
            Text(text = "확인")
        }
    }
}

 

(2) OneWeekFirstEx2

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

@Preview
@Composable
fun SignInScreenPreview(){
    SignInScreen()
}

@Composable
fun SignInScreen(){
    Column(modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "One Market",
            fontSize = 28.sp,
            fontWeight = FontWeight.Bold
            )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "로그인")
        }
    }
    
}

• Compose의 기본 구조
• 기존(Java, Kotlin) "AppCompatActivity"를 상속-> Compose(Kotlin) "ComponentActivity"를 상속 
• @Composable을 사용하여 메서드를 뷰에 등록
• @Composable에 @Preview를 사용하면 실시간 변경사항을 미리 View에서 볼 수 있다

 

2. Row, Column, Box

 

(1) Row - horizontalArrangement 속성

• horizontalArrangement = Arrangement.Start
• horizontalArrangement = Arrangement.End
• horizontalArrangement = Arrangement.Center
• horizontalArrangement = Arrangement.SpaceBetween
• horizontalArrangement = Arrangement.SpaceAround
• horizontalArrangement = Arrangement.SpaceEvenly

 

(2) Row - verticalAlignment  속성

• verticalAlignment = Alignment.Top
  요소를 상단에 정렬
• verticalAlignment = Alignment.Bottom
  요소를 하단에 정렬
• verticalAlignment = Alignment.CenterVertically
  요소를 수직으로 가운데에 정렬
• verticalAlignment = Alignment.Baseline
  요소의 텍스트 기준선을 맞춰 정렬, 이 속성은 주로 텍스트 요소를 정렬하는 데 사용
• verticalAlignment = Alignment.FirstBaseline
  첫 번째 요소의 기준선을 맞춰 정렬, 첫 번째 요소는 텍스트 요소일 필요는 없다.
• verticalAlignment = Alignment.LastBaseline
  마지막 요소의 기준선을 맞춰 정렬, 마지막 요소는 텍스트 요소일 필요는 없다.
• verticalAlignment = Alignment.Center
  요소를 수직으로 가운데에 정렬, CenterVertically와 동일한 역할
• verticalAlignment = Alignment.TopBaseline
  요소를 상단에 정렬, 텍스트 기준선을 맞춘다.
• verticalAlignment = Alignment.BottomBaseline
  요소를 하단에 정렬, 텍스트 기준선을 맞춘다.

 

(3) Column - verticalArrangement 속성

• verticalArrangement = Arrangement.Top
• verticalArrangement = Arrangement.Bottom
• verticalArrangement = Arrangement.Center
• verticalArrangement = Arrangement.SpaceBetween
• verticalArrangement = Arrangement.SpaceAround
• verticalArrangement = Arrangement.SpaceEvenly

 

(4) Column - horizontalAlignment 속성

• horizontalAlignment = Alignment.Start
  요소들을 시작점(왼쪽)에 정렬
• horizontalAlignment = Alignment.CenterHorizontally
  요소들을 수평으로 가운데에 정렬
• horizontalAlignment = Alignment.End
  요소들을 끝점(오른쪽)에 정렬
• horizontalAlignment = Alignment.Top
  요소들을 상단에 정렬
• horizontalAlignment = Alignment.CenterVertically
  요소들을 수직으로 가운데에 정렬
• horizontalAlignment = Alignment.Bottom
  요소들을 하단에 정렬

 

(5) Box

FrameLayout과 비슷한 개념으로 이미지를 겹쳐 만들 수 있게 사용하고 절대적인 위치를 지정한다.

@Composable
fun Box(){
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .width(50.dp)
                .height(50.dp)
                .background(Color.Blue),
            contentAlignment = Alignment.Center
        ) {
            Text("Blue", color = Color.White)
        }
    }
}