개발자 SEOBI

안드로이드 개발 (8) Compose 이해 정리

이번 포스팅부터 Compose에 대해 차근히 파헤쳐 가보겠습니다. Android Compose 공식 문서를 보면서 정리한 내용들 입니다. https://developer.android.com/jetpack/compose/mental-model?hl=en Compose 이해 |..

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

jetpack compose 에 한창 포스팅 중입니다. https://gift123.tistory.com/33 안드로이드 개발 (8) Compose 이해 정리 이번 포스팅부터 Compose에 대해 차근히 파헤쳐 가보겠습니다. Android Compose 공식 문서를..

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

안녕하세요 Loner 입니다. 오늘은 Compose의 컴포저블 라이프사이클 공부를 정리해 봤습니다. 아래 문서를 정리한 내용입니다. https://developer.android.com/jetpack/compose/lifecycle?hl=en 컴포저블 수명 주..

gift123.tistory.com

안드로이드 개발 (11) Compose Side-effects

https://developer.android.com/jetpack/compose/side-effects#state-effect-use-cases Compose의 부수 효과 | Jetpack Compose | Android Developers 컴포저블에는 부수 효과가 없어야 합니다. 하지만 앱의..

gift123.tistory.com

안드로이드 개발 (13) Layout in Compose 1편

지금까지 Compose에 대해 composable 라이프사이클, Compose 내부흐름 , Composition, recompostion, Sdie-effects 활용방법에 대한 원론 방법에 알았다면 이제 실질적으로 Compose로 Layout을 어떻게 구성하는지..

gift123.tistory.com

안드로이드 개발 (14) Layout in Compose 2편

1편 정리 https://gift123.tistory.com/41 안드로이드 개발 (13) Layout in Compose 1편 지금까지 Compose에 대해 composable 라이프사이클, Compose 내부흐름 , Composition, recompostion, Sdie-effects 활용방..

gift123.tistory.com

https://gift123.tistory.com/44 ?category=967702

안드로이드 개발 (15) Theming in Compose

https://developer.android.com/jetpack/compose/themes?hl=en Compose의 레이아웃 | Jetpack Compose | Android Developers Jetpack Compose를 사용하면 앱의 UI를 훨씬 쉽게 디자인하고 빌드할 수 있습니다...

gift123.tistory.com

안드로이드 개발 (16) Compose Lists

gift123.tistory.com

https://gift123.tistory.com/45?category=967702

안드로이드 개발 (17) Compose Text 1편

안녕하세요 안드로이드 개발자 Loner입니다. Compose 연구에 푹 빠져사는 요즘 새로운 세계를 맛보고 있어서 즐거운것 같습니다. 이번에는 Compose의 텍스트에 관해 정리를 해봤습니다. Compose 의 텍스

gift123.tistory.com

https://gift123.tistory.com/46 ?category=967702

안드로이드 개발 (18) Compose Text 2편

이전 내용 Compose Text 1편 https://gift123.tistory.com/45?category=967702 안드로이드 개발 (17) Compose Text 1편 안녕하세요 안드로이드 개발자 Loner입니다. Compose 연구에 푹 빠져사는 요즘 새로운 세계..

gift123.tistory.com

안드로이드 개발 (18) Compose Text 2편

SEOBI서비 — Thu, 17 Jun 2021 03:05:21 +0900

이전 내용 Compose Text 1편

https://gift123.tistory.com/45?category=967702

안드로이드 개발 (17) Compose Text 1편

gift123.tistory.com

안녕하세요 안드로이드 개발자 Loner입니다. 저번 Text 설명 1편에 이어서 2편을 작성해보도록 하겠습니다. Text는 크게 색다로운 내용이 있다긴보다 되짚어보는 정리정도 되는거 같습니다. 2편 같은 경우 사용자 상호작용 개념이 있어서 1편보다는 좀더 좋은 기능을 설명하고 있습니다.

1. 사용자 상호작용

사용자 상호작용을 사용 설정할 수 있는 다양한 API를 설명합니다.

- 여러 Composable 레이아웃에서 더 유연하게 텍스트를 선택할 수 있음

- Text Composable 의 부분에 제어자를 추가할 수 없어서 Text의 사용자 상호작용은 다른 Composable 레이아웃과 다름

1) 텍스트 선택하기

기본적으로 Composable은 선택할 수 없습니다.

텍스트 선택 기능을 사용 설정하려면 Text를 SelectionContainer Composable로 래핑해야 합니다.

예제

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

결과

특정 부분만 선택 표시를 중지 할 수도 있습니다.

선택 불가능한 부분을 DisableSelection Composable로 래핑해서 사용할 수 있습니다.

예제

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

결과

2) 텍스트에서 클릭 위치 가져오기

Text의 클릭을 수신 대기하려면 clickable 추가하면 됩니다.

Text Composable 내에서 클릭 위치를 가져오려면 ClickableText를 Text Compsable 대신 사용합니다.

@Composable
fun SimpleClickableText() {
    ClickableText(
        text = AnnotatedString("Click Me"),
        onClick = { offset ->
            Log.d("ClickableText", "$offset -th character is clicked.")
        }
    )
}

3) 주석이 추가된 클릭

사용자가 Text Composable을 클릭할 때 특정 단어에 연결된 하이퍼링크 같이 Text 값에 정보를 추가할 수 있습니다.

- tag(String), annotation(String), 텍스트 범위를 매개변수로 사용하는 주석을 추가해야 함

- AnnotatedString에서 이러한 주석을 태그 또는 텍스트 범위로 필터링

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Click ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(tag = "URL",
                             annotation = "https://developer.android.com")
        withStyle(style = SpanStyle(color = Color.Blue,
                                    fontWeight = FontWeight.Bold)) {
            append("here")
        }

        pop()
    }

    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            // We check if there is an *URL* annotation attached to the text
            // at the clicked position
            annotatedText.getStringAnnotations(tag = "URL", start = offset,
                                                    end = offset)
                .firstOrNull()?.let { annotation ->
                    // If yes, we log its value
                    Log.d("Clicked URL", annotation.item)
                }
        }
    )
}

2. 텍스트 입력 및 수정

TextField를 사용하면 유저가 텍스트를 입력하거나 수정할 수 있습니다.

(1) TextField는 머티리얼 디자인 가이드라인을 따라 구현됨

- 기본 스타일이 채워짐

- OutlinedTextField는 위 스타일 버전입니다.

(2) BasicTextField는 유저가 키보드를 통해 텍스트를 수정할 수 있지만 힌트나 자리표시자 등등은 제공하지 않음

예제1. TextField

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

예제1. 결과

예제2. outlinedTextField

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

예제2. 결과

1) TextField 스타일 지정

TextField 및 BasicTextField는 커스텀 할 수 있는 많은 공통 매개변수를 공유합니다.

TextField의 전체 목록은 아래링크에서 확인할 수 있습니다.

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextField.kt;l=149?hl=ko

cs.android.com

다음은 자주 사용하는 매개변수 목록입니다.

singleLine
maxLines
textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}

- 디자인이 Material TextField 또는 OutlineTextField를 호출하는 경우 TextField를 사용하는 할것을 권장

- 머티리얼 사양의 장식이 필요하지 않은 디자인을 빌드하는 경우 BasicTextField를 사용해야함

2) 키보드 옵션

TextField를 사용하면 키보드 레이아웃과 같은 키보드 구성 옵션을 설정하거나 키보드에서 지원하는 경우

이래 지원되는 키보드 옵션들 입니다.

capitalization
autoCorrect
keyboardType
imeAction

위 자세한 설명은 이 링크를 참조

https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/KeyboardOptions?hl=ko#KeyboardOptions(androidx.compose.ui.text.input.KeyboardCapitalization,kotlin.Boolean,androidx.compose.ui.text.input.KeyboardType,androidx.compose.ui.text.input.ImeAction)

KeyboardOptions | Android 개발자 | Android Developers

developer.android.com

3) 형식 지정

TextField를 사용하면 입력 값에 형식을 설정할 수 있습니다.

예제

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}

- 비밀번호를 나타내는 문자를 *로 바꾸거나 신용카드 번호의 4자리마다 하이픈을 삽입할 수 있습니다.

결과

아래 링크에서 더 다양한 예제들을 볼 수 있습니다.

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-text/samples/src/main/java/androidx/compose/ui/text/samples/VisualTransformationSamples.kt?hl=ko

cs.android.com

3. 정리

- Compose 의 클릭영역은 SelectionContainer Composable로 TextComposable를 감싸서 만들면 사용할 수 있게 됨

- SelectionContainer 안에서 클릭영역 허용하지 않을 공간을 DisableSelection Composable로 설정할 수 있음

- Text대신 CilckableText Composable 를 사용하면 유저가 클릭한 좌표를 가져올 수 있음

- 추가된 클릭 표시를 하려면 AnnotatedString를 사용해서 tag , anotation 매개변수를 설정하면 됨

