[JETPACK Compose] Column() 함수 내부 인자 테스트

Column() 함수

  개요

  : 자식 요소를 열 단위(수직 or 세로)로 배치시 사용합니다.

   A layout composable that places its children in a vertical sequence.

 

 

  함수 정의

 

 

목차

• Column() 함수
  •   개요
  •   함수 정의
• 함수 인자 테스트
  •   modifier
    •   .width ()  ,  .height() 사용하기
    •   .weight()
    •   .padding  
    •   .wrapContentWidth() , .wrapContentHeight() , .wrapContentSize()
    •   .fillMaxWidth() , .fillMaxHeight() , .fillMaxSize()
    •   .drawBehind
    •   .verticalScroll
  •   verticalArrangement 
  •   horizontalAlignment
• <기타 >
  •   안드로이드 다큐먼트 링크

 

 

함수 인자 테스트

  modifier

  .width ()  ,  .height() 사용하기

 

Row{
   Column(
        modifier = Modifier
            .width(100.dp)
            .height(200.dp)
            .background(Color.Green)
            .border(BorderStroke(3.dp, Color.Blue), CircleShape)
            .padding(20.dp),
    ) {
        Text("1st col")
        Text("2nd col")
        Text("3rd col")
    }
    Column(
        modifier = Modifier
            .width(250.dp)
            .height(300.dp)
            .background(Color.Yellow)
            .border(BorderStroke(3.dp, Color.Blue), CutCornerShape(10.dp))
            .padding(20.dp),
    ) {
        Text("4th col")
        Text("5th col")
        Text("6th col")
    }
}

  : Row scope 안에 Column 두개를 만들고 width와 height 를 적용해 봤습니다.

위상태에서 RowScope를 Surface 로 감싸면 다음과 같습니다.

Surface (color = Color.LightGray){
    Row {
       ......  // 위의 소스와 동일
    }
}

  ==> LightGray 부분이 Surface 에 의해서 그려지고 그위에 Row ==> Column() 2개가 그려짐.

 

 

 

  .weight()

    :width가 아닌 상대적인 크기로 배치시 사용합니다.

     2개의 Column을 반으로 나누기 ( .weight(0.5f)

Surface (color = Color.LightGray){
    Row {
       Column(
            modifier = Modifier
                .weight(0.5f)
                .height(200.dp)
                .background(Color.Green)
                .border(BorderStroke(3.dp, Color.Blue), CircleShape)
                .padding(20.dp),
        ) {
            Text("1st col")
            Text("2nd col")
            Text("3rd col")
        }
        Column(
            modifier = Modifier
                .weight(0.5f)
                .height(300.dp)
                .background(Color.Yellow)
                .border(BorderStroke(3.dp, Color.Blue), CutCornerShape(10.dp))
                .padding(20.dp),
        ) {
            Text("4th col")
            Text("5th col")
            Text("6th col")
        }
   }
}

 

  2개의 colmn을 3:7 로 나누기  (weight(0.3f) && weight(0.7f)  또는  weight(3f) && weight(7f)  

Surface (color = Color.LightGray){
    Row {
       Column(
            modifier = Modifier
                .weight(0.3f)
                .height(200.dp)
                .background(Color.Green)
                .border(BorderStroke(3.dp, Color.Blue), CircleShape)
                .padding(20.dp),
        ) {
            Text("1st col")
            Text("2nd col")
            Text("3rd col")
        }
        Column(
            modifier = Modifier
                .weight(0.7f)
                .height(300.dp)
                .background(Color.Yellow)
                .border(BorderStroke(3.dp, Color.Blue), CutCornerShape(10.dp))
                .padding(20.dp),
        ) {
            Text("4th col")
            Text("5th col")
            Text("6th col")
        }
   }
}

==> 2군데 이상 사용해야 의미가 있습니다.

 

  .padding  

     : 상하 좌우의 여백넣기

Row {
   Column(
        modifier = Modifier
            .wrapContentHeight()
            .wrapContentWidth()
            .background(Color.Green)
            .padding(start=5.dp,top=10.dp,end=10.dp, bottom = 5.dp),
    ) {
        Text("1st col")
        Text("2nd col")
        Text("3rd col")
    }
}

 

start=5.dp,top=10.dp,end=10.dp, bottom = 5.dp

 

 

  .wrapContentWidth() , .wrapContentHeight() , .wrapContentSize()

    : 텍스트 길이에 사이즈 맞추기

 

==> 미적용상태 소스코드

Column(
    modifier = Modifier
        .height(200.dp)
        .width(200.dp)
        .background(Color.Green)
        .border(BorderStroke(3.dp, Color.Blue), RectangleShape)
        .padding(30.dp)
) {
    Text("1st col")
    Text("2nd col")
    Text("3rd col")
}

 

.wrapContentHeight() 적용

.wrapContentHeight()    //   Alignment.CenterVertically 적용

 

.wrapContentHeight(align= Alignment.Top)

.wrapContentHeight(align= Alignment.Bottom)

 

 .wrapContentWidth() 적용

 

.wrapContentWidth()   // Alignment.CenterHorizontally

 

.wrapContentWidth(align=Alignment.Start)

 

.wrapContentWidth(align=Alignment.End)

 

 .wrapContentSize() 적용

.wrapContentSize()

 

 

  .fillMaxWidth() , .fillMaxHeight() , .fillMaxSize()

  : .width() && .height() 제거후 테스트

.fillMaxHeight()

 

.fillMaxHeight(fraction = 0.5f)   // 최대 높이의 0.5크기

 

.fillMaxWidth()

 

 

.fillMaxSize()

 

 

  .drawBehind

.drawBehind {
    this.drawLine(Color.Red, Offset(0f,0f) , Offset(50f,50f) )
    this.drawRect(Color.Yellow,Offset(70f,70f), Size(50f,50f))
}

 

  .verticalScroll

   :  상/하 스크롤이 verticalScroll 미적용시 disable 되어 있습니다. 스크롤시 참고하세요.

     LazyColumn() 의 경우 default 로 verticalScroll 이 동작합니다.

@Composable
fun ColumnTest(){
	val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .verticalScroll(scrollState)
    ){
        for(i in 1..30) {
            Text(text = "Hello $i")
        }
    }
}

 

 

  verticalArrangement 

   : 세로측 위/아래 정렬 설정

verticalArrangement=Arrangement.Top,

 

verticalArrangement=Arrangement.Bottom,

  horizontalAlignment

  : 가로측 좌우 정렬 설정

horizontalAlignment = Alignment.Start,

 

horizontalAlignment = Alignment.End,

 

<기타 >

  안드로이드 다큐먼트 링크

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)

androidx.compose.foundation.layout  |  Android Developers

 

 

 

 

보완중입니다.

추가요청 사항이나 잘못된 부분 있으면 댓글 부탁드려요.

 

그럼 수고하세요.