Android Jetpack Compose UI

    [Android Button 심화] 1. Compose의 Button, Text Button, Outlined Button 의 차이 살펴보기

    Compose에서 지원하는 기본 Button의 종류 Compose에서는 3가지의 기본 Button을 지원한다. Button TextButton OutlinedButton 이 세가지 버튼의 차이는 그림1과 같다. 그림1과 같이 만들려면 다음의 코드를 이용해 만들면 된다. @Composable fun KotlinWorldButton() { Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) { Button(onClick = {}, modifier = Modifier.wrapContentSize()) { Text(text = "Button KotlinWorld") } Out..

    [Android Dialog] 2. Compose AlertDialog를 이용해 다이얼로그 만들기

    앞 글: [Android Dialog] 1. Compose Dialog를 이용해 커스텀 다이얼로그 만들기 앞의 글에서 Dialog 객체는 커스텀한 content를 직접 모두 그려서 만들었다. 하지만 매번 이렇게 모든 Dialog를 커스텀 하는 것은 비효율적이다. 어차피 다이얼로그에서 우리가 필요로 하는 기능은 대부분 획일화 되어있고, 사용자가 사용하기 편한 UI/UX는 정해져 있기 때문이다. 예를 들어 메모장 앱에서 저장된 메모를 삭제하려고 하는 경우 다음과 같이 만들 수 있다. 이러한 다이얼로그를 만들기 위해 모두 다 Custom하게 만드는 것은 개발 리소스의 낭비이고, 가독성을 위해서도 규격화된 다이얼로그인 AlertDialog를 쓰는 것이 좋다. 아래에서 AlertDialog를 이용해 위 다이얼로그..

    [Android Dialog] 1. Compose Dialog를 이용해 커스텀 다이얼로그 만들기

    Compose에서 사용할 수 있는 다이얼로그의 종류 Compose에서는 두가지 종류의 Dialog를 사용할 수 있다. Dialog : 커스텀한 다이얼로그를 생성 AlertDialog : 미리 정의된 스타일에 따라 Dialog를 생성 Dialog를 이용하면 커스텀한 다이얼로그를 생성할 수 있으며, AlertDialog 함수는 정해진 스타일에 따라 Dialog를 생성한다. 둘 모두 장단점이 있다. Dialog를 사용하면 다이얼로그를 만드는데 시간이 오래 걸리지만 필요한 디자인을 충분히 적용할 수 있다. AlertDialog를 사용하면 미리 정의되어 있는 스타일을 사용할 수 있어 다이얼로그를 만드는데 시간이 적게 걸리고 코드를 직관적으로 만들 수 있지만 정해진 스타일대로만 정의가 가능하다. AlertDialo..

    [Compose Text] buildAnnotatedString과 withStyle 이용해 Text 스타일링 하기

    buildAnnotatedString이란? buildAnnotatedString은 AnnotatedString 객체를 만드는 inline function이다. inline fun buildAnnotatedString(builder: (Builder).() -> Unit): AnnotatedString = Builder().apply(builder).toAnnotatedString() buildAnnotatedString을 이용해 만들어진 AnnotatedString은 하나의 Text 안에서 여러 스타일을 적용할 수 있도록 하는 정보를 담은 객체로 AnnotatedString 속에는 텍스트의 스타일에 대한 정보를 담은 text, spanStyles, paragraphStyles, annotations 객체..

    [Compose Text] softWrap 사용해 자동 줄바꿈 설정하기

    softWrap이란? softWrap이란 텍스트의 자동 줄바꿈을 설정하는 파라미터이다. Boolean 값으로 기본 값은 true이다. 따라서 기본 텍스트에서는 자동 줄바꿈이 실행된다. softWrap: Boolean = true softWrap true로 두어 자동 줄바꿈 설정하기 softWrap을 true로 두면 자동 줄바꿈이 실행된다. @Preview(showBackground = true, widthDp = 100, heightDp = 100) @Composable fun KotlinWorldTextSoftWrapTrue() { Column( modifier = Modifier .fillMaxSize() ) { Text( text = "Hello Kotlin", fontSize = 32.sp, so..