关于Android简单的底部导航(可左右滑动)

做完后发现其实挺简单的（本来就简单）
布局文件中的图片颜色根据自己需求设置
1.写一个类似容器的布局来存放各个页面以及底部导航，ViewPager就是内容

main.xml

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

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

</android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/tabview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/tvc_btn_bg" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:orientation="horizontal"
            android:weightSum="2">

            <LinearLayout
                android:id="@+id/tab_ones"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/i1"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginBottom="1dp"
                    android:layout_marginTop="7dp"
                    android:scaleType="centerInside"
                    android:src="@drawable/a" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:textSize="10dp"
                    android:text="首页"
                    android:textColor="@color/text" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_twos"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/i2"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginBottom="1dp"
                    android:layout_marginTop="7dp"
                    android:scaleType="centerInside"
                    android:src="@drawable/b" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:textSize="10dp"
                    android:text="消息"
                    android:textColor="@color/text" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

2.首页面
这里加了RecyclerView可以设置：
LinearLayoutManager，可以支持水平和竖直方向上滚动的列表。 StaggeredGridLayoutManager，可以支持交叉网格风格的列表，类似于瀑布流或者
Pinterest。
GridLayoutManager，支持网格展示，可以水平或者竖直滚动，如展示图片的画廊。

frg_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="#00000000"
        android:listSelector="#00000000"
        android:scrollbars="none" />

</android.support.constraint.ConstraintLayout>

frg_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="#00000000"
        android:listSelector="#00000000"
        android:scrollbars="none" />

</android.support.constraint.ConstraintLayout>

两个页面的布局就写好了，分别是主页和消息页面，这个两个页面要存放两个item

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/one"
        android:text="你好"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

item2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/one"
        android:text="你好2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

这样布局文件就准备好了，开始写java代码来管理这些页面

Main.java

import android.os.Bundle;
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.view.View;
import android.widget.LinearLayout;

public class Main  extends AppCompatActivity {

    private LinearLayout tab_ones, tab_twos;
    /**
     * 各个栏目fragment
     */
    private Fragment tabOneFrg, tabTwoFrg;

    private View[] views;

    /**
     * viewpager
     */
    public ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        initView();
    }

    private void initView() {
        tab_ones = findViewById(R.id.tab_ones);
        tab_twos = findViewById(R.id.tab_twos);


        /**内容*/
        viewPager = findViewById(R.id.viewPager);

        // 把底部栏四个tab添加到数组里
        views = new View[]{tab_ones, tab_twos};

        /** 根据点击位置选择相应的Fragment,例如0是首页 **/
        setTabSelect(0);

        /**默认变更成初始菜单为tab_one*/
        tab_ones.setSelected(true);

        /**初始化viewPager*/
        initVierPager();

        for (int i = 0; i < 2; i++) {
            views[i].setOnClickListener(new MyOnClick());
        }
    }

    /**
     * 底部按钮点击事件
     */
    private class MyOnClick implements View.OnClickListener {
        @Override
        public void onClick(View v) {

            switch (v.getId()) {
                case R.id.tab_ones:

                    if (viewPager.getCurrentItem() == 0) {
                        if (tabOneFrg.isVisible()) {
//                            ((TabOneFrg) tabOneFrg).tabClick();
                        }
                    } else {
                        viewPager.setCurrentItem(0);
                        setTabSelect(0);
                    }

                    break;

                case R.id.tab_twos:

                    if (viewPager.getCurrentItem() == 1) {
                        if (tabTwoFrg.isVisible()) {
//                            ((TabTwoFrg) tabTwoFrg).tabClick();
                        }
                    } else {
                        viewPager.setCurrentItem(1);
                        setTabSelect(1);
                    }

                    break;

                default:
                    break;
            }
        }
    }


    /**
     * 初始化viewPager
     */
    private void initVierPager() {
        viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
        viewPager.setOffscreenPageLimit(2);// viewPager的默认加载
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            float x;

            @Override
            public void onPageSelected(int arg0) {
//                if (viewPager.isCanScroll) {
//                    setTabSelect(arg0);
//                }
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                x = arg1;
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    /**
     * viewPager适配器
     */
    private class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int arg0) {

            switch (arg0) {
                case 0://首页
                    if (tabOneFrg == null) {
                        tabOneFrg = new MainActivity();
                    }
                    return tabOneFrg;

                case 1://订阅
                    if (tabTwoFrg == null) {
                        tabTwoFrg = new Main2Activity();
                    }
                    return tabTwoFrg;

                default:
                    return tabOneFrg;
            }

        }

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



    }


    private int position;

    /**
     * 根据点击位置选择相应的Fragment
     **/
    public void setTabSelect(int pos) {
        position = pos;
        setTextSelect(pos);

        if (pos == 0) {

        } else {

        }
    }

    /**
     * 选中菜单变换
     **/
    private void setTextSelect(int pos) {
        for (int i = 0; i < 2; i++) {
            if (i == pos) {
                views[i].setSelected(true);
            } else {
                views[i].setSelected(false);
            }
        }
    }
}

