先上图，然后说大致步骤，最后再说细节
图片效果：依序点击导航栏左一、左二、中、右二、右一，最后直接滑动页面（不依靠导航栏切换）
大致步骤如下（文末会有完整代码）
【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(); // 初始化“页面”和“导航栏”
}
}
