名字真不知道起什麼名字，上效果圖把，原諒我的詞窮（最近在弄weex混合開發，頭都大了，有興趣的可以去研究，有問題一起交流）
這是這麼樣效果，在實際專案運用到了，想想要是UI給icon多浪費資源呀，乾脆自己上手寫個自定義view來解決
思路分析
看效果圖就是幾個實心圓，幾個空心圓花在一條線上，其中要考慮圓的大小，圓間距。根據這些計算第一個畫圓的開始位置
開始位置的計算：
float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
開始x=(寬-(實心圓+空心圓)*每一個圓的寬度)/2;計算出開始的x，畫圓從圓心開始，得再把圓半徑加上
float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
每一個圓的位置x=開始x+圓寬*個數（0開始）+半徑
開始畫圓
分析的思路大致就能在onDraw開始畫了
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//先計算總量 每一個20
int size = solidnum + hollownum;
if (size > 0) {
float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
float y=mheight/2;
for(int i=0;i<size;i++){
float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
//畫實心
if(i<solidnum){
canvas.drawCircle(x,y,radius,solidPaint);
//畫空心
}else {
canvas.drawCircle(x,y,radius,hollowPaint);
}
}
}
}複製程式碼圓畫好了就是一些自定義屬性新增：實心圓個數、空心圓個數、圓顏色
自定義屬性
xml中新增
attrs.xml
<!--//select-->
<declare-styleable name="SelectView">
<attr name="solidnum" format="integer"/>
<attr name="hollownum" format="integer"/>
</declare-styleable>複製程式碼程式碼中獲取
private void initType(Context context,AttributeSet attrs){
TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.SelectView);
solidnum=typedArray.getInteger(R.styleable.SelectView_solidnum,0);
hollownum=typedArray.getInteger(R.styleable.SelectView_hollownum,0);
typedArray.recycle();
}複製程式碼顏色也是一樣新增，可以自行新增
java程式碼新增
/***
*
* @param solidnum 實心
* @param hollownum 空心
*/
public void setSelect(int solidnum, int hollownum) {
this.solidnum = solidnum;
this.hollownum = hollownum;
invalidate();
}
/**
* 支援設定顏色
* @param red
* @param green
* @param blue
*/
public void setColor(int red, int green, int blue){
solidPaint.setColor(Color.rgb(red,green,blue));
hollowPaint.setColor(Color.rgb(red,green,blue));
invalidate();
}複製程式碼完整自定義view程式碼
package com.selectview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by wujun on 2017/9/13.
* 7個選擇點
*
* @author madreain
* @desc
*/
public class SelectView extends View {
//實心
Paint solidPaint;
//空心
Paint hollowPaint;
private int solidnum;
private int hollownum;
//寬高
int mwidth, mheight;
float radius;
Context mcontext;
public SelectView(Context context) {
super(context);
mcontext = context;
init(context);
}
public SelectView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mcontext = context;
initType(context,attrs);
init(context);
}
public SelectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mcontext = context;
initType(context,attrs);
init(context);
}
private void initType(Context context,AttributeSet attrs){
TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.SelectView);
solidnum=typedArray.getInteger(R.styleable.SelectView_solidnum,0);
hollownum=typedArray.getInteger(R.styleable.SelectView_hollownum,0);
typedArray.recycle();
}
private void init(Context context) {
solidPaint = new Paint();
solidPaint.setAntiAlias(true);
solidPaint.setColor(Color.rgb(50,193,164));
solidPaint.setStyle(Paint.Style.FILL);
hollowPaint = new Paint();
hollowPaint.setAntiAlias(true);
hollowPaint.setColor(Color.rgb(50,193,164));
hollowPaint.setStyle(Paint.Style.STROKE);
radius = DisplayUtil.dip2px(context, 3.5f);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//寬高
mwidth = w;
mheight = h;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//先計算總量 每一個20
int size = solidnum + hollownum;
if (size > 0) {
float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
float y=mheight/2;
for(int i=0;i<size;i++){
float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
//畫實心
if(i<solidnum){
canvas.drawCircle(x,y,radius,solidPaint);
//畫空心
}else {
canvas.drawCircle(x,y,radius,hollowPaint);
}
}
}
}
/***
*
* @param solidnum 實心
* @param hollownum 空心
*/
public void setSelect(int solidnum, int hollownum) {
this.solidnum = solidnum;
this.hollownum = hollownum;
invalidate();
}
/**
* 支援設定顏色
* @param red
* @param green
* @param blue
*/
public void setColor(int red, int green, int blue){
solidPaint.setColor(Color.rgb(red,green,blue));
hollowPaint.setColor(Color.rgb(red,green,blue));
invalidate();
}
}複製程式碼專案中使用
xml佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.selectview.MainActivity">
<com.selectview.SelectView
android:id="@+id/selectView1"
android:layout_width="match_parent"
android:layout_height="29dp"
app:hollownum="6"
app:solidnum="1" />
<com.selectview.SelectView
android:id="@+id/selectView2"
android:layout_width="match_parent"
android:layout_height="29dp"
app:hollownum="6"
app:solidnum="1" />
<com.selectview.SelectView
android:id="@+id/selectView3"
android:layout_width="match_parent"
android:layout_height="29dp"
app:hollownum="3"
app:solidnum="1" />
</LinearLayout>複製程式碼程式碼中設定
selectView2.setColor(0,100,0);
selectView2.setSelect(3,4);
selectView3.setColor(220,20,60);複製程式碼