[ Kotlin ] Compose - 레이아웃만들기(material icon과 modifier 등)

231205

를 마지막으로 인공지능사관학교의 app개발 과정도 끝이났다.
그래서 포폴도 만들어보고? 이력서도 적어봤는데
띠용

걍 전멸,,

그래서 여러 커뮤니티를 떠돌면서 정보를 줍줍했으니
결론은

개인프로젝트로 내 역량을 키우고 검증하자

였다. (지금까지 한 게 너무 빈약해서 경쟁력이 없다)
그렇게 무지성으로 layout 짜다가 문득 드는 생각이? ㅋㅋ

내가 시간과 노력을 쏟아서 했던 개인프로젝트가, 들인 노력에 비해 실무에서 별로 안쓰는 것들로만 이뤄지면 걍 낭패.
그래서 찾아본 결과

Compose (jetpack)

라는게 요새 많이 쓴다고 했다구 해서 시작.

일단 안드로이드에서 안내하는 모든

Android 개발자를 위한 Jetpack Compose

과정을 공부하는게 목표 ㅎㅎ
그리고 그 전에 디벨로퍼스 페이지에서 나온

기본 레이아웃 만들기

기본 레이아웃 만들기  |  Android Basics Compose - First Android app  |  Android Developers

 

도 완료한 겸 Flutter 향이 물씬 나는

컴포즈 레이아웃 만들기에서 배운 것들 정리를 하려고 한다.

1. Row, Column, Container

먼저

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    // Create a column so that texts don't overlap
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 92.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

// 이미지들 가져올 때 
// val image = painterResource(R.drawable.~~) 해야함
    Image(
        painter = image,
        contentDescription = null,
        contentScale = ContentScale.Crop,
        alpha = 0.5F
    )

인데 Text라는 요소를 토대로 먼저 걍 widget으로 묶을 수 있음
그렇게 textalign, padding, border 등 여러 요소가 있는데, 생각해보면 Flutter 기초 공부하면서 이미 했다는 점..

 

2. Modifier

그래서 일단 그냥 다른게 뭐가 있나 찾아보는데

 

배치할 때 비율 정하는 법이 좀 달라서 이해를 따로 해봤다.

fun composefoursplit(title1 :String, maintext1 : String, title2 :String, maintext2 : String, title3 :String, maintext3 : String, title4 :String, maintext4 : String, ){
    Column(
        Modifier.fillMaxWidth()
    ) {
        Row(
            modifier = Modifier.weight(1F)
        ) {
            Box(
                modifier = Modifier.weight(1F)
            ) {
                Column(
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xFFEADDFF))
                        .padding(16.dp)
                ){
                    Text(
                        text = title1,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(bottom = 16.dp),
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = maintext1,
                        textAlign = TextAlign.Justify,
                    )
                }

            }
            Box(
                modifier = Modifier.weight(1F)
            ){
                Column(
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xFFD0BCFF))
                        .padding(16.dp)
                ){
                    Text(
                        text = title2,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(bottom = 16.dp),
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = maintext2,
                        textAlign = TextAlign.Justify,
                    )
                }
            }
        }
        Row(
            modifier = Modifier.weight(1F)
        ) {
            Box(
                modifier = Modifier.weight(1F)
            ) {
                Column(
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(
                            Color(0xFFB69DF8)
                        )
                        .padding(16.dp)
                ){
                    Text(
                        text = title3,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(bottom = 16.dp),
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = maintext3,
                        textAlign = TextAlign.Justify,
                    )
                }
            }
            Box(
                modifier = Modifier.weight(1F)
            ) {
                Column(
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xFFF6EDFF))
                        .padding(16.dp)
                ){
                    Text(
                        text = title4,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(bottom = 16.dp),
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = maintext4,
                        textAlign = TextAlign.Justify,
                    )
                }
            }
        }
    }
}

저거 짜는데 뭐가 이렇게 긴건가 했다.

여기서 느낀점.

text, image 등 2회 이상 반복되는 layout이 있으면 따로 함수 만들어서 꼭 사용하기,,

뇌빼고 하다보니 ㅎㅎ;
암튼 중요한게 그게 아니고

Column > Row > Box > Column(Text 2개)

의 형식이다. 코드를 보면
Row가 2개인데 각각

modifier = Modifier.weight(1F)

라고 되어있다. 한 마디로 전체 화면에서 1배율로 가진다? 라고 봐야겠다

만약

// row (
       modifier = Modifier.weight(0.5F)
   )
   row (
       modifier = Modifier.weight(0.5F)
   )
   row (
       modifier = Modifier.weight(1F)
   )

이런식이면 행의 최대 길이에서 각각 0.5 0.5 1 배율로 나눠 가지는 형식이라고 느낌.

2F로 기준. 0.5F, 0.5F 1F로 하면 25% 25% 50%.

합산 값을 1F로 잡고 0.3F, 0.7F로 하면 30% 70%.

스스로 계산하면 될 듯 싶었다.

그리고 마지막

3. Material Icon

phone
share,
email은
material Icon에서 사용하면 된다.

Icon(
                Icons.Rounded.Email,
                contentDescription = null,
                modifier = Modifier.weight(0.3F),
                tint = Color(0xFF0F8514),

            )

바로 icon 첫번째 인자인 imageVector에 저 Icons.Rounded.Email 을 사용하면 됨

imageVector = Icons.Rounded.Email

아무튼 뱃지도 달았고, 정리도 한 번 했으니, 다음 챕터로 넘어가야 겠다

시옷기억!