【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(); // 初始化“页面”和“导航栏”
     }
 }