[And] Flexbox 라이브러리로 가변적인 UI 구현 - 라이브러리 추천

Textview의 텍스트의 길이가 길어짐에 따라 자동적으로 줄바꿈 되듯이 ViewGroup(Linear, relative, constraint)안에 View들이 차지하는 영역에 따라 줄바꿈 해주는 기능은 기본적으로 ViewGroup으로 구현하긴 어려움이 있습니다.

더군다나 안드로이드의 스크린 사이즈는 정말 많은 종류가 있기 때문에 사실상 완벽하게 모두 대응하긴 어렵기 때문에 다른 개발자들이 미리 만들어놓은 라이브러리를 사용해서 빠르게 개발하는것도 좋은 방법중 하나라고 생각합니다.

>> 적용한 사례 

Flexbox Ui를 사용한 예로 제가 출시한 '식물일기'란 앱에서 할일을 등록하는 화면입니다.

상단에 할일을 선택하면 아래에 카드형태로 설정할 수 있는 화면이 추가되는 구조로 상단에 할일은 총 4개이고 디바이스에 따라 한 줄에 보이거나 두줄로 보입니다. 그리고 마지막에 위치한 할일을 클릭했을때 할일이 사라지면서 아래 카드뷰가 당겨지는걸 볼 수 있습니다. 

이처럼 유연한 View를 구현할때 사용하면 좋습니다. 

>> 사용 방법

build.gradle(app)

    implementation 'com.google.android:flexbox:2.0.1'

xml

  <com.google.android.flexbox.FlexboxLayout
            app:flexWrap="wrap"
            app:alignItems="stretch"
            app:alignContent="stretch"
            android:layout_width="match_parent"
            app:layout_constraintTop_toBottomOf="@+id/ctTop"
            android:layout_height="wrap_content">
			....

    </com.google.android.flexbox.FlexboxLayout>

각 flexWrap, alignItems에대한 설명은 공식 문서에 예시를 확인해서 참고해주세요. 자세하게 잘 되어 있습니다.