Android自定义ViewPager指示器

2019-12-12 04:49:48

字体：大中小

来源：转载

供稿：网友

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

1.概述

　　ViewPageIndicator这个开源框架大家都接触过，个人感觉还不错就是用起来比较麻烦，需要这里配置那里配置效果定制起来也不方便。我第一次使用的时候就一直出不来效果，后来找了很久发现是activity的主题没有配置好。今天我们自己来造个轮子实现一把，其中用到了Adapter模式，如果不清楚这个模式的请看我的Android源码设计模式分析：//www.VeVB.COm/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> { /**  * 获取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.VeVB.COm/201611/yuanma/AndroidViewPager(VeVB.COm).rar

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

上一篇：Android时光轴实现淘宝物流信息浏览效果

下一篇：Android设计模式之适配器(Adapter)模式