【Android】导航栏（加图片icon）和不同页面的实现（viewpager+tablayout）

先上图，然后说大致步骤，最后再说细节

图片效果：依序点击导航栏左一、左二、中、右二、右一，最后直接滑动页面（不依靠导航栏切换）

大致步骤如下（文末会有完整代码）

【1】创建一个类，我这里取名TabBarViewPager，然后继承ViewPager

【2】在TabBarViewPager类里面，添加构造函数、onTouchEvent（可以使滑动页面失效，只能使用下方的导航栏）

【3】在需要用到的类（本文的类是TabBar.java），添加相关会用到的对象

【4】在TabBar里面添加内部类ViewPagerAdapter，继承自PagerAdapter，往里面添加构造函数，并且复写5个方法

【5】添加函数initTabLayoutView（方便管理）

【6】在onCreate里面用图片数量填充tabImg

【7】填充后，执行initTabLayoutView

【8】layout布置、style内容

大致步骤的细节如下

【细节1、2】创建类，如果规定用户只能使用导航栏切换，在onTouchEvent里面把第一行注释，下面的两行注释拿掉

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class TabBarViewPager extends ViewPager { // 创建一个类，继承ViewPager
    // 构造函数
    public TabBarViewPager(@NonNull Context context) { 
        super(context);
    }

    // 构造函数
    public TabBarViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) { // onTouchEvent
        return super.onTouchEvent(ev);
        //requestDisallowInterceptTouchEvent(true); // 屏蔽触摸事件
        //return false; // 禁止页面滑动事件
    }
}

【细节3】添加对象

TabBarViewPager mViewPager // 刚刚自己创建的类，实现页面切换

TabLayout mTabLayout // 导航栏需要

LayoutInflater mInflater // 页面绑定xml需要

View view1,view2,view3,view4,view5 // 添加页面需要

List<View> mViewList = new ArrayList<>() // 所有页面的集合

int[] tabImg // 导航栏图片需要，这里没给数量，等等在onCreate里面用图片数量来决定

【细节4】写内部类

class ViewPagerAdapter extends PagerAdapter {
        private List<View> mViewList;
        private Context context;
        private int[] tabImg;

        private ViewPagerAdapter(Context context, List<View> mViewList, int[] tabImg) { // 构造函数
            this.mViewList = mViewList;
            this.context = context;
            this.tabImg = tabImg;
        }

        @Override
        public int getCount() {
            return mViewList.size();
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView(mViewList.get(position));
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) { // 导航栏的图片
            Drawable dImage = context.getResources().getDrawable(tabImg[position]);
            dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());

            SpannableString sp = new SpannableString(" "); // 这里要给图片留一个字符的空间
            ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);
            sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return sp;
        }
  }

 

【细节5】添加init函数

void initTabLayoutView() {
        mViewPager = findViewById(R.id.vp_view);
        mTabLayout = findViewById(R.id.tabs);
        mInflater = LayoutInflater.from(this);
        view1 = mInflater.inflate(R.layout.layout_view1, null);
        view2 = mInflater.inflate(R.layout.layout_view2, null);
        view3 = mInflater.inflate(R.layout.layout_view3, null);
        view4 = mInflater.inflate(R.layout.layout_view4, null);
        view5 = mInflater.inflate(R.layout.layout_view5, null);

        mViewList.add(view1);
        mViewList.add(view2);
        mViewList.add(view3);
        mViewList.add(view4);
        mViewList.add(view5);

        mTabLayout.setTabMode(TabLayout.MODE_FIXED); // 设置tab模式为系统默认模式

        ViewPagerAdapter mVPAdapter = new ViewPagerAdapter(this, mViewList, tabImg);
        mViewPager.setAdapter(mVPAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
  }

 

【细节6、7】在onCreate里面添加最后代码

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide(); // 隐藏标题栏
        setContentView(R.layout.cell_tabbar_view);

        tabImg = new int[] {
                R.drawable.tab_icon1,
                R.drawable.tab_icon2,
                R.drawable.tab_icon3,
                R.drawable.tab_icon4,
                R.drawable.tab_icon5
        };
        initTabLayoutView(); // 初始化“页面”和“导航栏”
    }

【细节8】onCreate里面的cell_tabbar_view（layout布置）、style内容

其中

【xxxxx】是你自己的项目名称

【TabBarViewPager】是刚刚创建过的类

【android.support.design.widget.TabLayout】是依赖包的东西，添加的方法：https://www.cnblogs.com/PureHeart/p/10342247.html

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <com.example.xxxxx.TabBarViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="11"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#cccccc"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabTextAppearance="@style/styleTabBarLayout"/>

</LinearLayout>

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="styleTabBarLayout" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAllCaps">false</item>
        <!-- 这两个属性一定要有，要不然图片不会显示 -->
    </style>

</resources>

完整代码

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v7.app.AppCompatActivity;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

public class TabBar extends AppCompatActivity {

    private TabBarViewPager mViewPager;
    private TabLayout mTabLayout;
    private LayoutInflater mInflater;
    private View view1,view2,view3,view4,view5;
    private List<View> mViewList = new ArrayList<>();
    private int[] tabImg;

    void initTabLayoutView() {
        mViewPager = findViewById(R.id.vp_view);
        mTabLayout = findViewById(R.id.tabs);
        mInflater = LayoutInflater.from(this);
        view1 = mInflater.inflate(R.layout.layout_view1, null);
        view2 = mInflater.inflate(R.layout.layout_view2, null);
        view3 = mInflater.inflate(R.layout.layout_view3, null);
        view4 = mInflater.inflate(R.layout.layout_view4, null);
        view5 = mInflater.inflate(R.layout.layout_view5, null);

        mViewList.add(view1);
        mViewList.add(view2);
        mViewList.add(view3);
        mViewList.add(view4);
        mViewList.add(view5);

        mTabLayout.setTabMode(TabLayout.MODE_FIXED); // 设置tab模式为系统默认模式

        ViewPagerAdapter mVPAdapter = new ViewPagerAdapter(this, mViewList, tabImg);
        mViewPager.setAdapter(mVPAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    class ViewPagerAdapter extends PagerAdapter {
        private List<View> mViewList;
        private Context context;
        private int[] tabImg;

        private ViewPagerAdapter(Context context, List<View> mViewList, int[] tabImg) {
            this.mViewList = mViewList;
            this.context = context;
            this.tabImg = tabImg;
        }

        @Override
        public int getCount() {
            return mViewList.size();
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView(mViewList.get(position));
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            Drawable dImage = context.getResources().getDrawable(tabImg[position]);
            dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());

            SpannableString sp = new SpannableString(" "); // 这里要给图片留一个字符的空间
            ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);
            sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return sp;
        }
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide(); // 隐藏标题栏
        setContentView(R.layout.cell_tabbar_view);

        tabImg = new int[] {
                R.drawable.tab_icon1,
                R.drawable.tab_icon2,
                R.drawable.tab_icon3,
                R.drawable.tab_icon4,
                R.drawable.tab_icon5
        };
        initTabLayoutView(); // 初始化“页面”和“导航栏”
    }
}