- TextField 사용하면 유저가 글을 수정할 수 있게끔 됨 (xml의 editText 대신)

- TextField는 기본 제공되는 스타일이 존재 , BaseTextField는 힌트나 자리표시자 등등을 제공하지 않는 기본 형식

- BaseTextField는 머트리얼 디자인 가이드를 따르지 않고 쓸때 사용하기를 권장

- TextField에서 사용자가 글을 입력시 표시되면 글 형식을 지정할 수 있음 (ex: 패스워드면 **)

- TextField에서 키보드 옵션 설정 가능

이번 2편은 사용자 반응 컨트롤과 Compose 버전의 EditText 설정을 보는것 같네요 항상 개발 관련 일을 할때 사용자 상호작용에 대한 컨트롤을 정의할때가 가장 개발자 스러운 작업이 아닌가 싶기도 합니다.

이상 Compose Text에 관한 정리였습니다.

이전 Compose 내용 정리

안드로이드 개발 (8) Compose 이해 정리

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

gift123.tistory.com

안드로이드 개발 (11) Compose Side-effects

gift123.tistory.com

안드로이드 개발 (13) Layout in Compose 1편

gift123.tistory.com

안드로이드 개발 (14) Layout in Compose 2편

gift123.tistory.com

https://gift123.tistory.com/44 ?category=967702

안드로이드 개발 (15) Theming in Compose

gift123.tistory.com

안드로이드 개발 (16) Compose Lists

gift123.tistory.com

https://gift123.tistory.com/45?category=967702

안드로이드 개발 (17) Compose Text 1편

gift123.tistory.com

안드로이드 개발 (17) Compose Text 1편

SEOBI서비 — Thu, 17 Jun 2021 01:37:52 +0900

안녕하세요 안드로이드 개발자 Loner입니다. Compose 연구에 푹 빠져사는 요즘 새로운 세계를 맛보고 있어서 즐거운것 같습니다. 이번에는 Compose의 텍스트에 관해 정리를 해봤습니다.

Compose 의 텍스트

- Compose는 텍스트를 표시하고 사용자 입력을 처리하는 기본 구조인 BasicText 및 BasicTextField를 제공함.

- 상위 수준에서 Compose는 Text 및 TextField를 제공하며 머티리얼 디자인를 따름

(위 Composable은 디자인과 분위기가 Android 사용자에게 적합하며 쉽게 커스텀 할 수 있는 옵션이 포함되어 있으므로사용을 권장함)

1. 기본 텍스트 표시

텍스트를 표시하는 가장 기본적인 방법은 Text Composable을 사용하는 것입니다.

예제 1.

@Composable
fun SimpleText() {
Text("Hello World")
}

예제 2. 문자열 리소스를 사용하는 예제

@Composable
fun StringResourceText() {
Text(stringResource(R.string.hello_world))
}

예제1,2 결과

2. 텍스트 스타일 지정

Text Composable에는 콘텐츠의 스타일을 지정할 수 있는 여러 매개변수가 있습니다.

이 매개변수 중 하나를 설정할 때마다 전체 텍스트 값에 스타일이 적용됩니다.

Text의 모든 매개변수를 보려면 아래링크를 참고하시기 바랍니다.

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Text.kt;l=88?hl=ko

cs.android.com

에제1. 텍스트 색상 변경

@Composable
fun BlueText() {
Text("Hello World", color = Color.Blue)
}

예제1. 결과

예제2. 텍스트 크기 변경

@Composable
fun BigText() {
Text("Hello World", fontSize = 30.sp)
}

예제2. 결과

예제3. 텍스트를 기울임꼴로 설정

@Composable
fun ItalicText() {
Text("Hello World", fontStyle = FontStyle.Italic)
}

예제3. 결과

예제4. 스트를 굵게 표시

@Composable
fun BoldText() {
Text("Hello World", fontWeight = FontWeight.Bold)
}

예제4. 결과

에제5. 텍스트 정렬

@Preview(showBackground = true)
@Composable
fun CenterText() {
Text("Hello World", textAlign = TextAlign.Center,
modifier = Modifier.width(150.dp))
}

- textAlign 매개변수를 사용하면 텍스트의 정렬을 설정할 수 있음

- 기본적으로 Text는 콘텐츠 값에 따라 자연 텍스트 정렬을 선택함

(ex: 라틴어, 키릴어, 한글 등 왼쪽에서 오른쪽으로 쓰는 알파벳을 위한 Text 컨테이너의 왼쪽 가장자리)

(ex2: 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 쓰는 알파벳을 위한 Text 컨테이너의 오른쪽 가장자리)

-TextAlign.Right, TextAlign.Lift 보다 언어 텍스트 방향에 따라 Text 이동하는 TextAlign.Start와 TextAlign.End를 사용하는 것을 권장함

예제5. 결과

3. font

- Text의 fontFamily 매개변수를 사용하면 Composable에 사용되는 글꼴을 관리할 수 있음

- 기본적으로 Serif, Sans-serif, 고정폭 및 필기체 글꼴 모음이 포함

예제

@Composable
fun DifferentFonts() {
Column {
Text("Hello World", fontFamily = FontFamily.Serif)
Text("Hello World", fontFamily = FontFamily.SansSerif)
}
}

결과

fontFamily 속성을 사용하여 res/fonts 폴더에 정의된 맞춤 font로 작업할 수 있음

예제

val firaSansFamily = FontFamily(
Font(R.font.firasans_light, FontWeight.Light),
Font(R.font.firasans_regular, FontWeight.Normal),
Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
Font(R.font.firasans_medium, FontWeight.Medium),
Font(R.font.firasans_bold, FontWeight.Bold)
)

Column {
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal,
fontStyle = FontStyle.Italic)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}

- fontFamily를 Text 컴포저블에 전달할 수 있습니다.

- fontFamily에 수동으로 fontWeight를 설정하여 텍스트에 적합한 가중치를 선택할 수 있습니다.

결과

4. Text Composable 내의 여러 스타일 설정

동일한 Text 컴포저블 내에서 여러 스타일을 설정하려면 AnnotatedString을 사용해야 합니다.

AnnotatedString은 다음 항목이 포함된 데이터 클래스입니다.

Text 값
SpanStyleRange의 List: 텍스트 값 내 위치 범위가 포함되는 인라인 스타일 지정과 동일함
ParagraphStyleRange의 List: 텍스트 정렬, 텍스트 방향, 행 간격, 텍스트 들여쓰기 스타일 지정

TextStyle은 Text 컴포저블에서 사용되며

SpanStyle 및 ParagraphStyle은 AnnotatedString에서 사용됩니다.

SpanStyle과 ParagraphStyle의 차이점은

ParagraphStyle은 전체 단락에 적용할 수 있고

SpanStyle은 문자 수준에서 적용할 수 있다는 것입니다.

예제1. SpanStyle 사용

@Composable
fun MultipleStylesInText() {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Blue)) {
append("H")
}
append("ello ")

withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
append("W")
}
append("orld")
})
}

예제1.결과

예제2.ParagraphStyle 사용

@Composable
fun ParagraphStyle() {
Text(buildAnnotatedString {
withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
withStyle(style = SpanStyle(color = Color.Blue)) {
append("Hello\n")
}
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,
color = Color.Red)) {
append("World\n")
}
append("Compose")
}
})
}

-텍스트의 한 부분이 ParagraphStyle로 표시되면 이 부분은 시작과 끝에 줄 바꿈이 있는 것처럼 나머지 부분과 분리됨

예제2. 결과

5. 최대 줄 수

- Text Composable에 표시되는 줄 수를 제한하려면 maxLines 매개변수를 설정

@Composable
fun LongText() {
Text("hello ".repeat(50), maxLines = 2)
}

6. 텍스트 오버플로

- 긴 텍스트를 제한할 때 표시된 텍스트가 잘린 경우에만 표시되는 텍스트 오버플로를 표시할 수 있음

- textOverflow 매개변수를 설정하면됨

@Composable
fun OverflowedText() {
Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}

7. 정리

- Compose 의 Text Composable은 기본적으로 머티리얼 디자인 가이드에 따라 구현이 됨

- Text Composable의 매개변수로 스타일을 지정할 수 있음 크기, 색깔, 기울기, 정렬, 굵기,최대 줄수, 오버플로우 등등

- RTL, LTR 설정 컨텍스트에 따라 정렬이 자연적으로 달라지게 되어있음 (Left,Right 보다 Start,End 사용을 권장)

- font도 fontFamily 패러미터로 쉽게 설정가능, fontWeight 패러미터로 가중치 수동으로 설정가능

- Text Composable 내의 글자마다 설정을 다르게 하고 싶으면 AnnotatedString를 사용

->ParagraphStyle은 전체단락 , SpanStyle은 문자 수준 적용

이상 Text 1편 정리입니다. 다음은 2편으로 이어서 작성 예정입니다.

