Material Design:TabLayout的使用

Posted sunupo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Material Design:TabLayout的使用相关的知识,希望对你有一定的参考价值。

转:https://www.jianshu.com/p/9c072bc99ebe

谷歌在Material Design中推出TabLayout以替代开源库PagerSlidingTabStrip和ViewPagerIndicator的使用。事实上,这类indicator指示器的布局可谓是android中最常见的布局设计了,TabLayout的出现给我们带来一定便利,它的使用对开发者更加友好,并且和Toolbar一样,配合material design的其他控件使用能轻易创造出酷炫的效果,下面我们快来学习它。

一、创建布局

使用TabLayout时,常与ViewPager一起关联使用,布局如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"/>
</LinearLayout>
注意TabLayout中的tabMode属性可选scrollable或fixed:
  • scrollable可以滑动,向左对齐,如今日头条,网易新闻就是scrollable,但是在Tab选项卡较少时会无法填满TabLayout栏。
  • fixed则无法滑动,每个选项卡平均分配空间,适合较少Tab选项卡的情况,当选项卡较多时,会出现每个选项卡内容无法显示完整的情况,请大家大家根据情况选择。
    也可在代码中使用以下方法设置。
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
或
tabLayout.setTabMode(TabLayout.MODE_FIXED);
还有另一个比较类似的属性是app:tabGravity可选fill或centre:
  • 当选项卡很少需要置于中心时,就需要用到centre,可以参考简书手机App首页标题栏“文章”,“专题”两个选项卡的居中效果。
  • 当选项卡需要填满TabLayout布局时,则用到fill。

二、创建Fragment

public class PageFragment extends android.support.v4.app.Fragment {

    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

Fragment的布局为

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
</TextView>

没什么说的,布局是一个简单的TextView,通过实例化Fragment传递参数。

三、创建ViewPager的适配器

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    private static final String[] mTitles = {"tab1", "tab2", "tab3"};

    public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

四、在MainActivity中设置TabLayout

public class ThirdActivity extends FragmentActivity {

    private SimpleFragmentPagerAdapter pagerAdapter;
    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}
 
技术图片
TabLayout

五、自定义TabLayout样式
你应该不会满足于现在的TabLayout,实际应用中,往往会改变TabLayout的背景,字体大小和颜色,指示标的宽度和颜色等等。
在MainActivity布局下给TabLayout添加一个style如下:

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/tab_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"/>

并且在styles中添加一个样式:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="tab_style" parent="Widget.Design.TabLayout">
    <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->  
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabIndicatorColor">@color/colorAccent</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
        <item name="tabBackground">@color/colorPrimary</item>
        <item name="tabSelectedTextColor">@color/colorAccent</item>
    </style>

    <style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="textAllCaps">false</item>
    </style>
</resources>

注意这里的@color/colorAccent是粉色,@color/colorPrimary是蓝色。

各个属性所代表的含义:
1.tabMaxWidth:tab item的最大宽度,当app:tabMode="fixed"时不起作用,当app:tabMode="fixed"时才起作用。其中:
2.tabIndicatorColor:TabLayout指示器的颜色
3.tabIndicatorHeight:TabLayout指示器高度
4.tabPaddingStart:距离开始的长度
5.tabPaddingEnd:距离结束的长度
6.tabBackground:TabLayout背景
7.tabTextAppearance:TabLayout title字体属性
8.tabSelectedTextColor:当前选择的tab的字体颜色
9.textAllCaps:TabLayout创建的Tab默认的是true,如果设置图标的话要设置成false。

这时再运行看下效果:

 
技术图片
自定义style的TabLayout

六、添加icon到tab

当前的TabLayout没有方法让我们去添加icon,我们可以使用SpannableString结合ImageSpan来实现,在SimpleFragmentPagerAdapter中:

//自己随便从官网找几个icon吧
private static final int[] mImgIds = {R.drawable.ic_stars_black_18dp,
                                      R.drawable.ic_supervisor_account_black_24dp,
                                      R.drawable.ic_today_black_24dp
};
//...
@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    // return tabTitles[position];
    Drawable image = context.getResources().getDrawable(mImgIds[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    SpannableString sb = new SpannableString(" ");
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

再运行可以看到:


 
技术图片
添加icon的TabLayout

如果要同时把icon和text添加到tab同理,把getPageTitle()方法改为:

@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    Drawable image = context.getResources().getDrawable(mImgIds[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    // Replace blank spaces with image icon
    SpannableString sb = new SpannableString("   " + mTitles[position]);
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

七、添加自定义的view到tab

1、自定义一个简单的tab布局tab_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/iv_tab"
        android:layout_width="30dp"
        android:scaleType="fitXY"
        android:layout_height="30dp"/>
    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" />
</LinearLayout>
2、在适配器中增加getTabView(...)方法:
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    private static final String[] mTitles = {"tab1", "tab2", "tab3"};
    private static final int[] mImgIds = {
            R.drawable.ic_today_black_24dp,
            R.drawable.ic_supervisor_account_black_24dp,
            R.drawable.ic_stars_black_18dp
    };

    public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
//        return mTitles[position];
        return null;
    }

    public View getTabView(int position) {
        View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
        ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab);
        TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);
        iv_tab.setImageResource(mImgIds[position]);
        tv_tab.setText(mTitles[position]);
        return view;
    }
}
3、在MainActivity中使用
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(),this);
        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            //获得到对应位置的Tab
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            //设置自定义的标题
            if (tab != null) {
                tab.setCustomView(pagerAdapter.getTabView(i));
            }
        }
    }

效果如下图:

 
技术图片
自定义view的TabLayout

八、处理配置改变

当屏幕旋转或者配置改变的时候,我们需要保存当前的状态。

@Override
   public void onSaveInstanceState(Bundle outState) {
       super.onSaveInstanceState(outState);
       outState.putInt(POSITION,tabLayout.getSelectedTabPosition());
   }

   @Override
   protected void onRestoreInstanceState(Bundle savedInstanceState) {
       super.onRestoreInstanceState(savedInstanceState);
       viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));
   }

关于TabLayout的讲解到此结束,当AppBar包裹Toolbar和TabLayout时,会有更好的效果。另外,设置自定义view后,自定义的style中tabSelectedTextColor就失效了,只找到了用selector使tab切换时图片改变颜色的方法,没找到改变文字颜色的方法,请各位有识之士不吝赐教。

本文参考文章:
android design library提供的TabLayout的用法
Android TabLayout 浅显总结

 

 
















以上是关于Material Design:TabLayout的使用的主要内容,如果未能解决你的问题,请参考以下文章

Material Design:TabLayout的使用

记录TabLayout的一些用法(android)

Material Design Support 8大控件介绍

Android Material Design 史上最全的材料设计控件大全

Android Material Design新UI控件使用大全 三

Android Material Design新UI控件使用大全 三