自定义控件之-ViewPagerIndicator

经常使用ViewPagerIndicator，今天自己写了一个，记录下来作为以后参考使用。先看一下效果：



先贴出使用方法的代码:

MainActivity代码：

public class MainActivity extends Activity {
private ViewPager vp;
private Indicator1 indicator;
private String[] titles = { "新闻", "美女", "健康", "正能量", "特卖", "图片", "推荐",
"热点", "淄博", "视频", "社会", "小日本", "哈哈哈" };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
indicator = (Indicator1) findViewById(R.id.indicator);
vp = (ViewPager) findViewById(R.id.vp);
indicator.setTitles(vp, titles, new OnTitleClickListener() {

@Override
public void onClick(int position) {
Toast.makeText(getApplicationContext(), titles[position],
Toast.LENGTH_SHORT).show();
}
});
vp.setAdapter(new PagerAdapter() {

@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView((View) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
TextView tv = new TextView(MainActivity.this);
tv.setGravity(Gravity.CENTER);
tv.setTextSize(40);
tv.setText(titles[position]);
container.addView(tv);
return tv;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getCount() {
return titles.length;
}
});

}
}

activity_main.xml代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<com.example.myindicator.Indicator1
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</com.example.myindicator.Indicator1>

<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>

</LinearLayout>

上面都非常好理解，就是简单的使用，下面贴出Indicator1的代码：

public class Indicator1 extends LinearLayout implements OnPageChangeListener,
OnClickListener {

private int blockWidth;// 滑块宽度
private int blockHeight;// 滑块高度
private int blockTop;// 滑块顶部的坐标
private int blockLeft;// 滑块左上角的坐标
private String[] titles;// 保存导航的标题
private int titleLength;// 标题的个数
private int screenWidth;// 屏幕的宽度
private Paint paint;// 画滑块的画笔
private int visibleTitleCount = 4;// 默认的可见的标题栏数量
private boolean isFirst = true;// 是否是第一次加载
private OnTitleClickListener listener;// 点击某个标题的时间监听器
private ViewPager viewPager;// 关联的ViewPager

public Indicator1(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}

public Indicator1(Context context) {
super(context);
init(context);
}

private void init(Context context) {
// 将滑块的高度转成px,默人为10dp
blockHeight = dp2px(10);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);// 抗锯齿
paint.setColor(Color.RED);// 设置滑块颜色
setOrientation(LinearLayout.HORIZONTAL);// 水平布局
// 这里需要设置背景，否则onDraw不会调用;或者调用setWillNotDraw(false)方法，也会调用onDraw方法
setBackgroundColor(Color.TRANSPARENT);
setGravity(Gravity.CENTER_VERTICAL);// 设置对其方式为垂直居中
// 获取屏幕的宽度
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int left = blockLeft;
int top = blockTop;
int right = blockLeft + blockWidth;
int bottom = blockHeight + blockTop;
// 绘制滑块
canvas.drawRect(left, top, right, bottom, paint);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 计算每个滑块的宽度
blockWidth = screenWidth / visibleTitleCount;
titleLength = titles.length;// 给标题个数赋值
// 计算加入标题后的宽度,这里是总的标题的个数乘以每个标题的宽度
int width = titleLength * blockWidth;
int height = getMeasuredHeight();// 得到测量的高度
int topGap = dp2px(5);// 增加一个滑块和标题的距离，不然会挨太近不好看
blockTop = height + topGap;// 计算滑块顶部的位置
height = height + blockHeight;
// 重新测量宽高
setMeasuredDimension(width, height);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (isFirst) {
MarginLayoutParams lp = null;
TextView tv = null;
// 循环添加标题
for (int i = 0; i < titleLength; i++) {
tv = new TextView(getContext());
tv.setText(titles[i]);
tv.setTextSize(16);
tv.setTag(i);// 为了识别点击时间中点击了哪个位置的标题，这里将下表设置为tag
tv.setGravity(Gravity.CENTER);
lp = new MarginLayoutParams(blockWidth,
MarginLayoutParams.WRAP_CONTENT);
lp.leftMargin = i * blockWidth;
tv.setOnClickListener(this);// 设置点击事件
addView(tv, lp);
}
isFirst = false;
}
}

/**
* 为Indicator设置标题栏
*
* @param viewPager
*            关联的ViewPager
* @param titles
*            标题数组
* @param listener
*            OnTitleClickListener
*/
public void setTitles(ViewPager viewPager, String[] titles,
OnTitleClickListener listener) {
if (viewPager == null) {
throw new IllegalArgumentException("ViewPager不能为空");
}
if (titles == null || titles.length == 0) {
throw new IllegalArgumentException("titles不能为空，或者长度必须大于0");
}
this.viewPager = viewPager;
this.titles = titles;
viewPager.setOnPageChangeListener(this);
this.listener = listener;
}

@Override
public void onPageScrollStateChanged(int position) {

}

@Override
public void onPageScrolled(int position, float fraction, int arg2) {
// 计算滑块的左边位置
blockLeft = (int) ((position + fraction) * blockWidth);
moveTitle(position, fraction);
invalidate();
}

@Override
public void onPageSelected(int position) {

}

/**
* 移动标题
*
* @param position
*            当前viewPager的位置
* @param fraction
*            百分比
*/
private void moveTitle(int position, float fraction) {
// 如果滑块移动到屏幕可视标题个数的倒数第1个，并且标题个数大于一屏的可是个数，则开始移动整个标题栏
if (position >= visibleTitleCount - 2
&& titleLength > visibleTitleCount) {
if (position >= titles.length - 2) {
// 如果移动到了最后一个标题，则停止移动,防止后面出现空白
return;
}
// 计算移动的距离
int temp = (position - (visibleTitleCount - 2)) * blockWidth
+ (int) (blockWidth * fraction);
scrollTo(temp, 0);
}
}

/**
* 将dp转成px
*
* @param dp
* @return
*/
private int dp2px(int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
getResources().getDisplayMetrics());
}

@Override
public void onClick(View v) {
// 得到对应的点击标题的下标
int position = (Integer) v.getTag();
// 计算点击的标题对应的滑块需要滑动的左边位置
blockLeft = (int) (position * blockWidth);
// 将ViewPager设置显示到这个标题对应的位置
viewPager.setCurrentItem(position);
// 回调OnTitleClickListener中的onClick方法
if (listener != null) {
listener.onClick(position);
}
// 重绘
invalidate();
}

/**
* 某个标题被点击的监听器
*
* @author Administrator
*
*/
public interface OnTitleClickListener {
/**
* 返回对应的下标
*
* @param position
*/
public void onClick(int position);
}

}

这里简直实现了一些功能，还可以加一些自定义属性等使功能更加丰富。