기존 방식에 비해서 매개변수로 너무 쉽게 설정이 가능해서 작은일에 괜히 시간 소모 되는일이 많이 줄어들거라 예상합니다.

이전 Compose 정리 내용

안드로이드 개발 (8) Compose 이해 정리

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

gift123.tistory.com

안드로이드 개발 (11) Compose Side-effects

gift123.tistory.com

안드로이드 개발 (13) Layout in Compose 1편

gift123.tistory.com

안드로이드 개발 (14) Layout in Compose 2편

gift123.tistory.com

https://gift123.tistory.com/44

안드로이드 개발 (15) Theming in Compose

gift123.tistory.com

안드로이드 개발 (16) Compose Lists

gift123.tistory.com

안드로이드 개발 (16) Compose Lists

SEOBI서비 — Wed, 16 Jun 2021 04:41:39 +0900

안녕하세요 안드로이드 개발자 Loner입니다. Compose의 정리를 이어서 진행해보도록 하겠습니다.

List

기존 Xml방식으로 List는 주로 리싸이클러 뷰 혹은 리스트뷰로 많이 구현을 해왔습니다.

Compose에서는 List를 어떻게 구현해야할지 살펴보겠습니다.

심플 구현

@Composable
fun MessageList(messages: List<Message>) {
    Column {
        messages.forEach { message ->
            MessageRow(message)
        }
    }
}

Column 또는 Row를 사용하여 위과 같이 각 아이템의 콘텐츠를 표시할 수 있음

verticalScroll() Modifier를 사용하여 Column을 스크롤 가능하게 만들 수 있습니다.

하지만 아이템 갯수만큼 UI가 미리 만들어져 있기 때문에 많은 size의 아이템을 표시해야 하는 경우

성능문제가 발생할 수 있음

1. Lazy Composable

위의 Column를 이용한 심플 구현과 달리 화면상 표시되는 영역만 아이템을 구성하며 배치할 수 있습니다.

이러한 구성요소에는 LazyColumn 및 LazyRow가 포함됩니다.

참고: RecyclerView와 동일한 원칙을 따릅니다.

1) LazyColumn 와 LazyRow

- LazyColumn은 세로로 스크롤되는 목록을 생성

- LazyRow는 가로로 스크롤되는 목록을 생성

- Lazy 구성요소는 Compose의 대부분 레이아웃과 다름

- Lazy 구성요소는 @Composable 콘텐츠 블록 구성요소를 수락하고 앱에서 직접 Composable을 내보낼 수 있도록 허용하는 대신 LazyListScope.() 블록을 제공함

2) LazyListScope DSL

LazyListScope 블록은 앱에서 항목 콘텐츠를 설명할 수 있는 DSL을 제공합니다.

그런 다음 지연 구성요소가 레이아웃 및 스크롤 위치에 따라 각 항목의 콘텐츠를 추가합니다.

DSL은 도메인별 언어를 의미함. Compose에서 일부 API용 DSL을 정의하는 방법에 관한 자세한 내용은 아래 문서를 참고할 것

https://developer.android.com/jetpack/compose/kotlin#dsl

Jetpack Compose용 Kotlin | Android Developers

Jetpack Compose는 Kotlin을 중심으로 빌드되었습니다. 일부 경우에 Kotlin은 좋은 Compose 코드를 더 쉽게 작성할 수 있게 하는 특수 관용구를 제공합니다. 다른 프로그래밍 언어로 생각하고 그 언어를 Kot

developer.android.com

LazyListScope의 DSL은 레이아웃의 항목을 설명하는 여러 함수를 제공합니다.

- item()은 단일 항목을 추가

- [items(Int)]는 여러 항목을 추가

예제

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // Add another single item
    item {
        Text(text = "Last item")
    }
}

결과

List와 같이 항목 컬렉션을 추가할 수 있는 다양한 확장 함수도 있습니다.

예제

import androidx.compose.foundation.lazy.items

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageRow(message)
        }
    }
}

- 기본 Column과 달리 성능문제가 해결됨

색인을 제공하는 itemsIndexed()라고 하는 items() 확장 함수의 버전도 있습니다.

자세한 내용은 아래 문서를 확인하세요.

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListScope

LazyListScope | Android 개발자 | Android Developers

developer.android.com

2. 콘텐츠 패딩

콘텐츠 가장자리 주변에 패딩을 추가해야 하는 경우가 있습니다.

지연 구성요소를 사용하면 일부 PaddingValues을 contentPadding 매개변수에 전달하여 이 작업을 지원할 수 있습니다.

예제

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}

결과

3. 콘텐츠 간격

Arrangement.spacedBy()를 사용하면 아이템 마다 간격을 줄 수 있음

예제

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}

-Column은 verticalArrangement만 사용

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}

-Row는 horizontalArrangement만 사용

결과

4. 항목 애니메이션

-RecyclerView 의경우 아이템 변경시 자동으로 애니메이션 처리되지만

지연 레이아웃에서는아직이 기능을 제공하지 않음.

- 항목을 변경하면 인스턴트 '스냅'이 발생

- 차후 업데이트 가능성이 있음

5. 고정 헤더(실험용)

주의: 실험용 API는 향후 변경되거나 완전히 삭제될 수 있음

'고정 헤더' 패턴은 그룹화된 데이터 목록을 표시할 때 유용함

LazyColumn이 있는 고정 헤더를 표시하려면 헤더 콘텐츠를 제공하는 실험용 stickyHeader() 함수를 사용

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListWithHeader(items: List<Item>) {
    LazyColumn {
        stickyHeader {
            Header()
        }

        items(items) { item ->
            ItemRow(item)
        }
    }
}

위예와 같이 여러 헤더를 표시하려면 다음 예제를 참고하세요

val grouped = contacts.groupBy { it.firstName[0] }

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ContactsList(grouped: Map<Char, List<Contact>>) {
    LazyColumn {
        grouped.forEach { (initial, contactsForInitial) ->
            stickyHeader {
                CharacterHeader(initial)
            }

            items(contactsForInitial) { contact ->
                ContactListItem(contact)
            }
        }
    }
}

5. 그리드(실험용)

주의: 실험용 API는 향후 변경되거나 완전히 삭제될 수 있음

LazyVerticalGrid Composable은 아이템을 그리드로 표시하기 위한 실험용 지원 기능을 제공합니다.

예제

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        cells = GridCells.Adaptive(minSize = 128.dp)
    ) {
        items(photos) { photo ->
            PhotoItem(photo)
        }
    }
}

cells 매개변수는 셀을 열로 구성하는 방식을 제어합니다.

사용할 열의 정확한 수를 알고 있으면 필요한

수의 열이 포함된 GridCells.Fixed의 인스턴스를 대신 제공할 수 있습니다.

6. 스크롤 위치에 반응

스크롤 위치와 항목 레이아웃 변경사항에 반응하려면

지연 구성요소는LazyListState를 호이스팅하여 사용합니다.

예제1.

@OptIn(ExperimentalAnimationApi::class) // AnimatedVisibility
@Composable
fun MessageList(messages: List<Message>) {
    Box {
        val listState = rememberLazyListState()

        LazyColumn(state = listState) {
            // ...
        }
        val showButton by remember {
            derivedStateOf {
                listState.firstVisibleItemIndex > 0
            }
        }

        AnimatedVisibility(visible = showButton) {
            ScrollToTopButton()
        }
    }
}

- 사용자가 첫 번째 항목을 지나 스크롤했는지 여부에 따라 버튼을 표시하고 숨기는 예제

- LazyListState는 firstVisibleItemIndex 및 firstVisibleItemScrollOffset 속성을 제공합니다.

- 위의 예에서는 derivedStateOf()를 사용하여 불필요한 Composition을 최소화함

Composition에서 동일한 컴퍼지션에서 직접 상태를 읽는 기능을 처리할 필요가 없는 시나리오도 있습니다.

snapshotFlow()를 사용할 수 있습니다.

예제2.

val listState = rememberLazyListState()

LazyColumn(state = listState) {
    // ...
}

LaunchedEffect(listState) {
    snapshotFlow { listState.firstVisibleItemIndex }
        .map { index -> index > 0 }
        .distinctUntilChanged()
        .filter { it == true }
        .collect {
            MyAnalyticsService.sendScrolledPastFirstItemEvent()
        }
}

- 이 시나리오의 일반적인 예는 사용자가 특정 지점을 지나 스크롤한 후 분석 이벤트를 보내는 것입니다.

- 이 시나리오를 효율적으로 처리하기 위해 snapshowFlow()를 사용했습니다.

- LazyListState는 또한 layoutInfo 속성을 통해 현재 표시된 모든 항목 및 화면의 경계에 관한 정보를 제공합니다.

자세한 내용은 아래 문서를 참고하세요.

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListLayoutInfo

LazyListLayoutInfo | Android 개발자 | Android Developers

developer.android.com

7. 스크롤 위치 제어

LazyListState는 스크롤 위치를 '즉시' 스냅하는 scrollToItem() 및 애니메이션을 사용하여

