Compose 기초 - Composable Modifier

Android

Composable Modifier (원문)

💡개념이 헷갈리거나 제가 잘 모르거나 많은 사람들이 잘 모를 것 같은 것 위주로 정리

Modifier의 역할

Composable의 크기, 레이아웃, 동작 및 모양 변경

접근성 라벨과 같은 정보 추가

*접근성 라벨은 UI 테스트에서 요소 접근을 쉽게 할 수 있게 해준다.

요소를 클릭 가능, 스크롤 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가

@Composable
fun Greeting(name: String) { 
    Column(modifier = Modifier.padding(24.dp)) {  
        Text(text = "Hello,")  
        Text(text = name) 
    }
}

Modifier의 결과를 예상할 때 주의할 점

@Composable
fun ArtistCard(/*...*/) {  
    val padding = 16.dp  

    Column(   
        Modifier   
            // clickable() 뒤에 padding()이 호출되며, 클릭범위와 ripple 이펙트가 padding 부분까지 포함된다.   
            .clickable(onClick = onClick)      
            .padding(padding)       
          .fillMaxWidth()  
    ) {    
        ...
    }
}

@Composable
fun ArtistCard(/*...*/) {  
    val padding = 16.dp  

    Column(   
        Modifier   
            // padding() 뒤에 clickable()이 호출되며, 클릭범위와 ripple 이펙트가 padding 안쪽으로 제한된다. 
            .padding(padding)       
            .clickable(onClick = onClick)      
          .fillMaxWidth()  
    ) {    
        ...
    }
}

알아둘 만한 Modifier 목록

.requiredSize(), .requiredWidth(), .requiredHeight()

상위 Composable로부터 수신된 제약조건에 의해 크기가 제한되지 않고 원하는 크기를 강제할 수 있다.

@Composable
fun ArtistCard(/*...*/) {  
    Row(    
        modifier = Modifier.size(width = 400.dp, height = 100.dp)// 제한된 높이는 100dp
    ) {    
        Image(      
            /*...*/      
            modifier = Modifier.requiredSize(150.dp) // 강제할 높이는 150dp
        )    
        Column { /*...*/ }  
    }
}

.offset()

origin 위치를 기준으로 보여지는 위치를 이동시킬 수 있다.

실제 측정되는 x, y값은 변경되지 않는다.

BoxScope 전용 .matchParentSize()

matchParentSize()이 적용된 하위 Composable의 크기를 결정할 때 Box의 가장 큰 하위 요소에서 크기를 가져오도록 한다.

@Composable
fun MatchParentSizeComposable() {  
    // Spacer는 상위 Box에서 크기를 가져온다.
    // 결과적으로 가장 큰 하위 요소(이 경우에는 ArtistCard)에서 크기를 가져오게 되는 것
    Box(Modifier.wrapContentSize()) {    
        Spacer(Modifier.matchParentSize().background(Color.LightGray))    
        ArtistCard()  
    }
}