自定义组件进阶之一

以LabelView（效果类似于TextView）为例示范简单的自定义View。首先，理清思路，明确要定义的组件的一些属性（类似组件的简单拼接，可不定义属性）

第一步：配置属性：在Values文件夹的attrs.xml中配置出来，见下图所示。

代码如下：

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 自定义属性  -->
    <declare-styleable name="MyLabelView">
        <attr name="text" format="string" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
    </declare-styleable>
</resources>

第二步：重写构造方法

 

第三步：在构造方法中绑定属性：即在xml中配置的自定义组件的属性真正起到作用

 

 

代码：

 

public MyLabelView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        initLabelView();
    }


    public MyLabelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        initLabelView();

        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.MyLabelView);
        //获得三个属性值

        //1
        String textContent = typeArray.getString(R.styleable.MyLabelView_text);
        if (null != textContent) {
            setText(textContent);
        }

        //2
        int color = typeArray.getColor(R.styleable.MyLabelView_textColor, 0xffff0000);
        setTextColor(color);

        //3
        float dimension = typeArray.getDimension(R.styleable.MyLabelView_textSize, 0);
        if (dimension > 0) {
            setTextSize(dimension);
        }

        typeArray.recycle();//回收

    }

 

 

第四步：覆写方法以及创建新方法，实现相应功能

 

/*
 *  onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值，而是将模式和尺寸组合在一起的数值。
 *  a) int mode = MeasureSpec.getMode(widthMeasureSpec);
 *
 *     1)mode:MeasureSpec.UNSPECIFIED ----未指定尺寸，这种情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式
 *     2)mode:MeasureSpec.EXACTLY---------是精确尺寸，当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip"，
 *                                        或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。
 *     3)mode:MeasureSpec.AT_MOST---------最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，控件大小一般随着控件的子空间或内容进行变化，
 *                                        此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此，此时的mode是AT_MOST，size给出了父控件允许的最大尺寸。
 *
 *  b) int size = MeasureSpec.getSize(widthMeasureSpec)
 *
 *  Note：在重写onMeasure方法时要根据模式不同进行尺寸计算，以下的代码是典型的写法
 *
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // TODO Auto-generated method stub
    setMeasuredDimension(measuredWidth(widthMeasureSpec), measuredHeight(heightMeasureSpec));
}


private int measuredWidth(int widthMeasureSpec) {
    // TODO Auto-generated method stub
    int result = 0;
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    widthSize = MeasureSpec.getSize(widthMeasureSpec);

    if (MeasureSpec.EXACTLY == widthMode) {//指定
        result = widthSize;
    } else {//测量
        result = (int) (mPaint.measureText(mText) + getPaddingLeft() + getPaddingRight());
        if (MeasureSpec.AT_MOST == widthMode) {
            result = Math.min(result, widthSize);//size是父组件允许的最大值
        }
    }
    return result;
}


private int measuredHeight(int heightMeasureSpec) {
    // TODO Auto-generated method stub
    int result = 0;
    int mode = MeasureSpec.getMode(heightMeasureSpec);
    int size = MeasureSpec.getSize(heightMeasureSpec);
    mAscent = (int) mPaint.ascent();

    if (MeasureSpec.EXACTLY == mode) {//指定
        result = size;
    } else {//测量
        result = (int) (-mAscent + mPaint.descent()) + getPaddingTop()
                   + getPaddingBottom();//copy，错误处
        if (MeasureSpec.AT_MOST == mode) {
            result = Math.min(result, size);
        }
    }
    return result;
}



@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    canvas.drawText(mText, getPaddingLeft(), getPaddingTop()-mAscent, mPaint);//Canvas 作为绘制文本时，是以基线为基准绘制的，不是左上角
       this.setBackgroundColor(Color.RED);

}


private void initLabelView() {
    mPaint = new Paint();
    mPaint.setColor(Color.WHITE);
    mPaint.setAntiAlias(true);
    mPaint.setTextSize(15);
    setPadding(10, 10, 10, 10);

}

public void setText(String text) {
    mText = text;
    requestLayout();//重新排版
    invalidate();
}

public void setTextSize(float dimension) {
    mPaint.setTextSize(dimension);
    requestLayout();//重新排版
    invalidate();
}

public void setTextColor(int color) {
    mPaint.setColor(color);
    requestLayout();//重新排版
    invalidate();
}

第五步：xml中的使用(命名空间和标签名)

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:my="http://schemas.android.com/apk/res/com.mike.activity"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >


    <com.mike.activity.MyLabelView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        my:textSize="25dip"
        my:textColor="@android:color/white"
        my:text="my_label_view" />

</LinearLayout>