简单优雅的使用tablayout和viewpager打造导航栏

又是很久没写博客了，当然之前只写过一篇。本来想着坚持写呢，可是发现这里的博客审核需要挺长时间，于是乎又不怎么想写了。

今天带来的是一种导航栏的简单优雅的一种实现方式。就导航栏的实现方式的发展来看，先后主要经历了：

1--tabhost;

2--radiogroup--viewpager

3--自定义horiozationScrollview

4--tablayout+viewpager

当然recyclerview的横向布局也是可以的。

上述的几种方式难免要对这些view进行监听，然后在监听里相互关联。

当然tablayout+viewpager通过setUpWithViewPager()，避免了监听设置。这也是目前博客中常见的设置方式，

但是对于底部导航栏以及带图标的且能根据选中状态改变颜色的情况，目前却难以见到比较优雅的方式。

当然，这篇博客中http://www.2cto.com/kf/201604/497188.html提供了上述的解决方式，但是很明显，比较复杂。

这里提供了一个简单的方式实现带图标，且能根据选中状态改变背景的导航栏效果。先上效果图：

刚开始的实现过程与网上多数的实现方式一样，只是有几个关键点要说明：

public class MainActivity extends AppCompatActivity {

    private TabLayout mTablayout;
    private ViewPager mViewPager;
    private List<Fragment> mFragments;
    private List<String> mTitles;
    private HomePagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initview();
        loadData();
        setViewEvent();
    }
    private void initview() {
        mTablayout = (TabLayout) findViewById(R.id.tab_layout_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager_main);
    }

    private void loadData() {
        mFragments = new ArrayList<>();
        mTitles = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            mTitles.add("tab" + i);
            HoneFragment tabfrag = new HoneFragment();
            Bundle bud = new Bundle();
            bud.putString("title", "fragment" + i);
            tabfrag.setArguments(bud);
            mFragments.add(tabfrag);
        }
    }

    private void setViewEvent() {
        mAdapter = new HomePagerAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mViewPager.setAdapter(mAdapter);
        mTablayout.setupWithViewPager(mViewPager);//------1
        int tabCount = mTablayout.getTabCount();
        for (int i = 0; i < tabCount; i++) {
            mTablayout.getTabAt(i).setIcon(R.drawable.tab_item_selector);//------2
            mTablayout.getTabAt(i).setCustomView(R.layout.tab_item);//------3
        }
        mViewPager.setCurrentItem(1);
        mViewPager.setCurrentItem(0);//------4
    }
}

主布局：

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="61dp"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_main"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_gravity="bottom"
        android:background="#08000000"
        app:tabMode="fixed"
                ></android.support.design.widget.TabLayout>
</FrameLayout>

1----这个网上见的较多，就是关联tablayout-viewpager-adapter

2----给tablayout的每个tab设置icon;

3----给tab设置自定义的view，这是关键点，这里需要说明的是在源码注释中提到

若是自定义view中有TextView的id为@android:id/text1，那么这个textview的值将会

替代tab的文本（setText），相应的，若是自定义view中有ImageView的id为@android:id/icon

那么这个imageview的值将会替代tab的icon（setIcon）.所以，可以按照下面代码为位置3处的view进行布局：
4--设置选中的页面，
mViewPager.setCurrentItem(1);还必须设置，原因未明；

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
            
              android:gravity="center"
              android:paddingTop="6dp"
              android:orientation="vertical">
    <TextView
        android:id="@android:id/text1"
        android:textColor="@drawable/tab_text_back"//---------根据状态改变字体颜色,selector文件
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@android:id/icon"
        android:src="@drawable/tab_item_selector"//---------根据状态改变图标背景，selector文件<pre name="code" class="html" style="font-size: 17.6px;">
        android:layout_width="36dp"        android:layout_height="36dp"/></LinearLayout>

好了，经过上面的设置，一个带图标，且能根据选中状态改变背景的导航栏效果就出来了。

源码：https://github.com/Cysion1989/BottomNavigationBar

转载请标明出处。。