Android Jetpack Compose UI

    [Compose Text] 폰트 스타일링 정리 : font size, font style, font weight

    선행지식 [Android Compose Resource] 1. Android Compose에서 FontFamily 만들기. - Text에 Font 적용시키기 [Android Compose Resource] 1. Android Compose에서 FontFamily 만들기. - Text에 Font 적용시키기 FontFamily란? FontFamily란 같은 폰트의 모음으로 같은 폰트에 대해 다양한 스타일(굵기)을 포함하는 번들을 뜻한다. Compose에서 FontFamily 만들기 기존 xml 기반의 안드로에서 리소스 시스템에서는 xml에 kotlinworld.com 폰트 스타일링이란 폰트 스타일링이란 설정된 FontFamily에 대해서 폰트의 사이즈, 스타일(Italic, normal), 굵기(weight..

    [Compose Text] Text Composable의 프로퍼티에 대해 알아보자

    Compose Text 스타일링의 구성 Compose의 Text는 다음 14가지의 속성을 설정할 수 있다. @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: T..

    [Android Compose] 2. offset사용하여 DropDownMenu가 펼쳐지는 위치 조정하기

    DropDownMenu의 위치 조정이 필요한 이유 material package에서 제공되는 DropDownMenu API는 내부에서 DropDownMenuPositionProvider에 의해 자동으로 위치가 조정되어 화면 상에 표시된다. val popupPositionProvider = DropdownMenuPositionProvider( offset, density ) { parentBounds, menuBounds -> transformOriginState.value = calculateTransformOrigin(parentBounds, menuBounds) } 만약 DropDownMenu가 표시될 위치를 조정할 수 없다면 여러 디자인적 요구사항이 반영이 될 수 없을 것이고, DropDown이 어..

    [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..