Jetpack Compose

반응형

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

    [Compose Side Effect] rememberCoroutineScope을 이용해 Composable의 생명주기에 맞춰 코루틴 수행하기

    Composable에서 올바른 CoroutineScope을 선택하는 것이 중요한 이유 Composable 내부에서 코루틴을 수행할 경우 Composable에 대한 Recomposition이 일어날 때 정리되어야 하는 Coroutine이 정리가 안된 상태로 계속해서 Coroutine이 쌓일 수 있다. Recomposition은 자주 일어나는 동작이므로 Recomposition마다 Coroutine을 생성하는 것은 위험하며 심할 경우 앱 크래시를 발생시킬 수도 있다. 따라서 Composable에서 Coroutine을 생성한다면 Recomposition이 일어날 때 취소되어야 한다(꼭 그렇지 않은 경우도 있지만 그래야 하는 경우가 대부분이다). Compose는 이를 위해 Composable의 Lifecycle..

    [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 Row] horizontal arrangement 사용해 배치하기

    Row의 Arrangement Row는 수평방향으로 자식 컴포넌트들을 순서대로 배치하는 레이아웃이다. 이때 어떤 방식으로 자식 컴포넌트들을 배치할지를 Row의 horizontalArrangement가 결정한다. 예를 들어 3개의 Text를 row의 내부에 배치한다고 할 때 첫 번째 컴포넌트는 왼쪽에 붙여서, 두 번째는 정중앙에, 세 번째는 오른쪽에 붙여서 배치하고 싶다고 해보자. 이때 직접 컴포넌트의 위치를 지정해주기보다. Arrangement.SpaceBetween을 쓰면 한 번에 해결된다. @Preview(showBackground = true, widthDp = 200, heightDp = 100) @Composable fun KotlinWorldRow(){ Row(horizontalArrangem..

    [Compose Column] horizontal alignment 사용해 정렬하기

    Alignment란? Jetpack Compose의 Alignment란 View의 정렬을 지원해주는 변수이다. 즉, 모든 View가 동일한 x축 혹은 y축을 기준으로 정렬되도록 만드는 변수이다. Column의 Alignment Column의 자식 View들은 수직으로 배치되므로 수평으로 정렬(horizontalAlignemnt)이 지원되는데 수평 정렬은 모든 자식 View들의 x위치가 동일하도록 만들어주는 정렬이다. 따라서 같은 y축 상에서 정렬된다(x값 동일하기 때문). Column에서 사용할 수 있는 Alignment의 종류 Column에서는 Alignment.Horizontal을 상속받는 3가지 Alignment를 사용할 수 있다. Alignment.Start (왼쪽 정렬) Alignment.Cen..

    [Compose Column] vertical arrangement 사용해 배치하기

    Arrangement 란? Jetpack Compose의 Arrangement란 View의 배치(Arrangement)을 지원해주는 변수이다. Column에서는 Arrangement.Vertical을 상속받는 아래 6가지 Arrangement를 사용할 수 있다. Arrangement.Top Arrangement.Center Arrangement.Bottom Arrangement.SpaceBetween Arrangement.SpaceAround Arrangement.SpaceEvenly 아래에서 각각이 어떻게 동작하는지 살펴보자. ColumnArrangement 살펴보기 이 옵션들이 어떻게 보이는지 확인하기 위해 다음과 같이 Preview를 정의한다. @Preview(showBackground = true..

    Android Jetpack Compose 정리

    Jetpack Compose의 등장과 중요성 Jetpack Compose는 Android의 차세대 UI라이브러리로 직관적인 코드를 통해 UI를 그려줄 수 있다는 점과, Stateless한 UI를 그려줄 수 있다는 점을 특징으로 가지고 있다. Google에서는 Kotlin이 안드로이드의 공식 언어로 지정되었을 때만큼 Compose를 밀어주고 있으며 이후 모든 안드로이드의 UI 코드는 Compose로 작성될 것이 명확해 보인다. 하지만 Compose는 나온지 오랜 시간이 되지 않아 양질의 자료를 찾아보기가 힘들다. 영문으로도 양질의 자료를 찾아보기 힘든데, 한글로 된 양질의 자료는 없다시피 하다. 현재 구글에 검색하면 나오는 자료들은 모두 Codelab을 따라하는 문서들 뿐 Compose에 대해 자세히 다룬..

    [Compose Layout] 6. ConstraintLayout 사용법 정리

    ConstraintLayout 이란? ConstraintLayout이란 View간의 상대적 제약조건(Constraint)을 만들 수 있는 Layout을 뜻한다. 상대적 제약조건이란 특정 뷰가 다른 View에 대해 위(Top), 아래(Bottom), 왼쪽(Start), 오른쪽(End)에 위치할 수 있는지를 정의한 조건을 뜻한다. Compose 이전 안드로이드에서는 ConstraintLayout을 쓰는 것이 복잡한 View를 성능 저하 없이 만들 수 있는 최선의 방법이었으므로 권장되었는데, Compose에서는 코드의 가독성이 아닌이상 굳이 ConstraintLayout을 쓰는 것이 권장되지 않는다. 이에 대해서 자세히 알고 싶으면 아래 글을 참조 하길 바란다. [Android] ConstraintLayout..

    [Compose] Compose에서 ConstraintLayout을 쓰는 것이 권장 사항이 아닌 이유

    ConstraintLayout이란? ConstraintLayout이란 Layout속의 View들간에 제약조건(Constraints)을 설정함으로써 복잡한 뷰를 만들 수 있도록 설계된 레이아웃이다. 과거 xml에서는 Constraint Layout을 쓰는 것이 권장되었지만, Compose에서는 코드 가독성에 도움이 되는 것이 아니면 권장되지 않는다. 아래에서 이유를 알아보자. 왜 ConstraintLayout을 쓰는 것이 이점이 없어졌을가? 성능상 이점이 없어졌다. 기존 xml로 View를 그릴 때 ConstraintLayout을 이용해 View들간 제약조건을 설정하는 것은 복잡한 레이아웃을 그리기 위해 매우 유용하고 성능면에서 효율적인 방법이었다. 이유는 xml상에서 LinearLayout, Relati..

반응형