스크롤하는 animateScrollToItem() 함수를 통해 이 기능을 지원합니다.

참고: scrollToItem() 및 animateScrollToItem()은 모두 suspend 함수입니다. 즉 코루틴에서 호출해야 합니다.

@Composable
fun MessageList(messages: List<Message>) {
    val listState = rememberLazyListState()
    // Remember a CoroutineScope to be able to launch
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState) {
        // ...
    }

    ScrollToTopButton(
        onClick = {
            coroutineScope.launch {
                // Animate scroll to the first item
                listState.animateScrollToItem(index = 0)
            }
        }
    )
}

8. 페이징

아이템 양이 많으면 Paging 라이브러리를 사용해서 필요한 만큼 아이템을 불러와서 표시할 수 있음.

Paging 3.0 이상에서는 androidx.paging:paging-compose 라이브러리를 통해 Compose 지원 기능을 제공합니다.

페이징된 콘텐츠 목록을 표시하려면 collectAsLazyPagingItems() 확장 함수를 사용한 다음

반환된 LazyPagingItems를 LazyColumn의 items()에 전달하면 됩니다.

item이 null인지 확인하여 데이터가 로드되는 동안 자리표시자를 표시할 수 있습니다.

import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.items

@Composable
fun MessageList(pager: Pager<Int, Message>) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(lazyPagingItems) { message ->
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
}

경고: RemoteMediator를 사용하여 데이터를 가져오는 경우 실제 크기의 자리표시자 아이템을 제공해야합니다

RemoteMediator를 사용하는 경우 화면이 콘텐츠로 채워질 때까지 반복적으로 호출되어 새 데이터를 가져옵니다.

위처럼 하지 않으면 화면이 채워지지 않을 수 있으며 앱에서 많은 데이터 페이지를 가져오게 됩니다.

9. 항목 키

기본적으로 각 아이템의 상태는 List에 있는 아이템의 position를 기준으로 키가 지정됩니다.

하지만 position을 효율적으로 변경하는 List에 상태가 저장되지 않아

데이터 세트가 변경되면 문제가 발생할 수 있습니다.

LazyColumn 내 LazyRow 시나리오의 경우 행에서 아이템 위치가 변경되면

사용자가 행 내에서 스크롤 위치를 잃게 됩니다.

이 문제를 해결하려면 각 아이템에 안정적이고 고유한 키를 제공하여 key 매개변수에 블록을 제공하면 됩니다.

예제

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(
            items = messages,
            key = { message ->
                // Return a stable + unique key for the item
                message.id
            }
        ) { message ->
            MessageRow(message)
        }
    }
}

참고: 제공된 모든 키를 Bundle 내에 저장할 수 있어야 합니다.

10. 정리

- 아이템 수가 많지 않을땐 Lazy Composable를 사용하지 않고 심플하게 Column이나 Row로 만들수 있음

- Lazy Composable로 구현해야 리사이클러 뷰 처럼 성능상 효율적으로 UI를 배치하고 표시함

- Compose에서 List는 매우 만들기 편리함 간단하게 각 아이템마다 간격을 쉽게 넣을 수도 있음

- 스크롤 관련 이벤트나 제어를 쉽게 컨트롤 하게끔 지원해줌

- 페이징 라이브러리는 compose를 공식적으로 지원해주기 떄문에 paging을 사용하기 매우 편리함

- List의 position을 이용해서 해당 아이템을 찾아쓸 때 Compose 상태관리 특징상 문제가 있을 수 있음

그래서 키를 직접 등록해주는게 안전함

이상 Compose의 List에 관해서 정리를 해봤습니다. 개인적으로 RecyclerView에서 어댑터를 따로 만들어 셋팅할 때 보일러플레이트 코드가 너무 많이 발생해서 상당히 불편했는데, 이번 Compose로 이런 문제들이 많이 해결되는것 같습니다.

이전 Compose 내용 정리

안드로이드 개발 (8) Compose 이해 정리

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

gift123.tistory.com

안드로이드 개발 (11) Compose Side-effects

gift123.tistory.com

안드로이드 개발 (13) Layout in Compose 1편

gift123.tistory.com

안드로이드 개발 (14) Layout in Compose 2편

gift123.tistory.com

https://material.io/design/color/the-color-system.html#color-usage-and-palettes

안드로이드 개발 (15) Theming in Compose

gift123.tistory.com

안드로이드 개발 (15) Theming in Compose

SEOBI서비 — Tue, 15 Jun 2021 18:06:55 +0900

오늘도 Compose 내용 정리를 이어서 해보겠습니다.

Compose의 테마 설정

- Compose는 테마를 적용하여 앱에 일관된 디자인과 분위기를 쉽게 제공을 함

- 기본적으로 Compose의 머티리얼 디자인 구현을 만드려는 앱에 맞게 맞춤설정이 가능

- 머티리얼 디자인 뿐만 아니라 다른 Compose의 공개 API를 사용하여 맞춤 디자인 시스템을 만들 수 있음

애플리케이션 전체 테마 설정

MaterialTheme(
    colors = …,
    typography = …,
    shapes = …
) {
    // app content
}

머티리얼 디자인 구성요소(버튼, 카드, 스위치 등)는 나만의 앱을 효과적으로 반영하기 위해

머티리얼 디자인을 맞춤설정하는 체계적인 방법인 머티리얼 테마 설정을 기반으로 빌드됩니다.

- 머티리얼 테마는 색상, 서체 및 도형 속성으로 구성

- 속성을 맞춤설정하면 앱에 사용되는 구성요소에 변경사항이 자동 적용

1. 색상

val Red = Color(0xffff0000)
val Blue = Color(red = 0f, green = 0f, blue = 1f)

색상은 Compose에서 간단한 데이터 보유 클래스인 Color 클래스로 모델링됩니다.

- 원하는 대로 색상을 구성할 수 있음

(ex: 싱글톤 내에서 또는 정의된 인라인으로 최상위 상수로 구성)

- 테마에 색상을 지정하고 거기에서 색상을 검색하는 것이 좋음

(이 방식을 사용하면 여러 테마를 지원할 수 있습니다.)

Compose는 Colors 클래스를 제공하여 머티리얼 색상 시스템을 모델링합니다.

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

1) Colors는 다음과 같이 밝거나(light) 어두운(dark) 색상 세트를 만드는 함수를 제공

예제

    private val Yellow200 = Color(0xffffeb46)
    private val Yellow400 =  Color(0xFFFFEE58)
    private val Yellow500 = Color(0xFFFFEB3B)

    private val Blue200 = Color(0xff91a4fc)
    private val Blue700 = Color(0xFFBECAFF)


    private val DarkColors = darkColors(
        primary = Yellow200,
        secondary = Blue200,
    )
    private val LightColors = lightColors(
        primary = Yellow500,
        primaryVariant = Yellow400,
        secondary = Blue700,
    )

    @Composable
    private fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme()
    ) {
        MaterialTheme(
            colors = if (darkTheme) DarkColors else LightColors
        ) {
            //머티리얼 테마가 적용되는 영역
        }
    }

- Colors를 정의한 후에는 MaterialTheme에 전달할 수 있음

실사용

 MaterialTheme(
            colors = if (darkTheme) DarkColors else LightColors
        ) {
            Text(
                text = "Hello theming",
                color = MaterialTheme.colors.primary
            )
        }

MaterialTheme.colors를 사용하면 MaterialTheme Composable에 제공된Colors를 검색할 수 있음

결과

2) 표시 경로 및 콘텐츠 색상

많은 구성요소가 한 쌍의 색상 및 '콘텐츠 색상'을 허용합니다.

Surface(
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    // ...

TopAppBar(
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    // ...

- contentColor를 통해 Composable의 색상 설정과 그 안에 포함된 Composable인 콘텐츠의 기본 색상을 제공할 수 있음.

-많은 Composable은 기본적으로 이 콘텐츠 색상을 사용합니다.

- contentColorFor() 메서드는 테마 색상에 적절한 '설정' 색상을 검색

(예를 들어 primary 배경을 설정하면 onPrimary가 콘텐츠 색상으로 설정됩니다.)

예를 들어 Text는 상위 요소의 콘텐츠 색상을 기반으로 색상을 설정하고 Icon은 이 색상을 사용하여 색조를 설정합니다.

테마가 아닌 배경 색상을 설정하는 경우 적절한 콘텐츠 색상도 지정해야 합니다.

LocalContentColor 를 사용하여 현재 배경과 대조되는 현재 콘텐츠 색상을 검색합니다.

참고: Surface가 적절한 콘텐츠 색상을 설정하기 때문에 Surface를 사용하여 색상을 설정하는 것을 권장

(적절한 콘텐츠 색상이 설정되지 않는 직접 Modifier.background() 호출에 주의할 것.)

3) 콘텐츠 알파

콘텐츠를 강조하는 정도를 조절해서 중요도를 표시할 때가 많습니다.

머티리얼 디자인에서는 불투명도를 사용하여 다양한 중요도 수준을 전달하도록 권장합니다.

이는 LocalContentAlpha를 사용하면 됩니다.

LocalContentAlpha

- CompositionLocal 값을 제공하여 계층 구조의 콘텐츠 알파를 지정할 수 있음

- 하위 Composable에서 이 값을 사용함

예제

@Composable
    private fun AlphaTest() {
        Column {
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text("test")
            }
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
                Icon(painter = painterResource(id = R.drawable.ic_launcher_background), null)
                Text("asdasdasdasdas")
            }
        }
    }

