当前位置： 移动技术网 > 移动技术>移动开发>Android > Android自定义ViewPager指示器

Android自定义ViewPager指示器

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

1.概述

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

　　

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> {
 /**
  * 获取tab view
  */
 public abstract t gettabview(int position);

 /**
  * 获取角标view
  */
 public view getindexview() {
  return null;
 }

 /**
  * 高亮当前tab
  */
 public void highlighttabview(t tabview) {

 }

 /**
  * 恢复当前tab
  */
 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 的源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网