Android自定义ViewPager指示器

作者:z240336124 时间:2023-11-29 03:30:31 

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

1.概述

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

Android自定义ViewPager指示器

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 的源码下载:http://xiazai.jb51.net/201611/yuanma/AndroidViewPager(jb51.net).rar

标签:Android,ViewPager,指示器
0
投稿

猜你喜欢

  • 怎样使用PowerMockito 测试静态方法

    2022-06-18 08:28:59
  • C#多线程之取消架构介绍

    2022-03-06 22:14:42
  • 通过面试题解析 Java 类加载机制

    2022-08-13 12:49:16
  • 使用SpringDataJpa创建中间表

    2023-11-23 18:01:28
  • Android Tabhost使用方法详解

    2023-10-02 12:46:46
  • SpringMVC接收复杂集合对象(参数)代码示例

    2023-01-29 18:33:51
  • WPF设置窗体可以使用鼠标拖动大小的方法

    2023-05-11 12:38:50
  • Javaweb El表达式实例详解

    2021-06-21 22:59:32
  • Flutter底部导航栏的实现方式

    2023-11-05 18:21:36
  • 使用adb命令向Android模拟器中导入通讯录联系人的方法

    2022-12-21 15:39:56
  • 详解C# 不能用于文件名的字符

    2023-03-05 07:44:45
  • C#实现计算年龄的简单方法汇总

    2022-12-26 01:12:41
  • Python安装Jupyter Notebook配置使用教程详解

    2023-08-31 02:52:03
  • java并发编程之ThreadLocal详解

    2023-03-15 11:44:33
  • 深入了解Java对象的克隆

    2021-10-29 13:59:35
  • 5步学会使用VideoView播放视频

    2023-09-12 05:51:07
  • Android开发TextView内的文字实现自动换行

    2023-06-21 12:27:48
  • springboot jpa 延迟加载问题的2种解决

    2021-10-14 03:05:20
  • Android实现布局全屏

    2023-11-29 06:44:13
  • Java实战项目之校园跑腿管理系统的实现

    2023-11-11 10:29:09
  • asp之家 软件编程 m.aspxhome.com