TabLayout的使用

最新推荐文章于 2024-11-28 04:19:06 发布

天璇112

最新推荐文章于 2024-11-28 04:19:06 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏：学习之鉴系列-自定义view

本文链接：https://blog.youkuaiyun.com/u012153184/article/details/52571889

学习之鉴系列-自定义view 专栏收录该内容

3 篇文章

订阅专栏

TabLayout 这个实在Google 2015 年的时候在 Android Support Design 包中包含的之前看过这个控件的使用但是一直没有机会去用，最近闲的没事想开始积累一些知识所以无意中就使用到了它。下面来看下简单的使用：

以前的时候我相信每个人肯定遇到过顶部菜单栏的问题吧各种五花八门的解决方案，如下图是我早年坐过的一个项目的功能，之前的实现思路是这样的先写一个布局的模板 inflate 出来，设置宽高、设置title文字，添加到一个Linearlayout布局中，设置点击事件，然后把整个view添加到集合中循环做单选效果，十分的麻烦而且不能单独的封装，性能又不好，不过google出了TabLayout这个控件就统一也简单多了。
这里写图片描述

对于这个效果的实现就可以几行代码就搞定了：
XML布局：

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>
    <RelativeLayout
        android:id="@+id/relativelayout"
        android:layout_below="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#5bdb2c"
        >

    </RelativeLayout>

顶部一个TabLayout下部一个布局就可以了，不过这里一定要注意：布局的设置不要让下方的布局把TabLayout遮盖住我们可以给下方布局添加android:layout_below否则tablayout就点不动了。。。真是经验和教训啊55555，我们还可以设置：
tabIndicatorColor //指示器的颜色。
tabSelectedTextColor //tab选择之后文字的颜色
tabTextColor //默认的tab文字的颜色
tabMode=”fixed” //可以设置Tab的模式可滑动还是不可滑动

这个Tablayout 还以可以加入 icon 代码如下：

 tabLayout =(TabLayout)findViewById(R.id.tablayout);
        tabLayout.addTab(tabLayout.newTab().setText("头条").setIcon(R.mipmap.ic_launcher),0);
        tabLayout.addTab(tabLayout.newTab().setText("精选").setIcon(R.mipmap.ic_launcher),1);
        tabLayout.addTab(tabLayout.newTab().setText("娱乐").setIcon(R.mipmap.ic_launcher),2);
        tabLayout.addTab(tabLayout.newTab().setText("体育").setIcon(R.mipmap.ic_launcher),3);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i("TAG","onTabSelected Posion:--->"+tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.i("TAG","onTabUnselected Posion:--->"+tab.getPosition());

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.i("TAG","onTabReselected Posion:--->"+tab.getPosition());

            }
        });

addOnTabSelectedListener就不说了一看就知道干啥用的

运行效果图：

这里写图片描述

如果你想让图片在文字的左边那么得自定义下layout了

        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),0);
        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),1);
        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),2);
        tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab),3);

这里写图片描述

但是大多数我们一般都配合Fragment一起使用代码如下：

        tabLayout =(TabLayout)findViewById(R.id.tablayout);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),0);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),1);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),2);
        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),3);
        ViewPager   viewPager=(ViewPager)findViewById(R.id.viewpage);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);

哎呀~我们发现title明明设置了怎么会不见了呢
这里写图片描述

然后我们去源码中寻找原因 tab与viewpage 唯一关联的一句代码是 tabLayout.setupWithViewPager(viewPager);当我们找到这个方法的时候：

 private void populateFromPagerAdapter() {
        removeAllTabs();

        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

            // Make sure we reflect the currently set ViewPager item
            if (mViewPager != null && adapterCount > 0) {
                final int curItem = mViewPager.getCurrentItem();
                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                    selectTab(getTabAt(curItem));
                }
            }
        }
    }

removeAllTabs(); 看到了源码把我们添加的tab去全部移除了，又重新创建了新的tab
for (int i = 0; i < adapterCount; i++) {
addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
}
有点无语但是好歹把原因找到了，有问题就有解决问题的方法，可以在tabLayout.setupWithViewPager（）之后重新设置它的tab这里要注意一点的是
tabLayout.getChildCount() 和tabLayout.getTabCount()

       int  count= tabLayout.getTabCount();
        Log.i("TAG",count+"---count->");
        for (int i=0;i<count;i++){
            TabLayout.Tab tab=tabLayout.getTabAt(i);
            tab.setText("窗前"+i);
            Log.i("TAG",i+"---->");
            tab.setIcon(R.mipmap.ic_launcher);
        }

效果图
这里写图片描述

以下是完整的代码

package view.custom.yyr.com.viewpageindicator;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import java.util.ArrayList;

public class TabLayoutUse extends AppCompatActivity {
    TabLayout  tabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_use);
        tabLayout =(TabLayout)findViewById(R.id.tablayout);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),0);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),1);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),2);
//        tabLayout.addTab(tabLayout.newTab().setText("title1").setIcon(R.mipmap.ic_launcher),3);
        ViewPager   viewPager=(ViewPager)findViewById(R.id.viewpage);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);
       int  count= tabLayout.getTabCount();
        Log.i("TAG",count+"---count->");
        for (int i=0;i<count;i++){
            TabLayout.Tab tab=tabLayout.getTabAt(i);
            tab.setText("窗前"+i);
            Log.i("TAG",i+"---->");
            tab.setIcon(R.mipmap.ic_launcher);
        }
    }

    class  MyFragmentPagerAdapter  extends FragmentPagerAdapter {
//        ArrayList<String> mTextList = new ArrayList<String>();
        ArrayList<Fragment> mFragmentsList =new ArrayList<Fragment>();

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
            initDatas();
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentsList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentsList.size();
        }
        //        @Override
//        public CharSequence getPageTitle(int position) {
//            return mTextList.get(position);//页卡标题
//        }
        private void initDatas() {
            for(int i=0;i<4;i++) {
//                mTextList.add("测试--->" + i);
                Fragment  fragment=SimpleFragment.newInstance("Fragmnet" + i);
                mFragmentsList.add(fragment);
            }
        }
    };
}