一、先看效果
ssqSelectNumber.gif
二、準備工作
典型的自定義view，把這個view當作一個對象來看，先擼擼這個view的屬性，上面的動態圖直觀的可以看到以下幾點：
- 上下左右的padding
- 球與球之間的space
- 每行球的個數（球列數需要嗎？答：不需要，總球數除以行數就是列數了。）
- 是否顯示遺漏（遺漏文字也是有顏色的，這個不是view的屬性，可以單獨設置在球上面）
- 球選中的顏色，未選中的顏色 （這個可以是小球的屬性，但是由于一個選號區所有的球都是一樣的，可以看成view的屬性了）
- 球選中的背景，未選中的背景 （理由同上）
既然是選號，每一個球也可以看成對象，球的屬性要考慮好，涉及后面的位置計算：
- 球的號碼
- 球選中的顏色，未選中的顏色
- 球選中的背景，未選中的背景
- 遺漏值，遺漏值的顏色
- 球位置（left, top, right, bottom） （這里記錄球所在的矩形區域的上下左右位置，為什么？留給大家思考）
- 遺漏位置 （同上）
當然一開始肯定考慮的不是這么全面，還有限制最多選多少球，已選的號碼后面選球區不能重復等，就靠大家一步步完善了。
三、小球建模
public class Ball {
private String number; // 號碼
private boolean isSelected; // 是否選中
private int left; // 球左坐標
private int top; // 球上坐標
private int right; // 球右坐標
private int bottom; // 球下坐標
private float x; // 球圓心x
private float y; // 球圓心y
private int mLeft; // 遺漏左坐標
private int mTop; // 遺漏上坐標
private int mRight; // 遺漏右坐標
private int mBottom; // 遺漏下坐標
private String missValue = "8"; // 遺漏值
private int missValueColor = Color.RED; // 遺漏文字顏色
}
上面有一個圓心，但是如果利用圓心繪制文字的話，文字不能居中，如果要讓它居中，還需要再繪制的時候計算，效率上就不是很高，所以舍棄了。同時要給球暴漏兩個很重要的方法：
/**
* 設置球的位置
* @param left
* @param top
* @param right
* @param bottom
*/
public void setRect(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
/**
* 設置遺漏的位置
* @param left
* @param top
* @param right
* @param bottom
*/
public void setMissRect(int left, int top, int right, int bottom) {
this.mLeft = left;
this.mTop = top;
this.mRight = right;
this.mBottom = bottom;
}
這兩個方法就是繪制很順滑的關鍵，后面再細說。
四、繪制選號區
依據步驟二我們先在屬性文件里列好自定義的屬性：
<declare-styleable name="SelectBallsView">
<attr name="numCount" format="integer"/>
<attr name="start" format="integer"/>
<attr name="end" format="integer"/>
<attr name="hasZero" format="boolean"/>
<attr name="ballColor" format="color"/>
<attr name="txtSelectedColor" format="color"/>
<attr name="txtUnselectedColor" format="color"/>
<attr name="drawableSelected" format="reference|integer"/>
<attr name="drawableUnselected" format="reference|integer"/>
</declare-styleable>
初始化的時候拿到這些屬性，在繪制之前，我們需要計算好每一個球的位置，那什么時候可以計算呢？答案就是onMeasure！！！一旦布局測量好寬度，我們每一個球的位置都是可以計算的：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getMeasuredWidth();
missWidth = ballWidth = ballHeight = (width - (numCount - 1) * space - padding * 2) / numCount;
missHeight = missWidth / 2;
computeLocation(ballWidth, ballHeight);
int rows = balls.size() / numCount + ((balls.size() % numCount > 0) ? 1 : 0);
if (showMissValue) {
height = rows * (ballHeight + missHeight) + (rows - 1) * space + padding * 2;
} else {
height = rows * ballHeight + (rows - 1) * space + padding * 2;
}
setMeasuredDimension(width, height);
}
/**
* 計算球位置 文字位置
*
* @param ballWidth
* @param ballHeight
*/
private void computeLocation(int ballWidth, int ballHeight) {
int size = balls.size();
for (int i = 0; i < size; i++) {
Ball cb = balls.get(i);
if (showMissValue) {
cb.setRect((i % numCount) * ballWidth + i % numCount * space + padding,
(i / numCount) * ballHeight + i / numCount * (space + missHeight) + padding,
(i % numCount + 1) * ballWidth + i % numCount * space + padding,
(i / numCount + 1) * ballHeight + i / numCount * (space + missHeight) + padding);
cb.setMissRect((i % numCount) * ballWidth + i % numCount * space + padding,
(i / numCount) * ballHeight + i / numCount * (space + missHeight) + padding + ballHeight,
(i % numCount + 1) * ballWidth + i % numCount * space + padding,
(i / numCount + 1) * ballHeight + i / numCount * (space + missHeight) + padding + missHeight);
} else {
cb.setRect((i % numCount) * ballWidth + i % numCount * space + padding,
(i / numCount) * ballHeight + i / numCount * space + padding,
(i % numCount + 1) * ballWidth + i % numCount * space + padding,
(i / numCount + 1) * ballHeight + i / numCount * space + padding);
}
}
}
這里就是計算并保存球的上下左右坐標信息，一來避免onDraw的時候計算，二來方便繪制文字的位置。
有了小球的信息，接下來就是簡單的繪制了：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int size = balls.size();
for (int i = 0; i < size; i++) {
Ball cb = balls.get(i);
RectF rectF = new RectF(cb.getLeft(), cb.getTop(), cb.getRight(), cb.getBottom());
if (bitmapSelected != null || bitmapUnselected != null) {
//繪制圖片
canvas.drawBitmap(cb.isSelected() ? bitmapSelected : bitmapUnselected, null,
new Rect(cb.getLeft(), cb.getTop(), cb.getRight(), cb.getBottom()), ballPaint);
} else {
//繪制小球邊框和小球
canvas.drawArc(new RectF(cb.getLeft() - strokeWidth, cb.getTop() - strokeWidth,
cb.getRight() + strokeWidth, cb.getBottom() + strokeWidth), 0, 360, false, circlePaint);
ballPaint.setColor(cb.isSelected() ? ballColor : Color.WHITE);
canvas.drawOval(rectF, ballPaint);
}
//繪制文字
txtPaint.setColor(cb.isSelected() ? txtSelectedColor : txtUnselectedColor);
canvas.drawText(cb.getNumber(), rectF.centerX(), rectF.centerY() - txtMidValue, txtPaint);
//繪制遺漏
if (showMissValue) {
msPaint.setColor(cb.getMissValueColor());
RectF missRectF = new RectF(cb.getmLeft(), cb.getmTop(), cb.getmRight(), cb.getmBottom());
canvas.drawText(cb.getMissValue(), missRectF.centerX(), missRectF.centerY() - missMidValue, msPaint);
}
}
}
onDraw里面就是遍歷所有的球，首先看有沒有設置選號區的小球背景，沒有就繪制球，有的話直接繪制bitmap，著重看下繪制文字：
RectF rectF = new RectF(cb.getLeft(), cb.getTop(), cb.getRight(), cb.getBottom());
//繪制文字
txtPaint.setColor(cb.isSelected() ? txtSelectedColor : txtUnselectedColor);
canvas.drawText(cb.getNumber(), rectF.centerX(), rectF.centerY() - txtMidValue, txtPaint);
先定義一個繪制的RectF對象，就是當前小球的區域，文字的位置是rectF.centerX()和rectF.centerY() - txtMidValue，這個txtMidValue是怎么計算的呢？
txtPaint = new Paint();
txtPaint.setAntiAlias(true);
txtPaint.setTextSize(sp2px(mContext, 14));
txtPaint.setTextAlign(Paint.Align.CENTER);
Paint.FontMetrics fontMetrics = txtPaint.getFontMetrics();
txtMidValue = (fontMetrics.top + fontMetrics.bottom) / 2;
原理的話，參考百度詞條，“canvas繪制文字如何居中”。在此不羅嗦了。繪制完之后，需要響應點擊事件，最好的辦法是重寫onTouchEvent事件：
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_UP:
int size = balls.size();
for (int i = 0; i < size; i++) {
Ball tempBall = balls.get(i);
if (pointAtBall(tempBall, x, y)) {
tempBall.setSelected(!tempBall.isSelected());
requestLayout();
invalidate();
break;
}
}
break;
}
return true;
}
/**
* 這個點落在球上
*
* @param tempBall
* @param x
* @param y
* @return
*/
private boolean pointAtBall(Ball tempBall, float x, float y) {
Rect rect = new Rect(tempBall.getLeft(), tempBall.getTop(), tempBall.getRight(), tempBall.getBottom());
return rect.contains((int) x, (int) y);
}
手指抬起的時候，判斷一下點是不是落在當前小球上，是的話就跳出循環，調用一requestLayout()和invalidate()，刷新一下布局。
五、示例
新建布局：
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="顯示/隱藏遺漏"
android:onClick="showMiss"
/>
<com.taovo.rjp.ssqselectnumber.SelectBallsView
android:id="@+id/view_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:numCount="10"
app:start="0"
app:end="9"
app:hasZero="false"
app:ballColor="#ee00ff"
app:txtSelectedColor="#ffffff"
app:txtUnselectedColor="#ee00ff"
/>
<com.taovo.rjp.ssqselectnumber.SelectBallsView
android:id="@+id/view_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:numCount="9"
app:start="1"
app:end="33"
app:hasZero="true"
app:ballColor="#ff0066"
app:txtSelectedColor="#ffffff"
app:txtUnselectedColor="#ff0066"
/>
<com.taovo.rjp.ssqselectnumber.SelectBallsView
android:id="@+id/view_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:numCount="8"
app:start="1"
app:end="16"
app:hasZero="true"
app:ballColor="#0088ff"
app:txtSelectedColor="#ffffff"
app:txtUnselectedColor="#0088ff"
/>
<com.taovo.rjp.ssqselectnumber.SelectBallsView
android:id="@+id/view_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:numCount="7"
app:start="1"
app:end="6"
app:hasZero="false"
app:ballColor="#00ff26"
app:txtSelectedColor="#ffffff"
app:txtUnselectedColor="#00ff26"
/>
<com.taovo.rjp.ssqselectnumber.SelectBallsView
android:id="@+id/view_5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:numCount="6"
app:start="1"
app:end="6"
app:hasZero="false"
app:ballColor="#00ff26"
app:txtSelectedColor="#ffffff"
app:txtUnselectedColor="#00ff26"
app:drawableSelected="@mipmap/basketball"
app:drawableUnselected="@mipmap/football"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="確定"
android:onClick="confirm"
/>
</LinearLayout>
</ScrollView>
mainActivity兩個響應方法：
public void showMiss(View view){
view1.setShowMissValue(!view1.getShowMissValue());
view2.setShowMissValue(!view2.getShowMissValue());
view3.setShowMissValue(!view3.getShowMissValue());
view4.setShowMissValue(!view4.getShowMissValue());
view5.setShowMissValue(!view5.getShowMissValue());
}
public void confirm(View view){
String str1 = view1.getSelectBallsString();
String str2 = view2.getSelectBallsString();
String str3 = view3.getSelectBallsString();
String str4 = view4.getSelectBallsString();
String str5 = view5.getSelectBallsString();
Toast.makeText(this, "選中的號碼是:\n" + str1 + "\n" + str2 + "\n" + str3 + "\n" + str4 + "\n" + str5, Toast.LENGTH_SHORT).show();
}
完事。效果就是一開始的示例效果了。有興趣可以下載源碼下來跑一跑，附上鏈接
GayHub
