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内部のTabに間隔を設定するために、他の設定方法が見つかりません。したがって、背景のグラフィック内に間隔を設定する必要があります。-->
  <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で、ここでは背景に左右のpaddingを設定して、効果が非常に良いです。

欠点：間隔が大きすぎると、この方法には少し欠点があります。それは、空白の場所をクリックしてもtabが選択されることです。

ただし、間隔があまり大きくない場合、基本的には感じられません。

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の順序を変更しても困難が生じます。表示は可能ですが、より不合理な状況が発生します。前の2つの空きスペースが先頭に、その後正常な2つのスペースが追加されます。非常に奇妙な状況です。

最終的にはAdapter内で処理を行う必要があります。以下のメソッドを再定義することでできます。実際にはこれがもっと理にかなった方法かもしれません。少なくともTabの数とViewPagerのページ数が一致することを保証できます。

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "既にダウンロード済み";
   } 1{
    return "ダウンロード中";
   }
   return "";
  }

TabLayout内のTab間隔設定方法（実例説明）についてのこの記事が、編集者が皆さんに提供する全ての内容です。皆さんに参考になれば幸いです。また、呐喊ガイドを多くのサポートをお願いします。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされました。このウェブサイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）