使用ViewPager+Fragment实现底部导航栏

使用Fragment实现了activity和tab对应的页面的分离，特别是tab布局和逻辑较复杂时，更能体会这个方式的好处，下面我们使用ViewPager+Fragment实现Tab，这也是开发中较为常见的一种方式
MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
   //声明VIewPager
    private ViewPager mViewPager;
    //适配器
    private FragmentPagerAdapter mAdapter;
    //装载Fragment的集合
    private List<Fragment> mFragments;

    //三个Tab对应的布局
    private LinearLayout mTabGroup;
    private LinearLayout mTabExercise;
    private LinearLayout mTabMine;

    //三个Tab对应的ImageButton
    private ImageButton mImgGroup;
    private ImageButton mImgExercise;
    private ImageButton mImgMine;




    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        initViews();
        initEvents();
        initDatas();


    }
    private void initViews(){
        mViewPager=(ViewPager) findViewById(R.id.id_viewpager);
        mTabGroup=(LinearLayout)findViewById(R.id.id_tab_group);
        mTabExercise=(LinearLayout)findViewById(R.id.id_tab_exercise);
        mTabMine=(LinearLayout)findViewById(R.id.id_tab_mine);

        mImgGroup=(ImageButton)findViewById(R.id.id_tab_group_img);
        mImgExercise=(ImageButton)findViewById(R.id.id_tab_exercise_img);
        mImgMine=(ImageButton)findViewById(R.id.id_tab_mine_img);
    }

    private void initEvents(){
        mTabGroup.setOnClickListener(this);
        mTabExercise.setOnClickListener(this);
        mTabMine.setOnClickListener(this);
    }

    private void initDatas(){
        mFragments=new ArrayList<>();
        mFragments.add(new GroupFragment());
        mFragments.add(new ExerciseFragment());
        mFragments.add(new MineFragment());

        mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
        mViewPager.setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                resetImgs();
                mViewPager.setCurrentItem(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    @Override
    public void onClick(View v) {
        resetImgs();
        switch(v.getId()){
            case R.id.id_tab_group:
                selectTab(0);
                break;
            case R.id.id_tab_exercise:
                selectTab(1);
                break;
            case R.id.id_tab_mine:
                selectTab(2);
                break;
        }
    }


    public void selectTab(int i){
        switch(i){
            case 0:
                mImgGroup.setImageResource(R.mipmap.group);
                break;
            case 1:
                mImgExercise.setImageResource(R.mipmap.exercise);
                break;
            case 2:
                mImgMine.setImageResource(R.mipmap.mine);
                break;

        }
        mViewPager.setCurrentItem(i);
    }

    private void resetImgs(){
        mImgGroup.setImageResource(R.mipmap.group);
        mImgExercise.setImageResource(R.mipmap.exercise);
        mImgMine.setImageResource(R.mipmap.mine);
    }
}

bottom.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="55dp"
    android:gravity="center"
    >
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_group"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_group_img"
            android:clickable="false"
            android:layout_width="40dip"
            android:layout_height="30dip"
            android:src="@mipmap/group"
            android:scaleType="centerInside"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#363f45"
            android:text="班级"
            android:layout_marginBottom="4dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_exercise"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_exercise_img"
            android:clickable="false"
            android:layout_width="40dip"
            android:layout_height="30dip"
            android:src="@mipmap/exercise"
            android:scaleType="centerInside"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#363f45"
            android:layout_marginBottom="4dp"
            android:text="练习"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_mine"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_mine_img"
            android:clickable="false"
            android:layout_width="40dip"
            android:layout_height="30dip"
            android:src="@mipmap/mine"
            android:scaleType="centerInside"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#363f45"
            android:layout_marginBottom="4dp"
            android:text="我的"/>
    </LinearLayout>
</LinearLayout>

tab1.xml tab2,tab3的布局和tab1类似，可以自定义布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/id_recyclerview"
        android:divider="#ffff0000"
        android:dividerHeight="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Tab1Fragment

public class MineFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.t_tab3, container, false);
        return view;
    }
}

主布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:id="@+id/id_viewpager">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/t_bottom"/>
</LinearLayout>