- Text 및 Icon은 기본적으로 LocalContentAlpha를 사용하도록 조정된 LocalContentColor 조합을 사용

- 머티리얼에서는 ContentAlpha 객체에 의해 모델링된 일부 표준 알파 값(high, medium, disabled)을 지정

- MaterialTheme은 LocalContentAlpha의 기본값을 ContentAlpha.high로 설정함

결과

실제 응용 예시

중요도가 투명도로 전달이 됨

4) 어두운 테마

Compose에서 MaterialTheme Composable에 다양한 Colors 세트를 제공하고

테마를 통해 색상을 사용하여 light theme 및 dark theme를 구현합니다.

예제1.

 @Composable
    fun MyTheme(
        darkTheme: Boolean = isSystemInDarkTheme(),
        content: @Composable () -> Unit
    ) {
        MaterialTheme(
            colors = if (darkTheme) DarkColors else LightColors,
            content = content
        )
    }

- isSystemInDarkTheme()로 어두운 테마를 사용할지 여부를 정하고 있습니다.

- true 일떄 기기 테마 설정을 쿼리하여 darkTheme의 기본값을 가져옵니다.

예제2.

val isLightTheme = MaterialTheme.colors.isLight

- DarkTheme를 구현할 때 현재 Colors가 밝은지 또는 어두운지 확인할 수 있습니다.

-위 값은 lightColors() 및 darkColors() 빌더 함수에 의해 설정됩니다.

예제3.

Surface(
    elevation = 2.dp,
    color = MaterialTheme.colors.surface, // color will be adjusted for elevation
    /*...*/
) { /*...*/ }

- 머티리얼에서 고도가 높은 Dark Theme의 표시 경로는 배경을 밝게 하는 고도 오버레이를 수신합니다.

- 이러한 오버레이는 어두운 색상을 사용할 때 Surface Composable에 의해 자동 구현됩니다.

- 카드 및 하단 탐색은 surface 색상이 지정되어 있지만 더 높은 고도에 있기 때문에 색상이 약간 더 밝음

5) 머티리얼 색상 확장

  val Colors.snackbarAction: Color
        @Composable get() = if (isLight) Blue200 else Blue700

- 색상 세트를 확장해야 한다면 위와 같이 자체 색상 시스템을 구현하거나 확장을 추가할 수 있음

2. 서체

https://material.io/design/typography/the-type-system.html#type-scale

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

머티리얼 디자인은은 위 링크처럼 유형 시스템을 정의해서

의미론적으로 이름이 지정된 소수의 스타일을 사용하도록 권장함

Compose는 Typography, TextStyle 및 글꼴 관련 클래스를 사용하여 유형 시스템을 구현합니다.

-Typography 생성자는 각 스타일의 기본값을 제공하므로 맞춤 설정하지 않으려는 스타일은 생략가능

val Rubik = FontFamily(
    Font(R.font.rubik_regular),
    Font(R.font.rubik_medium, FontWeight.W500),
    Font(R.font.rubik_bold, FontWeight.Bold)
)

val MyTypography = Typography(
    h1 = TextStyle(
        fontFamily = Rubik,
        fontWeight = FontWeight.W300,
        fontSize = 96.sp
    ),
    body1 = TextStyle(
        fontFamily = Rubik,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp
    )
    /*...*/
    )

MaterialTheme(typography = MyTypography, /*...*/)

전체적으로 동일한 글꼴을 사용하려면 다음과 같이 defaultFontFamily 매개변수를 지정하고 TextStyle 요소의 fontFamily를 생략합니다.

예제

val typography = Typography(defaultFontFamily = Rubik)
MaterialTheme(typography = typography, /*...*/)

참고: Compose는 현재 Android의 다운로드 가능한 글꼴 기능을 지원하지 않지만 번들 글꼴 리소스를 지원합니다.

https://developer.android.com/guide/topics/resources/font-resource

글꼴 리소스 | Android 개발자 | Android Developers

글꼴 리소스는 앱에서 사용할 수 있는 맞춤 글꼴을 정의합니다. 글꼴은 개별 글꼴 파일 또는 글꼴 모음이라고 하는 글꼴 파일 모임일 수 있으며 XML로 정의됩니다. 또한, XML로 글꼴을 정의하는 방

developer.android.com

텍스트 스타일 사용

다음 예와 같이 테마에서 TextStyle을 검색합니다.

Text(
    text = "Subtitle2 styled",
    style = MaterialTheme.typography.subtitle2
)

3. 도형

머티리얼은 도형 시스템을 정의합니다.

이 시스템을 통해 대형, 중형 및 소형 구성요소의 도형을 정의할 수 있습니다.

Compose는 Shapes 클래스를 통해 도형 시스템을 구현합니다.

이 클래스를 사용하면 각 카테고리의 CornerBasedShape를 지정할 수 있습니다.

예제

val Shapes = Shapes(
    small = RoundedCornerShape(percent = 50),
    medium = RoundedCornerShape(0f),
    large = CutCornerShape(
        topStart = 16.dp,
        topEnd = 0.dp,
        bottomEnd = 0.dp,
        bottomStart = 16.dp
    )
)

MaterialTheme(shapes = Shapes, /*...*/)

- 많은 구성요소가 기본적으로 이러한 도형을 사용합니다.

- UI 사이즈 별로 도형 정의가 나뉨

- small => Button,TextField 등등.., medium => AlertDialog 등등.. , large => ModalDrawer 등등..

도형 사용

다음과 같이 테마에서 도형을 검색합니다.

Surface(
    shape = MaterialTheme.shapes.medium, /*...*/
) {
    /*...*/
}

그림 6. 도형을 사용하여 브랜드 또는 상태를 표현할 수 있습니다.

4. 구성요소 스타일

- Compose에는 구성요소 스타일에 대한 명시적인 개념이 없음

(자체 Composable을 생성하여 이 기능을 제공하기 때문입니다.)

아래 예제와 같은 방식으로 스타일을 만들 수 있음

@Composable
fun LoginButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier,
        content = content
    )
}

- 고유의 Composable 함수로 버튼을 래핑하고 변경하려는 매개변수를 직접 설정하며 포함하는 Composable에 매개변수로 다른 매개변수를 노출합니다.

5. 맞춤 디자인 시스템

머티리얼은 권장되는 디자인 시스템이지만 이 시스템뿐만 아니라

동일한 방식으로 자체 디자인 시스템을 만드는 것이 전적으로 가능

이 문서에서는 다룰 수 있는 범주를 벗어낫기 때문에 개발자 스스로가 개척해야함

자세한 내용은 아래 링크들 참고해서 커스텀 해볼것

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/MaterialTheme.kt?hl=ko

cs.android.com

https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocal?hl=ko

CompositionLocal | Android 개발자 | Android Developers

developer.android.com

https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary?hl=ko#CompositionLocalProvider(kotlin.Array,kotlin.Function0)

androidx.compose.runtime | Android 개발자 | Android Developers

developer.android.com

https://github.com/android/compose-samples/tree/main/Jetsnack

android/compose-samples

Official Jetpack Compose samples. Contribute to android/compose-samples development by creating an account on GitHub.

github.com

6.정리

- 기본적으로 Compose는 머티리얼 디자인을 테마로 자신의 앱을 만들 수 있도록 제공해주는 편임

- 색상,도형,서체 등등 손쉽게 머티리얼 디자인을 따라갈 수 있도록 좋게 지원을 함

- 가능하면 머티리얼 디자인 뿐만 아니라 맞춤 디자인 시스템을 갖출수 있음

Compose를 통해서 더 쉽게 머티리얼 디자인을 따라갈 수 있도록 되어가는것 같습니다. 기존 xml로 했을 때 머티리얼 디자인 가이드를 보면서 안드로이드에서 완전 알맞게 지원을 해주는편이라긴 보다 이런 디자인 가이드는 너가 알아서 따라해라 느낌에 가까웠다면 이젠 본격적으로 머티리얼 디자인을 누구나 쉽게 잘 적용할 수 있을 것 같네요.

이상 컴포즈의 테마적용편을 마무리 하겠습니다.

이전 Compose 내용 정리

안드로이드 개발 (8) Compose 이해 정리

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

gift123.tistory.com

안드로이드 개발 (11) Compose Side-effects

gift123.tistory.com

안드로이드 개발 (13) Layout in Compose 1편

