[JETPACK Compose] Row() 함수

Row() 함수

  : 자식 요소를 수평으로 배치시 사용합니다.

 

 

 modifier

  .padding

   ▶ no padding 

 

  ▶ all dp 적용하기  

.padding(5.dp)   // apply 5 dp padding all of each edges (left/top/rigth/bottom)

 

 ▶ horizontal && vertical dp 적용하기

.padding(horizontal = 30.dp,vertical =10.dp)

 

  ▶ 각각의 edge별로 padding 적용하기

.padding(5.dp,10.dp,15.dp,20.dp)    // start / top / end / bottom

 

 .clickable {}

    : Rowscope 영역 click 이벤트 발생시 처리기능 추가

.clickable { Toast.makeText(this@MainActivity2,"Clicked Row",Toast.LENGTH_SHORT).show() }

 

   

   :  여러개의 리스트  중 어는 부분이 클릭 됐는지 확인 하는 방법

@Composable
fun displayBtDevice(btDevice:BluetoothDevice)
{
    val addr =btDevice.address
    val name =btDevice.name
    Row(
        modifier = Modifier
            .clickable(){
                Log.d(MainActivity.TAG,"displayBtDevice = ${btDevice.addr}")  <-- 요기
            }
        ~~ 중략 ~~
    ){
        Spacer(modifier = Modifier.size(10.dp))
        Text(name)
        Spacer(modifier = Modifier.size(50.dp))
        Text(addr)
    }
    Spacer(modifier = Modifier.size(2.dp))
}

>>>>>>>  Output  <<<<<<<<<<
D/MainActivity: displayBtDevice = C6:E6:20:C1:B4:CD
D/MainActivity: displayBtDevice = C7:61:F0:1D:17:6D

  → 각각이 객체로 생성되므로 파라미터 인자를 읽어서 처리하면 됩니다.

 

 

  .fillMaxHeight

 ▶  미적용 상태

 

 ▶  .fillMaxHeight() 적용

 

▶  .fillMaxHeight(0.5f) 적용

 

 

  .fillMaxWidth

   ▶  미적용 상태

  ▶ .fillMaxWidth() 적용

 

  ▶ .fillMaxWidth(0.7f) 적용

 

 

  .border    

 

   ▶  미적용 상태

 

.border(BorderStroke(3.dp, Color.Blue), RectangleShape)

 

.border(BorderStroke(1.dp, Color.White), CircleShape)

 

.border(BorderStroke(1.dp, Color.White), CutCornerShape(5.dp))

 

  .width() , .height()

  : fillMaxSize() 적용안됨

 

.width(300.dp).height(100.dp)

 

 

.width(300.dp).height(100.dp)
.wrapContentSize()   // <-- 추가

 

 

 

 horizontalArragement

   : 

Row(
    Modifier
        .padding(5.dp)
        .height(100.dp)
        .fillMaxWidth()
        .border(BorderStroke(3.dp, Color.Blue), RectangleShape),
    ) {
    Text("1st row", Modifier.background(Color.Red).padding(5.dp))
    Text("2nd row",Modifier.background(Color.Yellow).padding(5.dp))
    Text("3rd row",Modifier.background(Color.Green).padding(5.dp))
}

 

horizontalArrangement = Arrangement.Start

 ==> 초기 상태로 미사용시와 동일합니다. 

 

horizontalArrangement = Arrangement.Center,

 

horizontalArrangement = Arrangement.End,

 

<주의사항>

  ==> 아래처러 행이 가득차 있을경우  horizontalArragement 는 적용이 되지 않습니다.

         이 내용은 verticalAlignment 에도 동일합니다.

 

 verticalAlignment

Row(
    Modifier
        .padding(5.dp)
        .height(100.dp)
        .fillMaxWidth()
        .border(BorderStroke(3.dp, Color.Blue), RectangleShape),
) {
    Text("1st row", Modifier.weight(1f).background(Color.Red))
    Text("2nd row",Modifier.weight(1f).background(Color.Yellow))
    Text("3rd row",Modifier.weight(1f).background(Color.Green))
}

verticalAlignment = Alignment.Top,

 

verticalAlignment = Alignment.CenterVertically,

 

verticalAlignment = Alignment.Bottom,

 

 

 

<기타>

 A. 3개의 열 각각에 다른 align 적용하기

Column {
   Row(modifier= Modifier
           .padding(5.dp)
           .fillMaxHeight(0.5f)
           .border(BorderStroke(3.dp, Color.Blue), RectangleShape),
   ) {
        Text("1st row",modifier= Modifier
            .padding(3.dp)
            .background(Color.Red,)
            .align(Alignment.CenterVertically)
        )
        Text("2nd row",
            modifier= Modifier
                .padding(3.dp)
                .background(Color.Yellow,)
                .align(Alignment.Top)
       )
        Text("3rd row",modifier= Modifier
            .padding(3.dp)
            .background(Color.Green,)
            .align(Alignment.Bottom)
        )
    }
}

 

 

 

 B>  alignment , arrangement 사전적 의미

 

 

 

C> Column 안에 2개의 Row 추가 및 각 Row 에 Text() 3개 넣기

Surface (color = Color.LightGray){
   Column {
        Row(
            Modifier
                .padding(5.dp)
                .width(300.dp).height(100.dp)
                .border(BorderStroke(3.dp, Color.Blue), RectangleShape)
                .background(Color.Cyan),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically,
       ) {
            Text("1-1 row", Modifier.background(Color.Red).padding(5.dp))
            Text("1-2 row",Modifier.background(Color.Yellow).padding(5.dp))
            Text("1-3 row",Modifier.background(Color.Green).padding(5.dp))
        }
        
       Row(
           Modifier
               .padding(5.dp)
               .width(300.dp).height(100.dp)
               .border(BorderStroke(3.dp, Color.Green), RectangleShape)
               .background(Color.Gray),
           horizontalArrangement = Arrangement.Center,
           verticalAlignment = Alignment.CenterVertically,
       ) {
           Text("2-1 row", Modifier.background(Color.Red).padding(5.dp))
           Text("2-2 row",Modifier.background(Color.Yellow).padding(5.dp))
           Text("2-3 row",Modifier.background(Color.Green).padding(5.dp))
       }
   }
}

 

 

 

D> 버튼사이 간격 추가하기

 

Row(modifier = Modifier.fillMaxWidth().padding(bottom = 10.dp),
    horizontalArrangement = Arrangement.SpaceEvenly,){
    Button(
    	onClick={},
    ){
        Text("PING")
    }

Button(
        onClick={},
    ){
        Text("SET NAME")
    }
}

Button(
        onClick={},
    ){
        Text("EN NOTI")
    }
}