Android Jetpack Compose UI

    [Android Compose] 1. DropDownMenu 이용해 펼쳐지는 메뉴 만들기

    DropDownMenu란? DropDownMenu는 버튼을 눌렀을 때 선택지를 보여주는 메뉴 아이템이다. 동작은 그림1과 같다. Compose의 DropDownMenu Compose의 Material package에서는 compose.ui.window 패키지의 Popup을 활용해서 DropDownMenu를 만드는 것을 지원한다. Popup을 활용함으로써 부모 Composable의 제약사항(크기 등)에 종속되지 않는 컴포저블을 만들 수 있다. 또한 Material package에서는 미리 디자인된 컴포저블인 DropDownMenuItem 또한 지원한다. DropDownMenuItem을 이용하면 DropDownMenu에 들어갈 아이템들을 쉽게 만들 수 있다. 우리는 이번 글에서 DropDownMenu와 Dr..

    [Android Button Surface] 2. Button에 색상(colors) 설정하기 : background color, content color

    Button을 위한 Color 객체 접근 방법 Button에 색상을 설정하기 위해서는 ButtonColors interface를 구현하는 객체를 넣어주어야 한다. fun Button( .. colors: ButtonColors, .. ) 이 ButtonColors를 구현하는 것은 DefaultButtonColors class인데 이는 private으로 설정되어 외부에서 접근이 불가능하다. private class DefaultButtonColors( private val backgroundColor: Color, private val contentColor: Color, private val disabledBackgroundColor: Color, private val disabledContentColo..

    [Compose Button] 2. Button에 padding을 만드는 방법 : contentPadding

    Button의 contentPadding 이해하기 Button의 contentPadding 프로퍼티는 Row영역에 padding을 준다. Button의 contentPadding에 들어가는 값은 PaddingValues 인터페이스를 상속받은 객체이다. contentPadding: PaddingValues = ButtonDefaults.ContentPadding contentPadding을 만드는 방법 우리는 Compose에서 제공해주는 총 3가지 함수를 이용해 PaddingValues를 상속받는 PaddingValuesImpl 객체를 만들어낼 수 있다. 상하좌우에 모두 같은 크기의 padding을 주는 방법 fun PaddingValues(all: Dp): PaddingValues = PaddingVal..

    [Compose Button] 1. Button에 Custom하게 Content 배치하기 : content

    Button의 content와 content padding Button은 Surface 내부에 Row 블록을 가지고 있고, Row에 배치되는 컴포저블인 content를 가지고 있어 내부에 컴포저블을 배치할 수 있도록 해준다. Row의 padding은 Button의 contentPadding 값으로 설정된다. 이번 시간에는 content만을 다룬다. 즉, 이를 시각적으로 표현하면 다음과 같다. *내부 코드는 접은 글을 펼쳐서 확인 가능하다. 더보기 @Composable fun Button( .. contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit ) { .. Surface(..

    [Compose Button] Button 구성 살펴보기

    Button의 구성요소 Compose Button은 다음 10가지의 속성을 설정할 수 있다. @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = ButtonDefaults.elevation(), shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = Butt..