gift123.tistory.com

https://gift123.tistory.com/41

안드로이드 개발 (14) Layout in Compose 2편

gift123.tistory.com

안드로이드 개발 (14) Layout in Compose 2편

SEOBI서비 — Tue, 15 Jun 2021 13:20:36 +0900

1편 정리

안드로이드 개발 (13) Layout in Compose 1편

gift123.tistory.com

1편에 이어서 2편도 정리해가보도록 하겠습니다.

1편 요약

- 기본 레이아웃은 Colum , Row, Box 3가지를 주로 사용

- Modifiers 로 Composable의 설정이나 여러가지를 추가적으로 작업할 수 있음

- Modifiers는 순서가 매우 중요

- 가중치, 제약조건 사용으로 반응형 레이아웃을 만들 수 있음

- 슬롯기반 API로 쉽게 머티리얼 디자인을 구성하거나 기본적으로 지원해주는 UI를 빠르게 만들어 낼 수 있음

(대표적으로 Scaffold)

1. ConstraintLayout

- ConstraintLayout은 더 복잡한 정렬 요구사항이 있는 더 큰 레이아웃을 구현할 때 유용함

- 간단한 레이아웃을 만드는 경우 Column & Row & Box 사용하기를 권장함

- Xml에서 플랫 View 계층 구조를 갖는 콘스트레이아웃의 특징은 Compose는 이미 깊은 레이아웃 계층 구조를 효율적으로 처리할 수 있기 때문에 Compose에서 콘스트레이아웃의 장점이 아님

Compose의 ConstraintLayout 사용방법

(1) 참조는 createRefs() ,createRefFor()를 사용하여 생성 ConstraintLayout의 각 Composable에는 연결된 참조가 필수

(2) 제약 조건은 constrainAs() Modifiers를 사용하여 제공함 이 수정자는 참조를 매개변수로 사용하고 람다에 제약 조건을 지정할 수 있게함.

(3) 제약 조건은 linkTo() 또는 다른 메서드를 사용하여 지정함

(4) parent는 ConstraintLayout 컴포저블 자체에 대한 제약 조건을 지정하는 데 사용할 수 있는 기존 참조임

예제

 @Composable
    fun ConstraintLayoutContent() {
        ConstraintLayout {

            // 1. 참조 생성
            val (button, text) = createRefs()

            Button(onClick = {/*아무말*/ },
                //2. constrainAs Modifier를 사용해서 제약조건을 걸 환경을 제공 시킴
                modifier = Modifier.constrainAs(button) {
                    //3.linkTo 함수로 실제 제약조건을 구체적으로 걸어줌
                    top.linkTo(parent.top, margin = 16.dp)
                }) {
                Text("Button")
            }
                //위의 2~3과 같은 내용
            Text("Text",modifier = Modifier.constrainAs(text){
                top.linkTo(button.bottom, margin = 8.dp)
            })
        }
    }

- 위 코드 주석을 살펴보시면 상세한 순서를 확인할 수 있음.

- 위 예제는 제약 조건은 적용되는 Composable 의 수정자와 함께 인라인으로 지정

결과

분리된 API

기본적으로 제약 조건은 적용되는 Composable 의 수정자와 함께 인라인으로 지정함

하지만 제약 조건이 적용되는 레이아웃에서 제약 조건을 분리하는 것이 더 좋은 상황이 있음

예를 들어 화면 구성을 기반으로 제약 조건을 변경하거나

두 제약 조건 세트 사이에 애니메이션을 적용하는 경우 등등 존재함

이 같은 경우에는 ConstraintLayout을 서로 다른 방식으로 사용할 수 있습니다.

(1) ConstraintSet을 파라미터로 ConstraintLayout에 전달함

(2) layoutId Modifier를 사용하여 ConstraintSet에 생성된 참조를 Composable에 할당함

//ConstraintSet을 리턴하는 함수  
    private fun decoupledConstraints(margin: Dp): ConstraintSet {
        return ConstraintSet {
            val button = createRefFor("button")
            val text = createRefFor("text")

            constrain(button) {
                top.linkTo(parent.top, margin)
            }
            constrain(text) {
                top.linkTo(button.bottom, margin)
            }
        }
    }
    @Preview
    @Composable
    fun DecoupledConstraintLayout() {
        //BoxWithConstraints 를 사용해서 화면의 minWidth를 참고 
        BoxWithConstraints {
            val constrains = if (minWidth < 600.dp)
                decoupledConstraints(16.dp)
            else
                decoupledConstraints(32.dp)

            ConstraintLayout(constrains) {
                Button(
                    onClick = { /*아무말*/ },
                    modifier = Modifier.layoutId("button")
                ) {
                    Text("button")
                }

                Text("Text",Modifier.layoutId("text") )
            }


        }
    }

-위 예제대로 라면 제약 조건을 변경해야 할 때 다른 ConstraintSet을 전달하거나 수정하면 됨

2. Custom Layout

Compose 에서 UI를 그리는 순서

(1) Compose에서 UI 요소는 호출될 때 UI 요소를 내보내는 Composable 함수로 표시

(2) 화면에 렌더링되는 UI 트리에 추가됨

(각 UI 요소에는 하나의 상위 요소와 여러 개의 하위 요소가 있을 수 있음)

(3) 각 요소는 (x, y) 위치로 지정된 상위 요소 내에 배치되며 width 및 height로 크기가 지정됨

설명

상위 요소는 하위 요소의 제약조건을 정의합니다.

제약 조건은 요소의 최소/최대 width 및 height를 제한 합니다.

요소에 하위 요소가 있을때, 각 하위요소를 측정해서 요소의 크기를 결정할 수 있습니다.

Compose UI는 다중 패스 측정을 허용하지 않습니다.

(단일 패스 측정은 성능 측면에서 효율적이므로 Compose가 깊은 UI 트리를 효율적으로 처리할 수 있음)

즉, 레이아웃 요소가 다른 측정 구성을 시도하기 위해 하위 요소를 두 번 이상 측정할 수 없다는걸 뜻합니다.

(단일 패스 측정 하기전에 정보가 필요하다면 맨 아래에 설명할 내장 기능 측정을 참고하면 됩니다.)

(1) Layout Modifier 사용

fun Modifier.customLayoutModifier(...) =
    this.layout { measurable, constraints ->
        ...
    })

- layout modifier 를 사용하여 요소가 측정되고 배치되는 방식을 수정할 수 있음.

- Layout은 람다

- layout modifier 는 호출하는 Composable만 변경함

- 파라미터에 측정할 수 있는 요소(measurable로 전달됨) 및 이 Composable의 수신된 제약 조건(constraints로 전달됨)이 포함

layout Modifier를 커스텀해서

화면에 Text를 표시하고 텍스트 첫 줄의 상단에서 기준선까지의 거리를 제어해 보겠습니다.

예제

fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)


    check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
    val firstBaseline = placeable[FirstBaseline]

    val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
    val height = placeable.height + placeableY
    layout(placeable.width, height) {
   
        placeable.placeRelative(0, placeableY)
    }
}

예제설명

(1) Modifier의 확장함수

(2) measurable.measure(constraints)를 호출하여 측정 가능한 매개변수로 표시되는 Text 를 측정

(3) layout(width, height)로 Composable의 크기를 지정합니다.

(4) placeable.place(x, y)로 화면에 래핑된 요소를 배치함

(y 위치는 텍스트의 첫 번째 기준선 위치인 상단 패딩에 상응함)

실제 사용

    @Preview
    @Composable
    fun TextWithPaddingToBaselinePreview() {
            Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
    }
    @Preview
    @Composable
    fun TextWithNormalPaddingPreview() {
            Text("Hi there!", Modifier.padding(top = 32.dp))
    }

결과

(2) Layout Composable

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable() () -> Unit
) {
    Layout(
        modifier = modifier,
        children = content
    ) { measurables, constraints ->
        // measure and position children given constraints logic here
    }
}

- 여러 Composable을 측정하고 배치하려면 Layout Composable를 사용해야함

- 하위 요소를 수동으로 측정하고 배치할 수 있음.

( Column 및 Row와 같은 모든 상위 수준 레이아웃은 Layout 컴포저블을 사용하여 빌드됩니다.)

참고: 기존 View System에서 맞춤 레이아웃을 생성하려면 ViewGroup을 확장하고 측정 및 레이아웃 함수를 구현해야하는것과 달리 Compose에서는 Layout Composable을 사용하여 함수를 작성하기만 하면 됩니다.

예제

  @Composable
    fun MyBasicColumn(
        modifier: Modifier = Modifier,
        content: @Composable() () -> Unit
    ) {
        Layout(content = content, modifier = modifier) { measurables, constraints ->
            val placeable = measurables.map { measurable ->
                measurable.measure(constraints)
            }
            layout(constraints.maxWidth, constraints.maxHeight) {
                var y = 0
                placeable.forEach {
                    it.placeRelative(0, y)
                    y += it.height
                }
            }
        }
    }

