TabLayout에서 Tab 간격 설정 방법(예제 설명)

TabLayout과 ViewPager를 함께 사용하면 여러 가지 편리함이 있습니다. 그러나 TabLayout은 여전히 많은 비판을 받고 있습니다.

여기서는 탭 간의 간격 설정에 대해 설명하겠습니다. 인터넷에서 많은 방법을 찾았지만, padding과 margin은 모두 무용지대였습니다. TabLayout을 사용하고 싶다면, 자신의 방법을 생각해야 합니다. 결과는 다음과 같습니다:

이제 이 부분은 설정이 어려워서, 배경에 직접 작업을 해보겠습니다. 레이아웃 코드는 다음과 같습니다:

<android.support.design.widget.TabLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@"+id/tl_download_tabs"
  android:layout_width="wrap_content"
  android:layout_height=""30dp"
  android:layout_marginTop=""10dp"
  android:layout_gravity="center_horizontal"
  android:overScrollMode="never"
  app:tabMode="fixed"
  app:tabPaddingStart=""30dp"
  app:tabPaddingEnd=""30dp"
  app:tabIndicatorHeight="0dp"
  app:tabBackground="@drawable"/download_tab_bg_selector"
  app:tabSelectedTextColor="#000000"
  app:tabTextColor="#ffffff"/>

2. 중요한 부분은 배경 selector에 있습니다. 다음과 같은 코드입니다:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_selected="true">
  <!--<shape>
   <solid android:color="#ffffff"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->
  <!--TabLayout 내부의 탭 간격을 설정하기 위해 다른 설정 방법을 찾지 못했으므로, 배경 그래픽에서 간격을 설정해야 합니다.-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#ffffff"/>
    </shape>
   </item>
  </layer-list>
 </item>
 <item android:state_selected="false">
  <!--<shape>
   <solid android:color="#bcbcbc"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#bcbcbc"/>
    </shape>
   </item>
  </layer-list>
 </item>
</selector>

주석이 달린 부분은 원래 간격이 없는 selector입니다. 여기서는 배경에 좌우 패딩을 설정하여 효과적으로 사용합니다.

단점: 간격이 너무 크면, 이 방식이 약간의 단점을 가집니다. 바닥 공간을 클릭하면 탭이 선택됩니다.

그러나 간격이 크지 않다면, 거의 감지할 수 없습니다.

3. Activity의 사용은 매우 간단합니다:

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);
  mTabLayout.addTab(mTabLayout.newTab().setText("다운로드됨"));
  mTabLayout.addTab(mTabLayout.newTab().setText("다운로드 중"));
  mTabLayout.setupWithViewPager(mViewPager);

4. 원래는 레이아웃 아래에 TabLayout과 ViewPager가 있었고, TabLayout 외에 하나의 RelativeLayout을 더 싸고 시도했는데, Tab의 글자가 표시되지 않았습니다. 그리고 추가로 addTab과 setupWithViewPager의 순서를 교환하는 것도 문제였습니다. 보여지는 것은 보였지만, 더 이상 이상한 상황이 발생했습니다. 앞쪽에 두 개의 공백이 있고, 뒤쪽에 두 개의 정상적인 Tab이 더 추가되었습니다. 정말 이상한 상황입니다.

마지막으로 Adapter에서 처리해야 합니다. 다음 메서드를 다시 작성하면 됩니다. 이렇게 하면 더 합리적일 수 있으며, Tab의 수와 ViewPager의 페이지 수가 일치하는 것을 보장할 수 있습니다.

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "다운로드 완료";
   } 1{
    return "다운로드 중";
   }
   return "";
  }

이제 TabLayout에서 Tab 간격 설정 방법(예제 설명)에 대한 내용을 모두 공유해 드렸습니다. 많은 참고가 되기를 바라며, 많은 지지를 부탁드립니다.

고지: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유하고 있습니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용을 발견하면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 대한 신고를 할 때, #을 @으로 변경하시고, 관련 증거를 제공하시면, 실제로 확인되면 해당 사이트가 즉시 위반된 내용을 삭제할 것입니다.