앱 UI를 구성하는 TextView, Button 등 컴포넌트 사이사이에는 의도적으로 여백을 넣어요. 붙어 있으면 답답한 느낌을 주고 유저에게 강조하고 싶은 UI가 한눈에 들어오지 않기 때문이겠죠? (개발자의 추측 ㅎ) XML 기반의 Android UI에서는 margin 혹은 padding으로 여백을 구현했었습니다. 그렇다면 새로운 UI Kit인 Compose에서는 어떻게 구현할까요? 바로 Modifier.padding이랑 Space Composable을 사용하면 됩니다 :) Padding, Spacer @Composable fun MyComponent( displayText: String ) { Text( text = displayText, modifier = Modifier.padding(bottom..
안녕하세요 점냥입니다 :) 위 사진은 오래전에 사이드 프로젝트로 진행한 모꼬라는 프로젝트 홈 화면입니다. Compose 처음 접할 당시 마구잡이로 개발했던 프로젝트라서 마음 한편에 아쉬움을 많이 가지고 있었던 프로젝트였죠. 홈 화면은 모꼬 브랜드를 그래픽 아트의 느낌으로 표현했던 Title 영역과 주요 기능인 실시간 검색어 리스트를 보여주는 Content 영역이 존재했어요. 초기 기획과 디자이너는 리스트를 스크롤함에 따라 상단 Title 영역도 같이 접히는 UX를 기대했지만 당시 관련 자료를 찾을 수 없어서 아쉽게도 리스트만 스크롤되는 채로 배포가 되었죠.. 그러다가 최근에 Material에서 제공해 주는 Compose Layout 중에 BackdropScaffold를 알게 되어서 적용해보려고 해요 Ba..
HTML 삽입 미리보기할 수 없는 소스 안녕하세요. 점냥입니다 :) Compose Preview Compose Preview는 Compose로 UI를 구성하면서 앱 설치 없이 바로 UI를 확인하고자 할 때 사용하는 기능이에요. 사실 저는 이제껏 코드를 수정할 때마다 Preview에 실시간으로 반영이 된다고 알고 있었는데요. 찾아보니 String, Dp와 같은 리소스들은 실시간으로 반영이 되지만, 레이아웃 구조와 Composable 수정 등의 변경 사항은 빌드를 해야 한다고 하네요 :) PreviewParameterProvider 사용하여 State 관리하기 @Preview @Composable fun ExpandedNewsResourcePreview() { NiaTheme { Surface { NewsR..
HTML 삽입 미리보기할 수 없는 소스 (2022.09.12 기준) Accompanist Inset 라이브러리는 Deprecated 되었습니다. androidx.compose.foundation에서 관련 기능을 사용해보세요. 안녕하세요. 점냥입니다:) Android에서는 Status Bar, Navigation Bar 등등의 다양한 시스템 UI가 존재합니다. Android 최상위 뷰는 기본적으로 시스템 UI와 겹치지 않도록 InSets Padding이 적용되어 있습니다. 하지만 상태바처럼 시스템 UI 위치에 뷰를 배치하고 경우가 종종 있는 데요. Compose에서는 이를 어떻게 구현할 수 있을 까요? Accompanist Inset Accompanist는 Google에서 Compose에서 사용 가능한 여..
안녕하세요 점냥입니다:) 이번 장에서는 bottom navigation bar를 compose로 어떻게 만들어야 할지 알아봅시다 Bottom Navigation Bar UI with Compose - (1) Unit ) 저희가 작성한 코드처럼 @Composable annotation이 선언되어있는 것을 확인할 수 있습니다. Modifier 등 처음 보는 개념이 등장할 수 있지만 우리가 현재 살펴볼 부분은 content 파라미터입니다 :) @Composable은 함수 또는 람다에도 선언해줄 수 있는데요. content처럼 @Composable 함수의 매개변수로 @Composable 람다를 주입받는 방식을 Slot API라고 부르고 있습니다. Text와 Icon 등을 작은 UI 요소들의 값을 주입받는 방식을..
안녕하세요 점냥입니다. Jetpack Compose는 작년에 stable 버전이 나오기도 했고 최근 Android 개발자 사이에서 큰 화제입니다. 최신 Android Ui Tool Kit인 Compose는 기존 뷰를 그리는 방식과 비교해서 훨씬 더 적은 코드로 재사용성이 높은 UI를 구현할 수 있다고 설명하고 있는데요. 좀 더 자세히 이 부분을 살펴보면서 Compose를 사용하면 어떤 점이 좋은지에 대해 알아봅시다 :) 1) Only Kotlin 안드 입문하시는 분들이 당황하는 이유 중 하나가 XML 언어라고 생각합니다. XML은 속성과 태그로 이루어진 간단한 언어이긴 하지만 또 다른 언어를 배운다는 점에게 부담스러운 요소가 될 수 있습니다. 게다가 android에서는 Ui에 관련된 요소들이 대부분 xm..
안녕하세요 점냥입니다:) Compose의 Text 함수는 텍스트 UI를 구현하는 함수입니다. Compose는 여러 속성을 지정하기 위해 Modifier 객체를 제공해주고 있는데 android:gravity로 지정했던 텍스트 내부 정렬 기능이 없더라고요. 공식문서에도 관련 내용이 없어서 찾아보며 공부한 내용을 정리했습니다. 구현하고자 하는 레이아웃 이번 포스팅에서 구현할 레이아웃은 사진처럼 Text가 양 끝에 정렬된 레이아웃입니다. 기본적으로 제공해주는 Compose 레이아웃 중 순서대로 가로로 정렬되는 Row 레이아웃을 사용하겠습니다. Compose용으로 ConstraintLayout 라이브러리를 제공해주지만 아직 알파버전이기 때문에 제외했습니다. Row 레이아웃 정렬하는 방법 Row 레이아웃의 속성 중..
