[Compose] 컴포즈 공부하기1 - Modifier 란?

Modifier

다음과 같은 작업을 할 수 있다.

• 컴포저블의 크기, 레이아웃, 동작 및 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 높은 수준의 상호작용 추가

---

Text를 통해 알기 쉽게 몇가지 예시를 알아보자.

 

1. 기본 Text

    Text(
        color= Color.Blue,
        text = "Hello, Android")

Modifier를 주지 않은 기본 Text는 이렇게 나오게 된다.

 

2. 크기 

    Text(
        color= Color.Blue,
        text = "Hello, Android",
        modifier = Modifier.size(100.dp) 
        // 또는 Modifier.size(width = 100.dp, height = 100.dp)
    )

 

 

3. 배경화면 

  Text(
        color= Color.Blue,
        text = "Hello, Android",
        modifier = Modifier
        	.size(100.dp)
       		.background(Color.DarkGray)
    )

 

4. padding(margin)

   Text(
        color= Color.Blue,
        text = "Hello, Android",
        modifier = Modifier
            .size(100.dp)
            .background(Color.DarkGray)
            .padding(10.dp)
    )

* compose에는 margin이 없고 padding만 있다.

 

5. FillMaxWidth(), FillMaxHeight(), FillMaxSize()

, F

    Text(
        color= Color.Blue,
        text = "Hello, Android",
        modifier = Modifier
            .background(Color.LightGray)
            .padding(10.dp)
            .fillMaxWidth()   //fillMaxHeight(), FillMaxSize()
    )

 

이렇게 사이즈나, 백그라운드 색 등 기본적인 값들은 Modifier를 통해 주게 된다.

 

 

+ 추가

Text에는 XML과 비슷하게 fontSize, FontWeight, fontFamily, letterSpacing, maxLines 등이 있고, 

xml로 구현한다면 거의 코드로만 불편하게 구현해야했던 밑줄, 취소선 등!!

textDecoration로 편하게 해결할 수 있다!

 

예시

   Text(
        color= Color.Blue,
        text = "Hello, Android \n안녕, 안드로이드",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Monospace,
        letterSpacing = 2.sp,
        maxLines = 1,
        textDecoration = TextDecoration.Underline,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .background(Color.LightGray)
            .padding(10.dp)
            .fillMaxWidth()
    )

 

 

 

 

 

 

 

https://developer.android.com/jetpack/compose/modifiers?hl=ko 

Compose 수정자  |  Jetpack Compose  |  Android Developers