[Android] TabLayout 너비가 꽉 차지 않는 문제에 관하여

이동현·2020년 7월 11일
0

간단한 TextView, Button, LinearLayout등의 뷰/뷰그룹은 하도 많이 사용하고 사용법도 간단하니 기억에 잘 남지만, RecyclerView, ViewPager같은 경우처럼 조금만 복잡해지면 기억에 남지 않아서 간단한 문제라도 해결이 되었다면 기록을 해두려고 합니다.
지금 작성하는 TabLayout도 처음 사용해보기 때문에 관련 내용을 기록해봅니다.


개요

<com.google.android.material.tabs.TabLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toTopOf="parent">

다음과 같은 TabLayout 구성에는 3개의 TabItem들이 존재합니다. (코드는 생략)

이대로 실행했더니 아래와 같은 결과가 나타났습니다.

제가 원하는 결과는 TabLayout의 TabItem들이 전체 너비의 1/3씩 균등하게 분배되는 것입니다!
따라서, 코드의 수정을 해야 할 필요성을 느꼈습니다.

이 문제는 TabLayout에 대하여 조금만 더 공부했었다면, 그 속성을 이용하는 선에서 해결 가능한 문제였습니다.

아래는 이 문제를 해결함에 있어서의 두 가지 핵심 속성들입니다.

  1. app:tabGravity="center / fill / start"
  2. app:tabMode="fixed / scrollable / auto"

app:tabGravity

속성값으로 center, fill, start를 가집니다.
여러 TabItem들이 존재할 때, Item들의 배열을 어떻게 처리할 것인지에 대한 속성입니다.

이름에서 알 수 있듯,
center값은 중앙으로 모여 정렬됩니다.
fill값은 전체 너비를 일정하게 나누어, 그 값만큼의 너비를 가지도록 정렬합니다.
start값은 시작부터 채워나갑니다.

app:tabMode

속성값으로 fixed, scrollable, auto를 가집니다.
보통, 매우 많은 Item들이 존재할 때 어떤식으로 처리할지에 관한 속성입니다.

fixed값은 한 화면에 모든 Item들을 보여줍니다.
scrollable값은 좌/우로 스크롤 할 수 있도록 만들어줍니다.

문제 해결

저의 문제는 이러한 속성들을 이용하여 간단히 해결할 수 있었습니다.
tabGravity의 값을 fill로 가득 채워주고,
tabMode의 값을 fixed로 설정하면서, 스크린이 작은 사용자의 경우에도 TabItem들을 꽉 채울 수 있도록 설정했습니다.

   <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabGravity="fill"
        app:tabMode="fixed">

profile
영차영차

0개의 댓글