예제 설명

- compose layout의 기본 중 하나인 Colum을 직접 만든 코드 입니다.

- 하위 Composable은 (minHeight 제약 조건 없이) Layout 제약 조건에 의해 이전 Composable의 y을 기반으로 배치됩니다.

만든 커스텀 레이아웃 사용예시

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
    MyBasicColumn(modifier.padding(8.dp)) {
        Text("MyBasicColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}

3. 레이아웃 방향

- LocalLayoutDirection Composition 로컬을 변경하여 Composable의 레이아웃 방향을 변경함

- Composable 을 수동으로 배치하는 경우 LayoutDirection은 layout 수정자 또는 Layout 컴포저블의 LayoutScope에 포함되어 있음

- layoutDirection을 사용할 때는 place 를 사용하여 컴포저블을 배치함

- placeRelative 메서드와 달리 place는 레이아웃 방향에 따라 변경되지 않음

4. 내장 측정

- Compose는 한번만 측정하기 때문에 측정하기 전에 하위요소에 관한 정보가 필요한 경우에 내장측정을 사용함

(하위 요소를 두 번 측정하면 런타임 예외가 발생합니다.)

- 하위 요소가 실제로 측정되기 전에 하위 요소를 쿼리할 수 있음

- Composable에 intrinsicWidth 또는 intrinsicHeight를 요청할 수 있음

-> (min|max)IntrinsicWidth, (min|max)IntrinsicHeight

-> 이 높이/너비에서 콘텐츠를 적절하게 그릴 수 있는 최소/최대 너비는 무엇인가?

사용예시

구분선으로 구분된 두 텍스트를 표시하는 Composable 을 만든다고 가정

예제

  @Composable
    fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
        Row(modifier = modifier
            .height(intrinsicSize = IntrinsicSize.Min)
            .padding(2.dp)) {
            Text(
                modifier = Modifier
                    .weight(1f)
                    .padding(start = 4.dp)
                    .wrapContentWidth(Alignment.Start),
                text = text1
            )
            Divider(
                color = Color.Black, modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
            Text(
                modifier = Modifier
                    .weight(1f)
                    .padding(end = 4.dp)
                    .wrapContentWidth(Alignment.End),
                text = text2
            )

        }
    }

예제 설명

- height(IntrinsicSize.Min)는 하위 요소의 크기를 고유한 최소 높이로 강제 지정

(이 기능은 반복적이므로 Row 및 하위 minIntrinsicHeight를 쿼리합니다.)

Row 컴포저블의 minIntrinsicHeight가 하위 요소의 최대 minIntrinsicHeight입니다.

제약 조건이 지정되지 않은 경우 공간을 차지하지 않으므로 Divider element'sminIntrinsicHeight는 0이고 Text minIntrinsicHeight는 특정 width가 지정된 경우 텍스트의 높이입니다.

따라서 Row 요소의 height 제약 조건은 Text의 최대 minIntrinsicHeight입니다.

그런 다음 Divider가 height를 Row가 지정한 height 제약 조건으로 확장합니다.

결과

5.최종정리

-컴포즈에서 컨스트레이아웃 사용가능

-컴포즈에서 컨스트레이아웃을 사용하려면 연결된 참조를 만들고 제약 연결해야함

-컴포즈에서 컨스르레이아웃의 제약조건을 constaintSet으로 변경하거나 쉽게 갈아끼울 수 있음

-커스텀 레이아웃은 Layout Modifier 를 사용하거나 (한개의 Composable만 적용)

Layout Composable(여러가지 Composable을 적용할 수 있음) 를 사용하면 됨

-컴포즈는 UI의 요소를 측정할때 단 한번만 측정을 함

-내장 측정은 UI 요소를 측정하기 전에 미리 쿼리해서 사용할 수 있음

이상 Compose Layout in compose 문서 정리 마무리 입니다.

알면 알아갈수록 선언형 프로그래밍의 간단한 사용방식과 직관적인 문법에 감탄이 나옵니다. 얼른 스테이블이 되길 기다립니다.

이전 Compose 정리

안드로이드 개발 (8) Compose 이해 정리

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

gift123.tistory.com

안드로이드 개발 (11) Compose Side-effects

gift123.tistory.com

https://developer.android.com/jetpack/compose/gestures?hl=en#scroll-modifiers

안드로이드 개발 (13) Layout in Compose 1편

gift123.tistory.com

안드로이드 개발 (13) Layout in Compose 1편

SEOBI서비 — Mon, 14 Jun 2021 18:49:46 +0900

지금까지 Compose에 대해 composable 라이프사이클, Compose 내부흐름 , Composition, recompostion, Sdie-effects 활용방법에 대한 원론 방법에 알았다면 이제 실질적으로 Compose로 Layout을 어떻게 구성하는지에 대해 공부를 해봤습니다.

0. 개요

- Composable 함수를 통해서 여러 UI요소들을 만들 수 있음

- 하지만 UI요소들에 대한 정렬 기준이 없다면 아래와 같이 생성됨

예제.

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}

결과.

레이아웃이 없으면 위와같이 UI요소를 여러개 사용할 때 나오기 때문에 필수로 있어야함

1. 기본 레이아웃

기본적으로 사용되는 레이아웃은 3가지가 있습니다. Column , Row, Box

1) Colum, Row

Colum 은 수직방향으로 UI를 정렬 (리니어레이아웃의 수직 모드와 흡사함)

Row 는 수평방향으로 UI를 정렬

예제.

    @Composable
    private fun UserData() {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Image(
                painter = painterResource(id = R.drawable.header),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .padding(8.dp,12.dp,8.dp,12.dp)
                    .size(44.dp)
                    .clip(shape = CircleShape)
            )
            Column {
                Text("name")
                Text(
                    "lastSeenOnline",
                    Modifier.padding(0.dp, 0.dp, 8.dp, 0.dp)
                )
            }
        }
    }

결과.

Row와 Colum을 조합해서 위 같은 UI를 요소를 만들 수 있습니다.

2) Box

Box는 UI요소를 다른 요소위에 배치가 가능함 (FrameLayout과 흡사하다.)

예제.

    @Composable
    fun AlignInRow() {
        Row(
            modifier = Modifier
                .size(150.dp)
                .background(Color.Yellow),
            horizontalArrangement = Arrangement.End,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                Modifier
                    .size(50.dp)
                    .background(Color.Red)
            )

            Box(
                Modifier
                    .size(50.dp)
                    .background(Color.Green),
                contentAlignment = Alignment.Center
            ) {
                Box(
                    Modifier
                        .size(30.dp)
                        .background(Color.Blue)
                )
            }

        }
    }

- 겹쳐서 사용이 가능하다.

결과.

- Compose는 중첩된 레이아웃을 효율적으로 처리

- 기존 XML으로 중첩을 그리는것을 권장하지 않는것과 달리 Compose는 중첩된 레이아웃을 사용해도 성능상 크게 문제가 없음

기본 레이아웃을 봤을때 리니어 레이아웃의 수직, 수평과 프레임 레이아웃으로 만드는듯한 느낌이 날거같습니다.

기존 오버드로우를 피하기 위해서 XML에서 컨스트레이아웃 사용을 권장했던 것과 달리 코드로 가로 세로 중첩 이 3가지 모드로 UI 정렬 규칙을 정하고 빠른 시간안에 UI요소들을 만들겁니다.

2. Modifiers (수정자)

1) 수정자 특징

위 예제들에서 이미 사용했던 Modifier 에 관한 설명입니다.

-Modifiers는 Kotlin 객체

-Modifier.함수()로 사용

-Modifiers를 통해 다음과 같은 작업들을 할 수 있음

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

예제.

  @Composable
    fun ArtistCard(
        onClick: () -> Unit
    ) {
        val padding = 16.dp
        Column(
            Modifier
                .clickable(onClick = onClick)
                .padding(padding)
                .fillMaxWidth()
        ) {
        //userData()는 위에 만들어둔 예제
            UserData()
            Spacer(Modifier.size(padding))

            Card(elevation = 4.dp) {
                Image(
                    painter = painterResource(id = R.drawable.header),
                    contentDescription = null,
                    modifier = Modifier.fillMaxWidth(),
                    contentScale = ContentScale.Crop

                )
            }
        }
    }

- 위 예제를 보면 Colum, Spacer, Image 인자로 Modifier를 사용해서 추가적인 속성들을 정의를 한 것을 볼 수 있습니다.

결과

*Modifiers의 장점

- Modifiers는 때로는 범위에 따라 다르므로 유형 안전성을 제공

- 특정 레이아웃에 사용 및 적용이 가능한 요소를 찾고 이해를 도와줌

- XML 레이아웃을 사용하면 특정 레이아웃 속성이 지정된 뷰에 적용 가능한지를 확인하기 어려운데,

Modifiers는 판별이 가능함

** Modifiers는 순서가 매우 중요함 **

