【Android】自己定义控件——仿天猫Indicator

今天来说说类似天猫的Banner中的小圆点是怎么做的(图中绿圈部分)

【Android】自己定义控件——仿天猫Indicator


在学习自己定义控件之前,我用的是很二的方法,直接在布局中放入多个ImageView,然后代码中依据Pager切换来改变图片。这样的方法尽管能够在切换完毕后正确显示小圆点,可是却做不到例如以下图中的切换中的状态显示:

【Android】自己定义控件——仿天猫Indicator



今天学到了自己定义控件,正好能够把这个坑填上。



说一下思路:

在ViewPager翻动的时候,会调用

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

当中positionOffset为翻动的百分比,所以仅仅要将这个參数传入自己定义控件,就能够计算出实心圆点的坐标


实战:

PagerIndicator.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class PagerIndicator extends View {
	// 空心圆半径
	private int RADIUS = 10;
	// 空心圆画笔
	private Paint mBgPaint;
	// 实心圆画笔(当前页)
	private Paint mPaint;
	// 圆点个数,默觉得5,设计布局时能够预览
	private int mCount = 5;
	// 当前实心圆的位置
	private int mPosition;
	// 偏移量(百分比)
	private float mOffset;
	// 第一个空心圆的圆心坐标
	private int startY;
	private int startX;

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		// 画出空心的小圆点
		for (int i = 0; i < mCount; i++) {
			canvas.drawCircle(startX + i * 3 * RADIUS, startY, RADIUS, mBgPaint);
		}

		// 画出指示当前位置的原点,因为高度固定,所以仅仅计算了X坐标
		float x = startX + (mPosition + mOffset) * 3 * RADIUS;
		canvas.drawCircle(x, startY, RADIUS - 1, mPaint);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		// 获取第一个空心圆的圆心坐标
		startX = w - 3 * RADIUS * mCount;
		startY = h / 2;
		super.onSizeChanged(w, h, oldw, oldh);
	}

	// 设置圆个数
	public void setCount(int count) {
		mCount = count;
	}

	// 获取偏移量并重绘indicator
	public void onPageScrolled(int position, float offset) {
		mPosition = position;
		mOffset = offset;
		invalidate();
	}

	// 创建带AttributeSet參数的构造方法使控件能够直接拖动到布局中并预览
	public PagerIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);
		initPaint();
	}

	// 初始化画笔
	private void initPaint() {
		// 空心圆画笔
		mBgPaint = new Paint();
		mBgPaint.setColor(Color.GRAY);
		mBgPaint.setAntiAlias(true);
		mBgPaint.setStyle(Paint.Style.STROKE);
		mBgPaint.setStrokeWidth(2);
		// 实心圆画笔
		mPaint = new Paint();
		mPaint.setColor(Color.rgb(197, 135, 87));
		mPaint.setAntiAlias(true);

	}

}

布局的设置:

【Android】自己定义控件——仿天猫Indicator

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp" >

    <android.support.v4.view.ViewPager
        android:id="@+id/banner_pager"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#C0FFFF" />


    <这里改成你自己的包名.PagerIndicator
        android:id="@+id/pagerIndicate1"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#C0C0C0"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />

</RelativeLayout>

在使用到的地方:

初始化的方法,反正仅仅要比使用早调用到即可

private void initPagerIndicator() {
	mPagerIndicator = (PagerIndicator) mLayout.findViewById(R.id.pagerIndicate1);
	//此处直接设置为7,有需求可自己更改成其它值
	mPagerIndicator.setCount(7);
}
设置ViewPager监听器:

mPager.setOnPageChangeListener(new OnPageChangeListener() {
			
	@Override
	public void onPageSelected(int arg0) {
	}
			
	@Override
	public void onPageScrolled(int position, float offset, int arg2) {
		//重点在这里,调用控件内的方法
		mPagerIndicator.onPageScrolled(position , offset);				
	}
			
	@Override
	public void onPageScrollStateChanged(int arg0) {
	}
});


完毕的效果:

【Android】自己定义控件——仿天猫Indicator


颜色选得比較任意,认为难看自己换掉吧,毕竟我没有美工QAQ。。。


chenbw1

2014/5/8

欢迎转载,转载请注明出处,谢谢


最后吐槽下,原来CSDN有私信啊。。。之前全然就没注意过。。。所以一些信息如今才看到也就不回了,毕竟都过去好久了,抱歉啦。。。。。。。。。。。


【Android】自己定义控件——仿天猫Indicator

上一篇:android json解析及简单例子


下一篇:Android自定义View