カスタムView(一)初認識カスタムview

転載は出典を明記してください.http://blog.csdn.net/darling_R/article/details/54861805あららちゃんのブログ
今日はカスタムviewを練習しました.効果図は以下の通りです.では、まずいくつかの属性のタイプを理解して、後で使いやすいようにします.string、integer、dimension、reference、color...reference:リソースIDを参照します.2.color:カラー値.3.boolean:ブール値.4.dimension:寸法値.5.float:浮動小数点値.6.integer:整数値.7.string:文字列.8.fraction:パーセンテージ.9.enum:列挙値.10.flag:ビットまたは演算.
注:プロパティ定義では、複数のタイプの値を指定できます.(1)属性定義:

<declare-styleable name = "  ">
"background" format = "reference|color" />
declare-styleable>

(2)属性使用:

"42dip" 
    android:layout_height = "42dip" 
    android:background = "@drawable/  ID|#00FF00"/>

カスタムviewステップは、次のステップに分けられます.
1.カスタムプロパティは、まずres/valueフォルダの下にattrsを新規作成します.xmlファイルでは、ユーザーがカスタマイズできるプロパティを定義します.たとえば、大きな円の背景色、プログレスバー色、プログレスバー幅、パーセントフォントサイズ、パーセントフォント色、円の半径など、カスタムコントロールのいくつかのプロパティを抽出します.

    <declare-styleable name="CirclePercentView">
        <attr name="circleBg" format="color" />
        <attr name="progressColor" format="color" />
        <attr name="progressWidth" format="dimension" />
        <attr name="percentSize" format="dimension" />
        <attr name="percentColor" format="color" />
        <attr name="radius" format="dimension" />
    declare-styleable>

2.新しいクラスMyTextViewはViewを継承し、3つの構造方法を書き換えます.ここで注意したいのは、自動生成の構造方法で、中はsuper()で、前の2つをthis(context,null)とthis(context,attrs,0)に変更することです.あるいは構造方法ごとに初期化してもいいです.

    public CirclePercentView(Context context) {
        this(context, null);
    }

    public CirclePercentView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CirclePercentView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

3つ目のコンストラクションメソッドでカスタム属性を取得するには、最後の場所でtypedArrayを呼び出すことを忘れないでください.recycle()リリース;

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CirclePercentView, defStyleAttr, 0);

        mCirColor = ta.getColor(R.styleable.CirclePercentView_circleBg, 0xff3d3d3d);//     

        mPerTextColor = ta.getColor(R.styleable.CirclePercentView_percentColor, 0xffff3030);
        mPerTextSize = ta.getDimensionPixelSize(R.styleable.CirclePercentView_percentSize, DensityUtils.sp2px(context, 14));

        mProWidth = ta.getDimensionPixelSize(R.styleable.CirclePercentView_progressWidth, DensityUtils.dp2px(context, 5));
        mProColor = ta.getColor(R.styleable.CirclePercentView_progressColor, 0xfff0f0f0);

        mRadius = ta.getDimensionPixelSize(R.styleable.CirclePercentView_radius, DensityUtils.dp2px(context, 100));

        ta.recycle();

次に、必要なブラシを初期化し、後で描画しやすくします.

        mCirPaint = new Paint();
        mCirPaint.setColor(mCirColor);

        mPerPaint = new Paint();
        mPerPaint.setColor(mPerTextColor);
        mPerPaint.setTextSize(mPerTextSize);


        mProPaint = new Paint();
        mProPaint.setStyle(Paint.Style.STROKE);
        mProPaint.setColor(mProColor);
        mProPaint.setStrokeWidth(mProWidth);

        mBounds = new Rect();
        mRectF = new RectF();

3.ここでonMeasureを書き換えることができ、カスタムコントロールの幅を計算することができます.

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureDimension(widthMeasureSpec), measureDimension(heightMeasureSpec));
    }

    private int measureDimension(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {//     
            result = specSize;
        } else {//    WARP_CONTENT
            result = 2 * mRadius;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

準備が終わったら、コントロールの内容を描くことができます4、onDrawの方法を書き換えることができます.

    @Override
    protected void onDraw(Canvas canvas) {
        //    
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mCirPaint);
        //    
        mRectF.set(getWidth() / 2 - mRadius + mProWidth / 2, getHeight() / 2 - mRadius + mProWidth / 2, getWidth() / 2 + mRadius - mProWidth / 2, getHeight() / 2 + mRadius - mProWidth / 2);
        canvas.drawArc(mRectF, 270, 360 * mCurPercent / 100, false, mProPaint);
        //      
        String text = mCurPercent + "%";
        mPerPaint.getTextBounds(text, 0, text.length(), mBounds);
        canvas.drawText(text, getWidth() / 2 - mBounds.width() / 2, getHeight() / 2 + mBounds.height() / 2, mPerPaint);

    }

ここまでカスタマイズしたviewが終わっても、次は呼び出すことができます.xmlレイアウトファイルでは、次のように参照します.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cust="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.yh.customviewone.MainActivity">
    
    <com.yh.customviewone.CirclePercentView
        android:id="@+id/circleView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        cust:circleBg="#3d3d3d"
        cust:percentColor="#ff0000"
        cust:percentSize="50sp"
        cust:progressColor="#0efefe"
        cust:progressWidth="5dp"
        cust:radius="100dp" />
LinearLayout>

ps:

<resources>  
    <attr name="titleText" format="string" />  
    <attr name="titleTextColor" format="color" />  
    <attr name="titleTextSize" format="dimension" />  
    <declare-styleable name="CustomTitleView">  
        <attr name="titleText" />  
        <attr name="titleTextColor" />  
        <attr name="titleTextSize" />  
    declare-styleable>  
resources>  

生命のグローバル変数のように、共通の属性を抽出し、ラベルに引用すればいいので、複数のカスタムviewがある場合に、複数の属性を繰り返してコード量を減らすことができます.
コードアドレスを添付:https://github.com/XiaoHeia/CirclePercentView/tree/master