今天來說說類似天貓的Banner中的小圓點是怎麼做的（圖中綠圈部分）

在學習自定義控制元件之前，我用的是非常二的方法，直接在佈局中放入多個ImageView，然後程式碼中根據Pager切換來改變圖片。這種方法雖然可以在切換完成後正確顯示小圓點，但是卻做不到如下圖中的切換中的狀態顯示：

今天學到了自定義控制元件，正好可以把這個坑填上。

說一下思路：

在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);

	}

}
 

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);
}

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) {
	}
});

完成的效果：

顏色選得比較隨意，覺得難看自己換掉吧，畢竟我沒有美工QAQ。。。

chenbw1

2014/5/8

歡迎轉載，轉載請註明出處，謝謝

最後吐槽下，原來CSDN有私信啊。。。之前完全就沒注意過。。。所以一些資訊現在才看到也就不回了，畢竟都過去好久了，抱歉啦。。。。。。。。。。。