毕竟是花样展示
这里就设计到ViewPager的指示器的运用了
Android本身带有PagerTitleStrip,但原生的并不一定符合我们的审美
也见过太多自定义的Indicator,大都在控件外绘制
到了这里,大家有没有考虑到,如果我们把这个绘制指示器的功能一并放在我们的自定义控件了呢
这样是不是代码简化了好多
这里带着大家试试
1.首先,自定义控件属性
<resources>
<declare-styleable name="Indicator">
<attr name="color" format="color|reference" />
</declare-styleable>
</resources>
2. 编写我们的自定义控件,这里我是继承LinearLayout ,测量绘制大大简化,都教给系统了
MyIndicator.class
/**
* @author ruyi
* @version 创建时间:2016年5月26日 下午5:55:14
*
*/
public class MyIndicator extends LinearLayout {
private Paint mPaint;
private int mTop;
private int mLeft;
private int mWidth;
private int mHeight = 5;
private int mColor;
private int mChildCount;
public MyIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
setOrientation(LinearLayout.HORIZONTAL);
setBackgroundColor(Color.TRANSPARENT); // 必须设置背景,否则onDraw不执行
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.Indicator, 0, 0);
mColor = a.getColor(R.styleable.Indicator_color, 0X0000FF);
a.recycle();
mPaint = new Paint();
mPaint.setColor(mColor);
mPaint.setAntiAlias(true);
}
/**
* 布局加载结束 ,获取childView 个数
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mChildCount = getChildCount();
}
/**
* 测量控件宽高, 在本来的高度上在加上指示器条的高度
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mTop = getMeasuredHeight();
int width = getMeasuredWidth();
int height = mTop + mHeight;
mWidth = width / mChildCount; //条目4等分
setMeasuredDimension(width, height);
}
public void scroll(int position, float offset) {
mLeft = (int) ((position + offset) * mWidth);
invalidate();
}
/**
* 除绘制组件外,额外绘制指示器(一个矩形)
*/
@Override
protected void onDraw(Canvas canvas) {
Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);
canvas.drawRect(rect, mPaint);
super.onDraw(canvas);
}
}
这里指示器高度我们固定为5,宽度为屏幕宽度的1/4
在构造方法中初始化属性
在onFinishInflate(),中得到ChildView个数
重写onMeasure()方法,设置自定义控件为 在本来的高度上在加上指示器条的高度
在onDraw()方法里绘制指示器
当然必须提供一个方法来供外界改变指示器的位置方法,来达到动态滑动即 scroll(),设置后再调用重绘
我先贴下布局代码和调用方法,在解释原理
xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ruiyi="http://schemas.android.com/apk/res/com.ruiyi.testtab"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.ruiyi.testtab.MyIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dip"
android:paddingTop="10dip"
android:weightSum="4"
ruiyi:color="#FFD02090" >
<TextView
android:id="@+id/tab_one"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="小学" />
<TextView
android:id="@+id/tab_two"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="初中" />
<TextView
android:id="@+id/tab_three"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="高中" />
<TextView
android:id="@+id/tab_four"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="大学" />
</com.ruiyi.testtab.MyIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
设置总权重weightSun = 4 , 每个子View的权重为1
自定义属性赋值,记得命名空间的限制
调用 Activity
mViewpager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
Log.i("ASDFGHJKL", "11111111------"+position);//TODO
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
mIndicator.scroll(position, positionOffset);
}
@Override
public void onPageScrollStateChanged(int position) {
}
});
我简单解释下
指示器矩形框定义mTop, mLeft, mWidth, mHeight = 5;
1)宽度与子View宽度一致
onMeasure() 中
mLeft = 0;
mTop = getMeasuredHeight(); -----测量控件最原先的高,即上面存在的Title 的高
mWidth = getMeasuredWidth() / mChildCount; ------宽为屏幕宽度除以子View数量
mHeight = 5; -----高度固定为5
最初绘制时,指示器得位置为上述值,布局加载结束后draw了一个与子View宽度一致的指示器
当ViewPager滑动时,mLeft = (int) ((position + offset) * mWidth);
2)当设置指示器宽度为子View宽度的一半时
onMeasure() 中
mLeft = (getMeasuredWidth() / mChildCount)/4;
mTop = getMeasuredHeight(); -----测量控件最原先的高,即上面存在的Title 的高
mWidth = (getMeasuredWidth() / mChildCount)/2; ------宽为屏幕宽度除以子View数量
mHeight = 5; -----高度固定为5
最初绘制时,指示器得位置为上述值,布局加载结束后draw了一个与子View宽度一致的指示器(mLeft = 屏幕宽度/16)
当ViewPager滑动时,mLeft = (int)(m/4+(position+offset)*m);
(int position, float offset) 这里的position, offset为ViewPager 滑动监听传递过来的值
嗯,就这样