Android - 自定义Tablayout + ViewPager（设置可滑动）
1、创建TabFragment主要把Viepager添加进去但是这里是否需要Viewpager滑动要去重写ViewPager去控制（代码下面）
/*
* 自定义 首页切换
*/
public class TabFragment extends RelativeLayout {
//当前上线文对象
public Context context;
//当前基础配置数据
private BasicConfiguration basicConfiguration;
public TabFragment(Context context) {
super(context);
}
public TabFragment(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
//设置配置数据
public void setData(BasicConfiguration basicConfiguration) {
this.basicConfiguration = basicConfiguration;
initView(basicConfiguration);
}
//获取当前配置数据
public BasicConfiguration getData() {
if (basicConfiguration == null) {
basicConfiguration = new BasicConfiguration();
}
return basicConfiguration;
}
private void initView(BasicConfiguration basicConfiguration) {
View tabFragment = LayoutInflater.from(context).inflate(R.layout.layout_tabfragment, this, false);
//viewPage
CustomViewPager tabFragment_viewpager = tabFragment.findViewById(R.id.tabFragment_viewpager);
//取消滑动阴影
tabFragment_viewpager.setOverScrollMode(OVER_SCROLL_NEVER);
//底部导航栏
LinearLayout tabFragment_bottomRoot = tabFragment.findViewById(R.id.tabFragment_bottomRoot);
//设置Viewpager 是否可滑动
tabFragment_viewpager.setViewPagerState(basicConfiguration.isViewPagerIsScroll());
PagerAdapter pagerAdapter = new PagerAdapter();
tabFragment_viewpager.setAdapter(pagerAdapter);
//设置Viewpager 最少加载条目数
if (basicConfiguration.getLimitPage() != -1){
tabFragment_viewpager.setOffscreenPageLimit(basicConfiguration.getLimitPage());
}
//设置底部tab高度
if (basicConfiguration.getTabHeight() != -1) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) tabFragment_bottomRoot.getLayoutParams();
layoutParams.height = Dp2Px(basicConfiguration.getTabHeight());
tabFragment_bottomRoot.setLayoutParams(layoutParams);
}
//设置底部tab背景颜色
if (basicConfiguration.getTabBgColor() != -1) {
tabFragment_bottomRoot.setBackgroundResource(basicConfiguration.getTabBgColor());
}
//添加tab条目
if (basicConfiguration.getPageData().size() > 0) {
for (BasicConfiguration.TabPageData page : basicConfiguration.getPageData()) {
View tabItem = LayoutInflater.from(context).inflate(R.layout.layout_tabitem, tabFragment_bottomRoot, false);
ImageView tabImage = tabItem.findViewById(R.id.tabImage);
TextView tabTitle = tabItem.findViewById(R.id.tabTitle);
//设置图片的宽高
if (basicConfiguration.getImageDimension() != -1) {
tabImage.setLayoutParams(new LinearLayout.LayoutParams(Dp2Px(basicConfiguration.getImageDimension()),Dp2Px(basicConfiguration.getImageDimension())));
}
//设置文本字体
tabTitle.setText(TextUtils.isEmpty(page.getTabTitle()) ? "" : page.getTabTitle());
//设置当前显示图片 字体
if (page.isShowCurrentPage()) {
tabImage.setImageResource(page.getSelectImage());
tabTitle.setTextColor(basicConfiguration.getTitleSelectColor());
} else {
tabImage.setImageResource(page.getUnSelectImage());
tabTitle.setTextColor(basicConfiguration.getTitleUnSelectColor());
}
//设置当前view的标记
tabItem.setTag(page.getTabTitle());
tabFragment_bottomRoot.addView(tabItem);
}
}
//创建监听
this.initListener(tabFragment_viewpager,tabFragment_bottomRoot);
//添加到主布局中
super.addView(tabFragment);
}
//动态设置tab的切换
private void switchTab(LinearLayout tabFragment_bottomRoot,int position){
//所有的状态置为 false
for (BasicConfiguration.TabPageData page : basicConfiguration.getPageData()){
page.setShowCurrentPage(false);
}
//把所需要的的position 为 true
basicConfiguration.getPageData().get(position).setShowCurrentPage(true);
//遍历根据状态去修改图片 和文字颜色
for (int i = 0; i < basicConfiguration.getPageData().size(); i++){
View tabItem = tabFragment_bottomRoot.getChildAt(i);
ImageView tabImage = tabItem.findViewById(R.id.tabImage);
TextView tabTitle = tabItem.findViewById(R.id.tabTitle);
//设置当前显示图片 字体
if (basicConfiguration.getPageData().get(i).isShowCurrentPage()) {
tabImage.setImageResource(basicConfiguration.getPageData().get(i).getSelectImage());
tabTitle.setTextColor(basicConfiguration.getTitleSelectColor());
} else {
tabImage.setImageResource(basicConfiguration.getPageData().get(i).getUnSelectImage());
tabTitle.setTextColor(basicConfiguration.getTitleUnSelectColor());
}
}
}
//设置监听
private void initListener(CustomViewPager tabFragment_viewpager,LinearLayout tabFragment_bottomRoot) {
//设置viewPager滑动监听
if (basicConfiguration.isViewPagerIsScroll()){
tabFragment_viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
switchTab(tabFragment_bottomRoot,position);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//设置tab点击监听
for (int i = 0; i < basicConfiguration.getPageData().size(); i++) {
//获取里面所有的view监听
View childAt = tabFragment_bottomRoot.getChildAt(i);
childAt.setOnClickListener(view -> {
//根据view标记去判断当前点击的那个view
int tagIndex = -1;
for (int j = 0; j < basicConfiguration.getPageData().size(); j++) {
if (basicConfiguration.getPageData().get(j).getTabTitle().equals(view.getTag())){
tagIndex = j;
break;
}
}
//拿到标记去切换tab
switchTab(tabFragment_bottomRoot, tagIndex);
//去切换Fragment
tabFragment_viewpager.setCurrentItem(tagIndex);
});
}
}
class PagerAdapter extends FragmentStatePagerAdapter{
public PagerAdapter() {
super(((FragmentActivity)context).getSupportFragmentManager(),BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
}
@NonNull
@Override
public Fragment getItem(int position) {
return basicConfiguration.getPageData().get(position).getFragment();
}
@Override
public int getCount() {
return basicConfiguration.getPageData().size();
}
}
private int Dp2Px(float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dp * scale + 0.5f);
}
}
2.重写ViewPager 设置是否需要滑动
/*
* 可控制滑动 viewpager
*/
public class CustomViewPager extends ViewPager {
//滑动开关控制常量
private boolean enable = false;
//重写构造
public CustomViewPager(Context context) {
super(context);
}
//重写构造
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
//触碰事件
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (this.enable) {
//开关打开，事件不进行拦截
return super.onTouchEvent(ev);
}
//默认拦截状态
return false;
}
//拦截事件监听
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (this.enable) {
//开关打开，即处理拦截下来的touch事件
return super.onInterceptTouchEvent(ev);
}
//默认状态不处理来接下来的事件
return false;
}
//传递触摸事件
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
//处理事件的分发，将拦截到的事件分发到viewpager下的子view中去
//这个拦截了就没有后续事件发生了，到viewpager为止
if (this.enable) {
return super.dispatchTouchEvent(ev);
}
//一般都不拦的
return super.dispatchTouchEvent(ev);
}
//留一个方法修改开关的开启关闭状态
public void setViewPagerState(Boolean scrollEnable) {
this.enable = scrollEnable;
}
}
3.创建 需要的数据实体类，使用的时候传过来数据便是
/*
* 页面基础配置
*/
public class BasicConfiguration {
//设置 viewPager是否允许滑动 默认不允许
private boolean viewPagerIsScroll = false;
//设置ViewPager最少提前加载的页数 不设置默认
private int limitPage = -1;
//设置底部tab高度 默认
private float tabHeight = -1;
//设置底部栏 背景颜 默认白色
private @ColorInt int tabBgColor = -1;
//设置底部栏 图片 宽高 默认40
private float imageDimension = -1;
//设置底部栏 文本字体 选中颜色
private @ColorRes int titleSelectColor = -1;
//设置底部栏 文本字体 未选中颜色
private @ColorRes int titleUnSelectColor = -1;
//设置是否显示 tab图片 默认显示
private boolean isShowTabImage = true;
//设置 是否显示 tab标题 默认显示
private boolean isShowTabTitle = true;
//设置数据
private List<TabPageData> pageData;
public BasicConfiguration() {
}
public BasicConfiguration(int titleSelectColor, int titleUnSelectColor, List<TabPageData> pageData) {
this.titleSelectColor = titleSelectColor;
this.titleUnSelectColor = titleUnSelectColor;
this.pageData = pageData;
}
public BasicConfiguration(int tabHeight, int tabBgColor, int titleSelectColor, int titleUnSelectColor, List<TabPageData> pageData) {
this.tabHeight = tabHeight;
this.tabBgColor = tabBgColor;
this.titleSelectColor = titleSelectColor;
this.titleUnSelectColor = titleUnSelectColor;
this.pageData = pageData;
}
public BasicConfiguration(int tabHeight, int tabBgColor, int imageDimension, int titleSelectColor, int titleUnSelectColor, List<TabPageData> pageData) {
this.tabHeight = tabHeight;
this.tabBgColor = tabBgColor;
this.imageDimension = imageDimension;
this.titleSelectColor = titleSelectColor;
this.titleUnSelectColor = titleUnSelectColor;
this.pageData = pageData;
}
public boolean isViewPagerIsScroll() {
return viewPagerIsScroll;
}
public void setViewPagerIsScroll(boolean viewPagerIsScroll) {
this.viewPagerIsScroll = viewPagerIsScroll;
}
public int getLimitPage() {
return limitPage;
}
public void setLimitPage(int limitPage) {
this.limitPage = limitPage;
}
public float getTabHeight() {
return tabHeight;
}
public void setTabHeight(float tabHeight) {
this.tabHeight = tabHeight;
}
public int getTabBgColor() {
return tabBgColor;
}
public void setTabBgColor(int tabBgColor) {
this.tabBgColor = tabBgColor;
}
public float getImageDimension() {
return imageDimension;
}
public void setImageDimension(float imageDimension) {
this.imageDimension = imageDimension;
}
public int getTitleSelectColor() {
return titleSelectColor;
}
public void setTitleSelectColor(int titleSelectColor) {
this.titleSelectColor = titleSelectColor;
}
public int getTitleUnSelectColor() {
return titleUnSelectColor;
}
public void setTitleUnSelectColor(int titleUnSelectColor) {
this.titleUnSelectColor = titleUnSelectColor;
}
public boolean isShowTabImage() {
return isShowTabImage;
}
public void setShowTabImage(boolean showTabImage) {
isShowTabImage = showTabImage;
}
public boolean isShowTabTitle() {
return isShowTabTitle;
}
public void setShowTabTitle(boolean showTabTitle) {
isShowTabTitle = showTabTitle;
}
public List<TabPageData> getPageData() {
return pageData;
}
public void setPageData(List<TabPageData> pageData) {
this.pageData = pageData;
}
public static class TabPageData{
//是否默认显示当前页面
private boolean isShowCurrentPage;
//当前页面
private Fragment fragment;
//选中图片
private int selectImage;
//未选中图片
private int unSelectImage;
//当前tab标题
private String tabTitle;
public TabPageData(boolean isShowCurrentPage,Fragment fragment, int selectImage, int unSelectImage, String tabTitle) {
this.isShowCurrentPage = isShowCurrentPage;
this.fragment = fragment;
this.selectImage = selectImage;
this.unSelectImage = unSelectImage;
this.tabTitle = tabTitle;
}
public boolean isShowCurrentPage() {
return isShowCurrentPage;
}
public void setShowCurrentPage(boolean showCurrentPage) {
isShowCurrentPage = showCurrentPage;
}
public Fragment getFragment() {
return fragment;
}
public void setFragment(Fragment fragment) {
this.fragment = fragment;
}
public int getSelectImage() {
return selectImage;
}
public void setSelectImage(int selectImage) {
this.selectImage = selectImage;
}
public int getUnSelectImage() {
return unSelectImage;
}
public void setUnSelectImage(int unSelectImage) {
this.unSelectImage = unSelectImage;
}
public String getTabTitle() {
return tabTitle;
}
public void setTabTitle(String tabTitle) {
this.tabTitle = tabTitle;
}
}
}
4.里面用到的布局条目
layout_tabfragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/tabFragment_root"
android:layout_height="match_parent">
<com.example.tabfragment.CustomViewPager
android:id="@+id/tabFragment_viewpager"
android:layout_width="match_parent"
android:layout_above="@id/tabFragment_bottomRoot"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/tabFragment_bottomRoot"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="52dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
layout_tabitem.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/tabImage"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:id="@+id/tabTitle"
/>
</LinearLayout>
5.最后的使用 方式 如下↓
public class ChipsActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chips);
initTabFragment();
}
private void initTabFragment() {
TabFragment myTab = findViewById(R.id.myTab);
List<BasicConfiguration.TabPageData> pageData = new ArrayList<>();
pageData.add(new BasicConfiguration.TabPageData(true,new MyFragment(),
R.mipmap.icon_tab_home_pre,R.mipmap.icon_tab_home,"首页"));
pageData.add(new BasicConfiguration.TabPageData(false,new CarFragment(),
R.mipmap.icon_tab_gouwuche_pre,R.mipmap.icon_tab_gouwuche,"购物车"));
pageData.add(new BasicConfiguration.TabPageData(false,new ModeFragment(),
R.mipmap.icon_tab_wode_pre,R.mipmap.icon_tab_wode,"我的"));
//创建初始化数据
BasicConfiguration basicConfiguration = new BasicConfiguration(58,
R.color.white,
Color.parseColor("#03DAC5"),
Color.parseColor("#999999"),
pageData);
basicConfiguration.setImageDimension(32);
basicConfiguration.setViewPagerIsScroll(true);
myTab.setData(basicConfiguration);
}
}
6.最后想要的效果在这