예제1.

 @Composable
    fun ArtistCard(
        onClick: () -> Unit
    ) {
        val padding = 16.dp
        Column(
            Modifier
                .clickable(onClick = onClick)
                .padding(padding)
                .fillMaxWidth()
        ) {
      .....
        }
    }

-Colum인자로 Modifier의 함수 체어이닝 순서가 (1) clickable() (2) padding() 순서일 때 clickable이 먼저 적용됨 그래서 아래와 같은 결과가 나옴

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

click시 repple영역이 padding 적용전의 범위로 지정됨

예제2.

 @Composable
    fun ArtistCard(
        onClick: () -> Unit
    ) {
        val padding = 16.dp
        Column(
            Modifier
                .padding(padding)
                .clickable(onClick = onClick)
                .fillMaxWidth()
        ) {
      .....
        }
    }

-이전과 달리 순서를 바꾸면 (1) padding() (2) clickable() 순서일 때 padding이 먼저 적용되고 clickable이 적용됨

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

뷰를 click 시 padding이 적용된 영역까지만 repple이 생김

2) Modifiers 명시적인 순서에 대한 안드로이드 문서 설명

Note: The explicit order helps you to reason about how different modifiers will interact.

Compare this to the view-based system where you had to learn the box model, that margins applied "outside" the element but padding "inside" it, and a background element would be sized accordingly.

The modifier design makes this kind of behavior explicit and predictable, and gives you more control to achieve the exact behavior you want.

It also explains why there is not a margin modifier but only a padding one.

"명시적인 순서는 다양한 수정자가 상호작용하는 방식을 추론하는 데 도움이 됩니다.

박스 모델을 학습해야 했던 뷰 기반 시스템과 이를 비교해 보세요.

박스 모델의 경우 여백은 요소 '외부'에 적용되었지만 패딩은 '내부'에 적용되었으며 백그라운드 요소는 그에 따라 크기가 조정되었습니다.

수정자 디자인을 사용하면 이러한 종류의 동작이 명확해지고 예측 가능하게 되며 원하는 동작을 정확하게 달성할 수 있도록 추가적으로 제어할 수 있습니다.

padding 수정자를 제외한 여백 수정자가 없는 이유도 설명할 수 있습니다."

3) 이외의 modifiers 정보

(1) 지정한 크기가 레이아웃의 상위 요소를 무시하고

Composable의 크기를 고정해야 하는 경우 requiredSize 수정자를 사용

예제.

@Composable
fun FixedSizeComposable() {
    Box(Modifier.size(90.dp, 150.dp).background(Color.Green)) {
        Box(Modifier.requiredSize(100.dp, 100.dp).background(Color.Red))
    }
}

- 가장 하위에 있는 Box가 상위 Box 90.dp 크기를 무시하고 100.dp로 설정됩니다.

(2) 레이아웃의 상위 요소 크기에 상위요소가 허용하는 만큼 하위요소가 꽉 채우고 싶은 경우

fillMaxSize(), fillMaxWidth(), fillMaxHeight() 등등을 골라서 사용

예제.

@Composable
fun FillSizeComposable() {
    Box(Modifier.background(Color.Green).size(50.dp).padding(10.dp)) {
        Box(Modifier.background(Color.Blue).fillMaxSize())
    }
}

-fillMaxSize() 사용으로 상위 UI요소 만큼 하위 UI요소의 크기가 지정됨

-padding을 넣엇기 때문에 패딩이 10dp가 적용됨

(3) 하위 레이아웃을 상위 요소와 동일한 크기로 설정하려면 matchParentSize 수정자를 사용합니다.

@Preview
    @Composable
    fun MatchParentSizeComposable() {
        Box {
            Spacer(
                Modifier
                    .matchParentSize()
                    .background(Color.Green))
            Text("Hello World")
        }
    }

(4) 레이아웃 상단에서 기준선까지 특정 거리가 유지되도록 패딩을 추가하려면 paddingFromBaseline 수정자를 사용

@Composable
fun TextWithPaddingFromBaseline() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hi there!", Modifier.paddingFromBaseline(top = 32.dp))
    }
}

4) Offset

- 원래 위치를 기준으로 레이아웃을 배치해줌

- offset 수정자를 추가해서 x축 , y축을 설정해서 사용함

- 양수 혹은 음수일 수 있음

- offset의 측정값은 변경되지 않음

- offset 수정자는 레이아웃 방향에 따라 가로로 적용

- LTR 컨텍스트에서 양수 offset은 요소를 오른쪽으로 이동시킴

- RTL 컨텍스트에서는 요소를 오른쪽으로 이동합니다.

- aboluteOffset은 레이아웃 방향 상관없이 항상 오른쪽으로 이동시킴

예제.

@Composable
fun OffsetComposable() {
    Box(Modifier.background(Color.Yellow).size(width = 150.dp, height = 70.dp)) {
        Text(
            "Layout offset modifier sample",
            Modifier.offset(x = 15.dp, y = 20.dp)
        )
    }
}

결과.

3. 스크롤 가능한 레이아웃

동작 | Jetpack Compose | Android Developers

Compose는 사용자 상호작용에서 생성된 동작을 감지하는 데 도움이 되는 다양한 API를 제공합니다. 이 API는 광범위하게 사용됩니다. 그중 일부는 상위 수준이며 가장 일반적으로 사용되는 동작을

developer.android.com

참고 (블로그 포스팅 예정)

4. 반응형 레이아웃

Compose에서 제공하는 즉시 사용 가능한 몇 가지 메커니즘으로

composable 레이아웃을 다양한 화면 구성에 따라 쉽게 조정할 수 있음

1) Row 및 Column의 가중치 수정자

- Composable 크기를 상위 요소 내에서 유연하게 설정할 수 있습니다.

예제.

@Composable
fun FlexibleComposable() {
    Row(Modifier.width(210.dp)) {
        Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))
        Box(Modifier.weight(1f).height(50.dp).background(Color.Red))
    }
}

- 첫 번째 상자의 weight가 두 번째 상자의 두 배로 지정되므로 너비가 두 배로 지정

- 첫 번째 Box의 너비는 140.dp, 두 번째는70.dp

2) 제약 조건

- 상위 요소의 제약 조건에 따라 레이아웃을 디자인하려면 BoxWithConstraints를 사용

- 측정 제약조건은 콘텐츠 람다의 범위에서 확인 가능

- 측정 제약 조건을 사용하여 다양한 화면 구성에 따라 다양한 레이아웃을 구성이 가능

@Composable
    fun WithConstraintsComposable() {
        BoxWithConstraints {
            Text(
                "My minHeight is $maxHeight while my maxWidth is $maxWidth",
                fontSize = 24.sp
            )
        }
    }

- 최대 dp를 알수도 있고, 제약 관련 정보들이 있다.

5. 슬롯 기반 레이아웃

UI를 쉽게 빌드할 수 있도록 머티리얼 디자인 및 androidx.compose.material:material 종속 항목을 기반으로

한 다양한 Composable을 제공합니다.

- Drawer, FloatingActionButton 및 TopAppBar와 같은 요소가 모두 제공

-머티리얼 구성요소는 Composable 위에 맞춤설정 레이어를 배치하기 위해 도입한 패턴인 슬롯 API를 많이 사용

(하위 요소의 모든 매개변수를 노출하지 않고 하위 요소를 구성할 수 있어서 유연성이 향상됨)

-슬롯은 개발자가 원하는 대로 채울 수 있도록 UI에 빈 공간을 남겨둠

    @Composable
    fun HomeScreen(/*...*/) {
        Scaffold(
            drawerContent = { Text("drawer example") },
            topBar = {
                TopAppBar(
                    title = { Text("Scaffold 예제", textAlign = TextAlign.Center) },
                    backgroundColor = Color.Gray
                )
            },
            content = { Text(text = "슬롯 API 테스트") }
        )
    }

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

- 아주 쉽게 AppBar, drawer 를 만들수 있음

- 기존 XML 에서 만들던 방식에 비해 상당히 적은 노력이 들어간다는것이 아주 매력적임

6. 정리

- Colum, Row, Box가 기본 레이아웃으로 사용됨

- 중첩 레이아웃으로 인한 성능 저하를 걱정하지 않아도 됨

- Modifiers로 Composable의 속성들을 바꿀 수 있음 각종 확장 기능들로 다양하게 활용가능

- Modifiers는 순서가 매우 중요 명시적인 순서를 뛰며 순서에 따라 결과가 다름

- Offset으로 기본 위치로 부터 절대 측정값을 사용할 수 있음

- 반응형 레이아웃으로 유연한 UI그리기 가능 (가중치 적용, 제약조건 이용)

- 슬롯 기반 레이아웃 지원 API

이전 Compose 정리

안드로이드 개발 (8) Compose 이해 정리

gift123.tistory.com

안드로이드 개발 (9) Compose 상태 관리

gift123.tistory.com

안드로이드 개발 (10) Compose Composable Lifecycle

gift123.tistory.com