上篇介紹了自定義控件的一個簡單案例，本篇文章主要介紹如何給自定義控件自定義一些屬性。
Android 中使用自定義屬性的一般步驟：
- 定義declare-styleable，添加attr
- 使用TypedArray獲取自定義屬性
- 設置到View上
自定義屬性都存在於/value/attr.xml文件中，以如下格式存在
<resource> <declare-styleable name="自定義屬性名稱"> <attr name="屬性名稱" format="屬性種類"/> ...... </declare-styleable> </resource>
format屬性值：
-
reference:引用資源
-
string:字符串
-
Color：顏色
-
boolean：布爾值
-
dimension：尺寸值
-
float：浮點型
-
integer：整型
-
fraction：百分數
-
enum：枚舉類型
-
flag：位或運算
代碼說話：
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircularAttrsView"> <!--圓形繪制的位置--> <attr name="circular_circle_gravity"> <flag name="left" value="0"/> <flag name="top" value="1"/> <flag name="center" value="2"/> <flag name="right" value="3"/> <flag name="bottom" value="4"/> </attr> <attr name="circular_circle_radius" format="dimension"/><!--圓形半徑--> <attr name="circular_circle_progress" format="integer"/><!--當前進度值--> <attr name="circular_progress_color" format="color"/><!--進度顯示顏色--> <attr name="circular_background_color" format="color"/><!--圓形背景色--> </declare-styleable> </resources>
使用屬性
<com.zhangqie.customcontrol.demo2.CircularAttrsView android:layout_width="300dp" android:layout_height="300dp" android:background="#e4e4e4" zq:circular_background_color="@color/colorAccent" zq:circular_circle_gravity="center" zq:circular_circle_progress="30" zq:circular_progress_color="@color/colorPrimary" zq:circular_circle_radius="50dp" android:layout_margin="5dp" android:padding="10dp" />
上面zq：這個可以隨便去，只有相同就行
接下來就是獲取屬性，並使用或設置屬性
public class CircularAttrsView extends View { /**** * 有三個參數的構造函數中第三個參數是默認的Style， * 這里的默認的Style是指它在當前Application或Activity所用的Theme中的默認Style，且只有在明確調用的時候才會生效， */ private final static String TAG = CircularAttrsView.class.getName(); private Paint mPaint; private int backgroundColor = Color.GRAY; private int progressColor = Color.BLUE; private float radius; private float progress; private float centerX = 0; private float centerY = 0; public static final int LEFT = 0; public static final int TOP = 1; public static final int CENTER = 2; public static final int RIGHT = 3; public static final int BOTTOM = 4; private int gravity = CENTER; private RectF rectF; public CircularAttrsView(Context context) { super(context); init(); } public CircularAttrsView(Context context, AttributeSet attrs) { super(context, attrs); initParams(context,attrs); } public CircularAttrsView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initParams(context,attrs); } private void init(){ mPaint = new Paint(); mPaint.setAntiAlias(true); } private void initParams(Context context,AttributeSet attrs){ mPaint = new Paint(); mPaint.setAntiAlias(true); rectF = new RectF(); /*** * 每一個屬性集合編譯之后都會對應一個styleable對象，通過styleable對象獲取TypedArray typedArray， * 然后通過鍵值對獲取屬性值，這點有點類似SharedPreference的取法。 */ TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircularAttrsView); if (typedArray != null){ backgroundColor = typedArray.getColor(R.styleable.CircularAttrsView_circular_background_color,Color.GRAY); progressColor = typedArray.getColor(R.styleable.CircularAttrsView_circular_progress_color,Color.BLUE); radius = typedArray.getDimension(R.styleable.CircularAttrsView_circular_circle_radius,0); progress = typedArray.getInt(R.styleable.CircularAttrsView_circular_circle_progress,0); gravity = typedArray.getInt(R.styleable.CircularAttrsView_circular_circle_gravity,CENTER); Log.e(TAG,backgroundColor+"--"+progressColor+"--"+radius+"--"+progress+"--"+gravity); typedArray.recycle(); } } /**** * 測量-Measure過程是計算視圖大小 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //根據提供的測量值(格式)提取模式(三個模式之一) //MeasureSpec有3種模式分別是UNSPECIFIED, EXACTLY和AT_MOST, int widthMode = MeasureSpec.getMode(widthMeasureSpec); //取出寬度的測量模式 int widthSize = MeasureSpec.getSize(widthMeasureSpec);//獲取View的大小(寬度的確切數值) int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); Log.i(TAG,"onMeasure---widthMode--->"+widthMode); switch (widthMode){ case MeasureSpec.EXACTLY: break; case MeasureSpec.AT_MOST: break; case MeasureSpec.UNSPECIFIED: break; } Log.i(TAG,"onMeasure--widthSize--->"+ widthSize); Log.i(TAG,"onMeasure--heightMode-->"+ heightMode); Log.i(TAG,"onMeasure--heightSize-->"+heightSize); int width = getWidth(); int height = getHeight(); Log.e(TAG, "onDraw---->" + width + "*" + height); centerX = width / 2; centerY = width / 2; switch (gravity){ case LEFT: centerX = radius + getPaddingLeft(); break; case TOP: centerY = radius + getPaddingTop(); break; case CENTER: break; case RIGHT: centerX = width - radius - getPaddingRight(); break; case BOTTOM: centerY = height - radius - getPaddingBottom(); break; } float left = centerX - radius; float top = centerY - radius; float right = centerX + radius; float bottom = centerY + radius; rectF.set(left,top,right,bottom); } /*** * 確定View的大小(這個函數在視圖大小發生改變時調用。) * * 寬度，高度，上一次寬度，上一次高度。 * 只需關注 寬度(w), 高度(h) 即可，這兩個參數就是View最終的大小。 * @param w * @param h * @param oldw * @param oldh */ @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); Log.i(TAG,"onSizeChanged"); } /**** * 布局-Layout過程用於設置視圖在屏幕中顯示的位置,onLayout一般只會在自定義ViewGroup中才會使用 * * 確定布局的函數是onLayout，它用於確定子View的位置，在自定義ViewGroup中會用到，他調用的是子View的layout函數。 * * @param changed * @param left * @param top * @param right * @param bottom */ @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); Log.i(TAG,"onLayout"); } /*** * 繪制-draw過程主要用於利用前兩步得到的參數，將視圖顯示在屏幕上，到這里也就完成了整個的視圖繪制工作 * @param canvas */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setColor(backgroundColor); // FILL填充, STROKE描邊,FILL_AND_STROKE填充和描邊 mPaint.setStyle(Paint.Style.FILL_AND_STROKE); canvas.drawCircle(centerX,centerY,radius,mPaint);//畫圓 mPaint.setColor(progressColor); double percent = progress * 1.0 / 100; int angle = (int)(percent * 360); //根據進度畫圓弧 canvas.drawArc(rectF,270,angle,true,mPaint); } }
效果圖：（居中的，可以通過 zq:circular_circle_gravity="center" 來設置顯示的位置）
源碼地址：https://github.com/DickyQie/android-custom-control