Tablayout的简单使用-单文字+图片文字展示效果

tablayout每个icon包含图片与文字

Tablayout是安卓新特性中的组件，之前很多地方都会用到这样的组件，只是我们一般都是通过tabactivity加fragment或者其他第三方框架来实现，谷歌推出tablayout以后，使这个组件简化了许多，只需要一个tablayout加一个viewpager就可以实现想要的效果。今天就讲一下tablayout如何配合viewpager一起使用。

使用

注意仅仅使用文字标题的时候设置导航可以随意比如按照这种方式

tabs.addTab(tabs.newTab().setText("首页");

但是如果使用了tablayout+viewpager 并且设置了setupWithViewPager
那么当运行时候你会发现，文字不见了、逗比了吧，那么这时候请看下面的代码你会发现那里不一样的。注意执行了setupWithViewPager之后关于tablayout设置的地方–（resetTablayout()方法，这个方法写的还是乱了点冗余大家可以尝试自己搞下，大体就是这么来的）

示例代码

1、首先初始化

@Bind(R.id.id_vp)
ViewPager idVp;
@Bind(R.id.tabs)
TabLayout tabs;
private List<String> mDatas;
private List<Fragment> fragmentList;
private MyAdapter myAdapter;
private int IconImg [] = {
        R.drawable.one,
        R.drawable.two,
        R.drawable.thr,
        R.drawable.four,

};

2、数据初始化和调用的一些方法

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);
    initData();
    tabViewSetView();
    resetTablayout();
    setViewPagerCurrent();


}

private void initData() {
    mDatas = new ArrayList<String>();
    mDatas.add("首页");
    mDatas.add("订单");
    mDatas.add("会员");
    mDatas.add("我的");
    tabs.setTabMode(TabLayout.MODE_FIXED);
//        for (int i=0;i<mDatas.size();i++){
//            tabs.addTab(tabs.newTab().setText(mDatas.get(i)));
//        }
    fragmentList = new ArrayList<Fragment>();
    MainFragment mainFragment = MainFragment.getMainFragment();
    SecondFragment secondFragment = SecondFragment.getSecondFragment();
    ThrFragment thrFragment = ThrFragment.getThrFragment();
    MyFragment myFragment = MyFragment.getMyFragment();

    fragmentList.add(mainFragment);
    fragmentList.add(secondFragment);
    fragmentList.add(thrFragment);
    fragmentList.add(myFragment);
    tvTitlebarTitle.setText(mDatas.get(0));
    ibTitlebarBack.setVisibility(View.GONE);
}

private void tabViewSetView() {
    myAdapter = new MyAdapter(getSupportFragmentManager(),fragmentList);
    idVp.setAdapter(myAdapter);
    tabs.setupWithViewPager(idVp);
}

private void resetTablayout() {
    /**
     * 使用tablayout + viewpager时注意 如果设置了setupWithViewPager
     * 则需要重新执行下方对每个条目赋值
     * 否则会出现icon文字不显示的bug
     */
    for (int i=0;i<mDatas.size();i++){
        tabs.getTabAt(i).setText(mDatas.get(i));
    }

    for (int i=0;i<tabs.getTabCount();i++){
        TabLayout.Tab tab = tabs.getTabAt(i);
        if (tab!=null){
            tab.setCustomView(myAdapter.getTabView(i));
        }
    }
}
private void setViewPagerCurrent() {
    idVp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            if (idVp.getCurrentItem()==0){
                ibTitlebarOther.setVisibility(View.VISIBLE);
            }else{
                ibTitlebarOther.setVisibility(View.GONE);
            }
            tvTitlebarTitle.setText(mDatas.get(position));
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

class MyAdapter extends FragmentPagerAdapter {
    private List<Fragment> list;

    public MyAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        // TODO Auto-generated constructor stub
        this.list = list;
    }

    public View getTabView(int position) {
        View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.news_title);
        tv.setText(mDatas.get(position));
        ImageView img = (ImageView) v.findViewById(R.id.imageView_title);
        img.setImageResource(IconImg[position]);
        return v;
    }

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return list.get(arg0);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return list.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // TODO Auto-generated method stub
//          super.destroyItem(container, position, object);
    }
}

3、效果展示

有人发消息骂我说我不上传布局。。。醉了 下边是布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <include layout="@layout/title_base"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/title_height"
        android:background="@color/white"
        app:tabSelectedTextColor="@color/orange"
        app:tabIndicatorColor="@color/orange"
        app:tabTextColor="@color/black"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabBackground="@drawable/tablayout_background"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        />

</LinearLayout>