android--------自定義控件 之 屬性篇

 上篇介紹了自定義控件的一個簡單案例，本篇文章主要介紹如何給自定義控件自定義一些屬性。

 

Android 中使用自定義屬性的通常步驟：

1. 定義declare-styleable，添加attr
2. 使用TypedArray獲取自定義屬性
3. 設置到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