[CodeLab] Jetpack Compose의 Layout

링크

• https://developer.android.com/codelabs/jetpack-compose-layouts?authuser=4&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fcompose%3Fhl%3Den%26authuser%3D4%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-layouts#0

• Compose학습을 위한 코드랩 2번째 입니다.

• 코드랩을 완벽히 똑같이 따라한 포스팅은 아니며 중요한 부분 위주로 정리한 포스팅입니다.

소개

• 

• 위와같은 형태의 UI를 구성하는것이 이번 포스팅의 목표입니다.

• 먼저 MainActivity에 아래와 같은 코드를 추가합니다.

@Composable
fun PhotographerCard() {
    Column {
        Text("Alfred Sisley", fontWeight = FontWeight.Bold)
        // LocalContentAlpha is defining opacity level of its children
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text("3 minutes ago", style = MaterialTheme.typography.body2)
        }
    }
}

@Preview
@Composable
fun PhotographerCardPreview() {
    LayoutsCodelabTheme {
        PhotographerCard()
    }
}

• 여기서 처음보는 CompositionLocalProvider가 등장합니다.

• CompositionLocalProvider의파라미터로 LocalContentAlpha라는 값이 들어가게 되는데 이는 Text나 Icon을 위한 alpha값입니다. 기본값은 1f로 투명도가 없지만 위처럼 CompositionLocalProvider를 사용한 경우 하위 블록에 포함된 컴포넌트에 alpha값을 지정할 수 있습니다.

• 위 코드를 미리보면 아래와 같은 형태의 UI가 구성됩니다.

• 

• 사용자의 사진을 넣기위해 아래와 같이 코드를 변경합니다.

@Composable
fun PhotographerCard() {
    Row {
        Surface(
            modifier= Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ){
            //이미지 추가예정
        }

        Column {
            Text("Alfred Sisley", fontWeight = FontWeight.Bold)
            // LocalContentAlpha is defining opacity level of its children
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text("3 minutes ago", style = MaterialTheme.typography.body2)
            }
        }
    }
}

작성중