Android:使用TabLayout详解

时间:2022-12-21 12:33:23

 TabLayout的实现

 

Android:使用TabLayout详解

安卓中实现以上选项卡的效果方式有很多种,TabHost,自定义控件(第三方库),RadioGroup等等。这里主要介绍Android Design库中的TabLayout的使用。TabLayout是安卓6.0之后出现的。

 

基本使用步骤:

一、

在Android Studio中可以直接引用design库,第一步当然是先引入这个库了,如下图:

Android:使用TabLayout详解

 

二、

在布局中加入TabLayout控件

<android.support.design.widget.TabLayout android:id="@+id/mytab" android:layout_width="match_parent" android:layout_height="wrap_content"
    ></android.support.design.widget.TabLayout>

 

 

三、

在java代码中添加Tab实现选项卡效果

 

package com.contentprovide.liuliu.tablayout_demo; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { TabLayout mytab; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mytab = (TabLayout) findViewById(R.id.mytab); mytab.addTab(mytab.newTab().setText("选项卡一").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("选项卡二").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("选项卡三").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("选项卡四").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("选项卡五").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("选项卡六").setIcon(R.mipmap.ic_launcher)); } }

 

 这三步完成已经初步实现选项卡效果了

 Android:使用TabLayout详解

 

 

 

接下来进一步的使用就是给选项卡加一些效果,让它看起来更好看

 

 改变Tab颜色

设置字体默认颜色

 

app:tabTextColor="#ffffff"

 

 

 

 

设置字体被选中后的颜色

app:tabSelectedTextColor="#e40707"

 

 

 设置指示器颜色

app:tabIndicatorColor="#30e407"

 

 

 设置指示器高度(如果希望选项卡不显示指示器效果只需要把指示器高度设置为0就行了)

 app:tabIndicatorHeight="2dp"

 

 

 设置Tab背景颜色(作用效果和Background一样)

app:tabBackground="@color/colorye"

 

 

设置Tab滚动方式

可滚动

app:tabMode="scrollable"

 

固定

app:tabMode="fixed"

 

 

给Tab添加图标,在Java代码中实现

     mytab.addTab(mytab.newTab().setText("选项卡一").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡二").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡三").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡四").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡五").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡六").setIcon(R.mipmap.ic_launcher));

 

 

 

我设置完这些属性后的效果是这样的

Android:使用TabLayout详解

 

 

TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener():

setOnTabSelectedListener()这个方法已经被抛弃了,现在一般使用addOnTabSelectedListener

 

       mytab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { // 添加选中Tab的逻辑
 } @Override public void onTabUnselected(TabLayout.Tab tab) { // 添加未选中Tab的逻辑
 } @Override public void onTabReselected(TabLayout.Tab tab) { // 再次选中tab的逻辑
 } });

 

 

 

 

最后实用性比较强的是将TabLayout和ViewPager关联,这种使用方法比较灵活,在实际开发中一般都是这样配合使用

关联TabLayout和ViewPager只需要调用mytab.setupWithViewPager(mViewPager);

 

这里记录一下通过使用Fragment作为ViewPager的内容,再将ViewPager关联

步骤一、

在布局文件中TabLayout控件的下方添加ViewPager控件(如果需要选项卡位于底部实现类似QQ的那种效果,只需要把ViewPager控件放在TabLayout控件的上面就行了)

 <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/mViewPager"
        ></android.support.v4.view.ViewPager>

 

 

步骤二、

在Java代码中定义两个List集合,一个放TabLayout标题Title,一个放TabLayout内容Fragment

    List<String> mTitle; List<Fragment> mFragment;

 

给这两个集合添加内容

      mTitle = new ArrayList<>(); mTitle.add("选项卡一"); mTitle.add("选项卡二"); mTitle.add("选项卡三"); mTitle.add("选项卡四"); mFragment = new ArrayList<>(); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment());

 

 

步骤三、

给ViewPager创建适配器,将Title和Fragment添加进ViewPager中

mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragment.get(position); } @Override public int getCount() { return mFragment.size(); } @Override public CharSequence getPageTitle(int position) { return mTitle.get(position); } });

 

 

步骤四、

最后一步当然是将ViewPager和TabLayout关联起来了

 

        mytab.setupWithViewPager(mViewPager);

 

 

 

 

 

全部代码如下

public class MainActivity extends AppCompatActivity { TabLayout mytab; ViewPager mViewPager; List<String> mTitle; List<Fragment> mFragment; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mytab = (TabLayout) findViewById(R.id.mytab); mViewPager = (ViewPager) findViewById(R.id.mViewPager); mTitle = new ArrayList<>(); mTitle.add("选项卡一"); mTitle.add("选项卡二"); mTitle.add("选项卡三"); mTitle.add("选项卡四"); mFragment = new ArrayList<>(); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragment.get(position); } @Override public int getCount() { return mFragment.size(); } @Override public CharSequence getPageTitle(int position) { return mTitle.get(position); } }); mytab.setupWithViewPager(mViewPager); } }

 

 

最后补充一点:最好给ViewPager添加上预加载,这样看起来的效果会好一点

 

 预加载界面个数,表示你的预告加载的页面数量的个数,假设我设置为2,当前显示一个,预先加载两个个.这样你在移动前就已经加载了下一个界面,移动时就可以看到已经加载的界面了.

 

mViewPager.setOffscreenPageLimit(2);

 

 

 

今天做一个项目要实现选项卡的选项不但有文字还要有图片,并且选中的选项中的文字和图片要进行变色。

文字的相关用法上面都写了,但是ViewPager的适配器FragmentPagerAdapter没有和设置图片相关的方法,下面我就记录一下当TabLayout和Fragment和Viewpager进行绑定之后怎么给选项卡添加图片。

 

我们都知道使用完下面的方法之后TabLayout和ViewPager的绑定就已经完成了,选项卡的效果也已经实现了

tab.setupWithViewPager(mViewPager);

 

所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空,使用下面的方法

tab.removeAllTabs();

 

现在我们有几个选项就做几个图片选择器(选择器的作用是当我们选中当前选项时,当前的图片会进行变色),做图片选择器的方法这里就不写了,我另外一篇博客里面有。

然后把这些图片选择器都放到一个集合当中去。

 

接下来就可以给选项卡设置文字和图片了,这里的方法和一开始写的是一样的。下面的tab是我自定义的TabLayout对象

TabLayout.Tab tt;
        for (int i = 0; i < 3; i++) {
            tt = tab.newTab();
            tt.setText(Tab_title.get(i).toString());
            tt.setIcon(getResources().getDrawable((Integer) Tab_Icon.get(i)));
            tab.addTab(tt, i);
        }

 

 

下面是实现效果

Android:使用TabLayout详解