值得说的是setTabSelect()方法中可以设置点击底部导航中的某一个选项后修改颜色或者图片，当pos==0时设置文件颜色或图片的变化…

主页面
MainActivity.java

import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Fragment {
    private RecyclerView recyclerView;
    private View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.activity_main, null);
//        mContext = getActivity();
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView();
        setData();
    }

    private void setData() {
        MyAdapter myAdapter = new MyAdapter(5,getActivity());
        //设置数据适配器
        recyclerView.setAdapter(myAdapter);
    }

    private void initView() {
        recyclerView =view.findViewById(R.id.view);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(linearLayoutManager);
    }
}

消息页面
Main2Activity.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Main2Activity extends Fragment {
    private RecyclerView recyclerView;
    private View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.activity_main2, null);
//        mContext = getActivity();
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView();
        setData();
    }

    private void setData() {
        My2Adapter myAdapter = new My2Adapter(5,getActivity());
        //设置数据适配器
        recyclerView.setAdapter(myAdapter);
    }

    private void initView() {
        recyclerView =view.findViewById(R.id.view);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(linearLayoutManager);
    }
}

这里用到Adapter，我把它们放到了外面，也可以写在里面

MyAdapter.java

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    public int data;
    //如果有封装的实体数据类就要到数组
    //public String[] data;
    public Context mContext;
    public MyAdapter(int data , Context mContext){
            this.data=data;
            this.mContext=mContext;
            }

    public class MyViewHolder extends RecyclerView.ViewHolder{

        public TextView one;
        public MyViewHolder(View itemView, int viewType) {
            super(itemView);
            one =itemView.findViewById(R.id.one);
        }
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

        MyViewHolder holder = new MyAdapter.MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item, viewGroup, false), i);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
        final MyAdapter.MyViewHolder holder = ((MyAdapter.MyViewHolder) viewHolder);
        holder.one.setText("这是我的页面11");
    }

    @Override
    public int getItemCount() {

//        if (data != null && data.length > 0) {
//            return data.length;
//        }
        return data;
    }
}

My2Adapter.java

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class My2Adapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    public int data;
    //如果有封装的实体数据类就要到数组
    //public String[] data;
    public Context mContext;
    public My2Adapter(int data , Context mContext){
        this.data=data;
        this.mContext=mContext;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder{

        public TextView one;
        public MyViewHolder(View itemView, int viewType) {
            super(itemView);
            one =itemView.findViewById(R.id.one);
        }
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

        MyViewHolder holder = new My2Adapter.MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item2, viewGroup, false), i);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
        final My2Adapter.MyViewHolder holder = ((My2Adapter.MyViewHolder) viewHolder);
        holder.one.setText("这是我的页面2");
    }

    @Override
    public int getItemCount() {

//        if (data != null && data.length > 0) {
//            return data.length;
//        }
        return data;
    }
}

data可以根据自己需要改成int 数组类型，看是需要传递什么用的数据这里我没有封装数据实体所以就设置成了int类型，传的值是5，表示打印5个这样的item。主要是看你的item里的内容有多少
onBindViewHolder方法里用来设置绑定后的数据，列如我把TextView里的“你好”设置成了“这是我的页面11”

这样就算完成了带有底部导航的主页面了，并且可以左右滑动，点击颜色也会发生变化（自己设置）

实习生一枚作下笔记方便下次回忆= =。