使用TabLayout与ViewPager简单快速实现底部导航栏效果

文章末尾会有GitHub地址以及AS平台的源码压缩包下载地址，欢迎大家下载学习

欢迎大家帮忙 Star 一下！谢谢！~ ~

本人刚工作两个月的时间，今天第一次接触Git，也是第一次写博客，有不足的地方还请大家多见谅，多多指教。

我是做安卓开发的，因为接触的时间不长，工作也刚开始不久，以前有什么不懂的地方一直是通过看别人的博客学习，一路过来要谢谢很多博主。

今天由于项目完成之后没有事情做，就自己去学习android 5.0之后的Material Design的新特性。以前稍微有过了解，但最近工作一直没有使用到，自己还是想多学习。刚好看到TabLayout这个控件，突然想要自己用这个控件去实现刚完成的一个项目里面的底部导航栏。

但是想法是好的，过程是...........一开始在百度上找TabLayout的相关资料，但是总不是我要的效果。唉，不过最后学是实现这个效果了，虽然用了很久.......

效果图如下(不知道怎么做动态的图，见谅....)：

我也不知道这图片是不是这么放上去的.....有兴趣的就看一下源码吧。

简单介绍一下实现的过程：

先是布局文件，很简单，就这两个控件，相对布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.ywp.tabdemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_main"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="#2d2c2c"
        android:paddingTop="3dp"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="#0dd627"
        app:tabTextColor="#fff">
    </android.support.design.widget.TabLayout>
</RelativeLayout>

然后，看activity。

package com.ywp.tabdemo;

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tl_main;
    private ViewPager vp_main;
    private String[] mTitles = new String[]{"消息", "通讯录", "应用", "设置"};
    private List<Fragment> mList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
    }

    private void initDatas() {
        vp_main.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mList.get(position);
            }

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

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        });
//        tl_main.addTab(tl_main.newTab().setText(mTitles[0]));
//        tl_main.addTab(tl_main.newTab().setText(mTitles[1]));
//        tl_main.addTab(tl_main.newTab().setText(mTitles[2]));
//        tl_main.addTab(tl_main.newTab().setText(mTitles[3]));

        // 跟随ViewPager的页面切换
        tl_main.setupWithViewPager(vp_main);

        tl_main.getTabAt(0).setIcon(R.drawable.selector_ico01);
        tl_main.getTabAt(1).setIcon(R.drawable.selector_ico02);
        tl_main.getTabAt(2).setIcon(R.drawable.selector_ico03);
        tl_main.getTabAt(3).setIcon(R.drawable.selector_ico04);


        tl_main.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();

//                if (position == 0) {

//
//                } else if (position == 1) {
//
//                } else if (position == 2) {
//
//                } else if (position == 3) {
//
//                }
                // 设置ViewPager的页面切换
                vp_main.setCurrentItem(position);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
//                int position = tab.getPosition();
//                if (position == 0) {
//
//                } else if (position == 1) {
//
//                } else if (position == 2) {
//
//                } else if (position == 3) {
//
//                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

    private void initViews() {
        tl_main = (TabLayout) findViewById(R.id.tl_main);
        vp_main = (ViewPager) findViewById(R.id.vp_main);
        mList = new ArrayList<>();
        mList.add(OneFragment.newInstance(mTitles[0], "fragment_1"));
        mList.add(OneFragment.newInstance(mTitles[1], "fragment_2"));
        mList.add(OneFragment.newInstance(mTitles[2], "fragment_3"));
        mList.add(OneFragment.newInstance(mTitles[3], "fragment_4"));


    }
}

是不是很简单呢？看到里面注释了很多代码吗？那些都是可以删除了的。

本来是想分别对每一个tab在它的监听事件方法里面，(它有三个方法，分别对应选择状态，未选择状态，以及重复点击状态) ，使用不同状态的图片去分别设置对应 tab 不同状态的Icon，也就是图标的，但是我用selector直接就解决了问题，不必要在监听方法里面去设置View了，只要将ViewPager设置一下要显示的页面就OK了。

还有在ViewPager的adapter里面重写这个方法的时候，Tab的Text都不用再去设置了，这里直接就帮我们完成了，只需要将图标绑定到Tab上就可以了，然后再在之后使用selector去设置图标，就更省了自己在监听方法里面去分别设置不同状态的图标资源了。

vp_main.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

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

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

// 跟随ViewPager的页面切换
tl_main.setupWithViewPager(vp_main);

tl_main.getTabAt(0).setIcon(R.drawable.selector_ico01);
tl_main.getTabAt(1).setIcon(R.drawable.selector_ico02);
tl_main.getTabAt(2).setIcon(R.drawable.selector_ico03);
tl_main.getTabAt(3).setIcon(R.drawable.selector_ico04);

哈哈，到这里Demo就做完了，效果图我也不太会弄，有兴趣的就下源码运行一下吧，感觉使用TabLayout与ViewPager比用别的方式去实现底部导航栏要方便快捷多了。

希望这个小Demo可以帮到有需要的朋友，也希望大家能对我这个小菜鸟写的第一篇文章多多包涵。

第一次写博客，原来这么辛苦，写了好久了。。。。。

希望大家可以帮我点下顶支持一下，谢谢你们！！

如果有需要源码压缩包的朋友，下载地址是：http://download.csdn.net/detail/qianniyoushouzuo/9623707

第一次不太会弄这些......

GitHub地地址：https://github.com/ywp0919/TabLayoutDemo

使用TabLayout与ViewPager简单快速实现底部导航栏效果

猜你喜欢