您的位置：首页 > 移动开发 > Android开发

Android自定义ViewPager指示器

2016-11-02 11:12 821 查看

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

1.概述

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

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 指示器

相关文章推荐

新的分享

章节导航