文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android自定义ViewPager指示器

2022-06-06 07:06

关注

本文实例为大家分享了Android ViewPager指示器的制作方法,供大家参考,具体内容如下

1.概述

  ViewPageIndicator这个开源框架大家都接触过,个人感觉还不错就是用起来比较麻烦,需要这里配置那里配置效果定制起来也不方便。我第一次使用的时候就一直出不来效果,后来找了很久发现是activity的主题没有配置好。今天我们自己来造个轮子实现一把,其中用到了Adapter模式,如果不清楚这个模式的请看我的Android源码设计模式分析://www.jb51.net/article/96291.htm,下面看一下效果:

  

2.实现 

1).实现基本效果自定义HorizontalScrollView extends HorizontalScrollView,设置ViewPager根据个数不断遍历添加子View。


 public class ViewPagerIndicator extends HorizontalScrollView{
 public ViewPagerIndicator(Context context) {
  this(context, null);
 }
 public ViewPagerIndicator(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 public ViewPagerIndicator(Context context, AttributeSet attrs,
   int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  this.mContext = context;
 }
 @Override
 public void setViewPager(ViewPager viewPager) {
  if (viewPager == null) {
   throw new NullPointerException("viewPager is null...");
  }
  this.mViewPager = viewPager;
  int count = mViewPager.getAdapter().getCount();
  mContanierGroup.removeAllViews();
  // 循环添加tabView(TextView)
  for (int i = 0; i < count; i++) {
   final TextView itemTv = new TextView(mContext);
   itemTv.setText(this.mViewPager.getAdapter().getPageTitle(i));
   setItemClickEvent(itemTv, i);
   mContanierGroup.addTabView(itemTv);
   setItemClickEvent(itemTv, i);
   mContanierGroup.addTabView(itemTv);
  }
  setItemParams();
  mAdapter.highLightTabView(mContanierGroup.getTabView(mCureentItem));
  this.mViewPager.setOnPageChangeListener(this);
 }
 private void setItemParams() {
  if (mVisibleTabCount != 0) {
   final int childCount = mViewPager.getAdapter().getCount();
   mRunnable = new Runnable() {
    @Override
    public void run() {
     int tabWidth = getWidth() / mVisibleTabCount;
     // 循环遍历设置Tab宽度
     for (int index = 0; index < childCount; index++) {
      LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContanierGroup
        .getTabView(index).getLayoutParams();
      params.width = tabWidth;
     }
     // 设置宽度,高度,和角标指示器
     mContanierGroup.setTabWidth(tabWidth);
     mContanierGroup.getContainer().getLayoutParams().height = getHeight();
     mContanierGroup.setIndicatorView(mAdapter.getIndexView());
     mRunnable = null;
    }
   };
   post(mRunnable);
  }
 }
}

2).设置ViewPager的滚动监听,使ViewPager和TabView一起联动


 @Override
 public void onPageScrollStateChanged(int position) {
  if (position == 0) {
   // 设置为不是点击
   mIsClick = false;
  }
  if (mPageChangeListener != null)
   mPageChangeListener.onPageScrollStateChanged(position);
 }
 @Override
 public void onPageScrolled(int position, float offset, int arg2) {
  scroll(position, offset);
  if (mPageChangeListener != null)
   mPageChangeListener.onPageScrolled(position, offset, arg2);
 }
 @Override
 public void onPageSelected(int position) {
  mCureentItem = position;
  if (mPageChangeListener != null)
   mPageChangeListener.onPageSelected(position);
 }
 
 public void scroll(int position, float offset) {
  int tabWidth = mContanierGroup.getTabView(0).getWidth();
  // 让选中Tab的一直在最中间
  int total = (int) ((position + offset) * tabWidth);
  int green = (getWidth() - tabWidth) / 2;
  // 滚动的距离
  int scroll = total - green;
  if (!mIsClick) {
   this.scrollTo(scroll, 0);
   mContanierGroup.scrollIndicator(position, offset);
  }
 }

3).最后我们采用适配器Adapter模式,完成高亮和下标指示器。


public abstract class IndicatorAdapter<T extends View> {
 
 public abstract T getTabView(int position);
 
 public View getIndexView() {
  return null;
 }
 
 public void highLightTabView(T tabView) {
 }
 
 public void restoreTabView(T tabView) {
 }
}

4).最后我们来看在activity中怎么使用,在IndicatorAdapter有四个方法,我们只需要实现一个方法,其余三个方法如果不使用可以不复写。以Adapter的形式暴露出来,那么用户可以自己去实现而不必受局限。


 mIndicator.setAdapter(mViewpager, new IndicatorAdapter<TextView>() {
   @Override
   public TextView getTabView(int position) {
    TextView tabView = new TextView(getBaseContext());
    tabView.setTextColor(Color.WHITE);
    tabView.setText(mTitles.get(position));
    tabView.setPadding(20, 20, 20, 20);
    tabView.setGravity(Gravity.CENTER);
    return tabView;
   }
   @Override
   public View getIndexView() {
    ImageView view = new ImageView(getBaseContext());
    view.setImageResource(R.drawable.corners_login_nomral);
    view.setPadding(25, 0, 25, 0);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
      LayoutParams.WRAP_CONTENT, 6);
    view.setLayoutParams(params);
    return view;
   }
   @Override
   public void highLightTabView(TextView tabView) {
    final TextView itemView = (TextView) tabView;
    itemView.setTextColor(Color.RED);
   }
   @Override
   public void restoreTabView(TextView tabView) {
    final TextView itemView = (TextView) tabView;
    itemView.setTextColor(Color.WHITE);
   }
  });

不需配置的ViewPagerIndicator 的源码下载:http://xiazai.jb51.net/201611/yuanma/AndroidViewPager(jb51.net).rar

您可能感兴趣的文章:Android 中 viewpager 滑动指示器的实例代码Android开发实现的ViewPager引导页功能(动态加载指示器)详解Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件Android实现带指示器的自动轮播式ViewPagerAndroid自定义View Flyme6的Viewpager指示器Android应用中仿今日头条App制作ViewPager指示器Android应用中使用ViewPager和ViewPager指示器来制作Tab标签TabLayout实现ViewPager指示器的方法


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