什麼是TabLayout

TabLayout是Support Design Library庫中的一個控件，它是用來進行分組的，同時也可以作為ViewPager的訓示器

TabLayout的簡單使用

●tab建立

◇xml布局建立

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab1" //設定tab顯示的文字
            android:icon="@mipmap/ic_launcher" //設定tab的圖檔
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab2"
            android:icon="@mipmap/ic_launcher"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab3"
            android:icon="@mipmap/ic_launcher"
            android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
           

◇Java代碼動态建立

tabLayout=findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setText("标簽1").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("标簽2").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("标簽3").setIcon(R.mipmap.ic_launcher));
           

●tab的布局排版

tab的布局排版受兩個屬性限制app:tabMode【fixed（固定）、scrollable（滾動））】和app:tabGravity（fill（填充）、center（居中））

◇設定app:tabMode=“fixed”然後設定app:tabGravity分别為fill和center時的效果

1)app:tabGravity="fill"

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
           

2)app:tabGravity="center"

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="fixed"
        app:tabGravity="center"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
           

◇設定app:tabMode=“scrollable”然後設定app:tabGravity分别為fill和center時的效果

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
           

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="center"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
           

●其他設定

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabIndicatorHeight="5dp" //設定訓示線高度，如果想要隐藏訓示線可以通過将該屬性設定為0dp實作
        app:tabIndicatorColor="@color/colorPrimary" //設定訓示線顔色
        app:tabTextColor="@color/colorPrimary" //設定未選中文字顔色
        app:tabSelectedTextColor="@color/colorRed" //設定選中文字顔色
        android:layout_height="wrap_content">

</android.support.design.widget.TabLayout>
           

●綁定ViewPager

這裡tab的Text是通過PagerAdapter的getPageTitle方法擷取的

public class TabLayoutSimpleActivity2 extends AppCompatActivity {
    ViewPager viewPager;
    TabLayout tabLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablayout_activitysimple);
        viewPager=findViewById(R.id.vp);
        tabLayout=findViewById(R.id.tablayout);
        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return 5;
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view==object;
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                TextView textView=new TextView(TabLayoutSimpleActivity2.this);
                textView.setTextSize(50);
                textView.setText(position+"");
                container.addView(textView);
                return textView;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View) object);
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return "标簽"+position;
            }
        });
        tabLayout.setupWithViewPager(viewPager);
    }
}
           

個人部落格： https://myml666.github.io