Android Jetpack Compose UI/Compose UIs
[Jetpack Compose] ViewPager Tab Layout에 연결하기 : 스와이프해 탭 바꾸도록 만들기
Tab과 ViewPager은 언제 사용되는가? Swipe해서 탭이 바뀌는 UI는 많은 앱에 쓰이며, 여러 페이지를 탭으로 구성해 사용 복잡도를 줄이기 위해 사용한다. 그림1과 같은 동작으로 Tab을 직접 클릭해서 Page를 이동할 수도 있으며, Swipe 동작을 통해 페이지를 이동할 수도 있다. 오늘은 이러한 UI를 만드는 방법에 대해 알아보고자 한다. 위 페이지를 만들기 위해서는 다음 단계들을 거쳐야 한다. Tab + ViewPager 만들기 위한 라이브러리 추가하기 Tab 목록 만들기 PagerState 선언하기 CoroutineScope 선언하기 TabRow 만들기 HorizontalPager 만들기 Compose로 Tab과 ViewPager 만들기 1. Tab + ViewPager 만들기 위한 ..
[Android Compose] ViewPager 사용해 Swipe 되는 화면 만들기 : HorizontalPager 사용하기
Compose에서 ViewPager 만들기 Compose에서 ViewPager을 만들기 위해서는 Accompanist에서 제공하는 HorizontalPager을 사용해야 한다. Accompanist는 Jetpack Compose에서 자주 사용되는 View들을 사용하기 편하게 만들어놓은 라이브러리로 기존 안드로이에서 제공하던 ViewPager 또한 제공한다. 라이브러리 추가하기 accompanist에서 Pager용 라이브러리를 제공하는데 아래 둘을 앱 수준의 build.gradle에 추가해야 한다. implementation "com.google.accompanist:accompanist-pager:0.20.1" implementation "com.google.accompanist:accompanist-p..
[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..