android自定义控件（一） 入门

转自:鸿洋的博客，正在学习，非常感谢！

自定义View的步骤：

1、自定义View的属性

2、在View的构造方法中获得我们自定义的属性

[ 3、重写onMesure ]

4、重写onDraw

我把3用[]标出了，所以说3不一定是必须的，当然了大部分情况下还是需要重写的。

1.自定义View的属性，首先在res/values/ 下建立一个styleable.xml ， 在里面定义我们的属性和声明我们的整个样式。

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!--定义一些基本的属性-->
<attr name="textTitle" format="string"/>
<attr name="textColor" format="color"/>
<attr name="textSize" format="dimension"/>

<declare-styleable name="CustomeView">
<attr name="textTitle"/>
<attr name="textColor"/>
<attr name="textSize"/>
</declare-styleable>
</resources>

我们定义了字体，字体颜色，字体大小3个属性，format是值该属性的取值类型:

一共有：

string,color,demension,integer,enum,reference,float,boolean,fraction,flag

;

2.然后在布局中声明我们的自定义View:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.down.customeviewdemo_1.MainActivity">

<com.example.down.customeviewdemo_1.CustomeView
android:id="@+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
app:textTitle="哈哈哈哈哈哈哈哈"
app:textColor="#009933"
app:textSize="10sp"
/>

</RelativeLayout>

**一定要引入 xmlns:custom=”http://schemas.android.com/apk/res/res-auto”我们的命名空间，后面的包路径指的是项目的package或者res-auto

**

3.自定义view代码：

//画笔
Paint mPaint =null;

//可视区域
Rect mRect =null;

//自己定义的基本属性
private  int textSize;
private String textTitle;
private  int textColor;

public void setTextColor(int textColor) {
this.textColor = textColor;
}

public void setTextSize(int textSize) {
this.textSize = textSize;
}

public void setTextTitle(String textTitle) {
this.textTitle = textTitle;
}

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

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

public CustomeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取styleable.xml中定义的基本属性
TypedArray a=context.getTheme().obtainStyledAttributes(attrs,R.styleable.CustomeView,defStyleAttr,0);
int  n=a.getIndexCount();
for (int i=0;i<n;i++){
int attr=a.getIndex(i);
switch (attr){
case R.styleable.CustomeView_textTitle:
textTitle=a.getString(attr);
break;
case R.styleable.CustomeView_textColor:
textColor=a.getColor(attr, Color.BLACK);//默认黑色字体
break;
case R.styleable.CustomeView_textSize://这里用的是px
textSize=a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,16,getResources().getDisplayMetrics()));//默认16sp
break;
}
}
a.recycle();//释放回收
//基本初始化

mPaint =new Paint();
mRect =new Rect();
mPaint.setTextSize(textSize);
mPaint.getTextBounds(textTitle, 0, textTitle.length(), mRect);
}

//计算控件的绘制位置
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

//绘制控件
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

mPaint.setColor(textColor);
//绘制一个rectangle显示text
canvas.drawRect(0, 0, getMeasuredWidth(),getMeasuredHeight(), mPaint);

//在onMeasure没有做处理的时候，+getWidth()+"-"+getMeasuredWidth()是相等的
//        Log.i("yqy", "" + getWidth() + "-" + getMeasuredWidth() + "---" + getHeight() + "," + getMeasuredHeight());

//绘制text
mPaint.setColor(Color.WHITE);
Log.i("yqy","要绘制的文本=="+textTitle+","+textSize+","+textColor+","+getWidth()+","+getHeight());
canvas.drawText(textTitle, getWidth() / 2-mRect.width()/2 , getHeight() / 2 + mRect.height() / 2, mPaint);
}

现在的效果是：



很明显文字不是在中间位置，原因是:

mPaint.setTextSize(textSize);这句话的位置，在ondraw里面就是这个样子，放在构造函数中就是显示中间位置

1.构造函数中：
mPaint.setTextSize(textSize);
mPaint.getTextBounds(textTitle,0,textTitle.length(),mRect);
Log.i("yqy",mRect.width()+"----"+getWidth());//315----768

2.构造函数中：
mPaint.getTextBounds(textTitle,0,textTitle.length(),mRect);
mPaint.setTextSize(textSize);
Log.i("yqy",mRect.width()+"----"+getWidth());//95----768

3.onDraw()中是一样的结果
Log.i("yqy",mRect.width()+"----"+getWidth());//95----768

总结：大小一定要在ondraw方法之前就计算好

当我们在xml中将width或者height设置成warp_content时会全屏铺展,感觉是match_parent的效果

这时的处理是在onMeasure中重新计算要绘制的宽高

首先要了解的是，我们怎么知道用户设置的width是什么样子的？

这个可以通过一个类MeasureSpec的specMode来判断

MeasureSpec的specMode有三种类型：

EXACTLY:一般是设置了明确的值或者Match_parent

AT_MOST:表示子布局限制在一个最大值内，一般是wrap_content布局

UNSPECIFIED:表示子布局想要多大就有多大，很少使用

所以当用户设置match_parent的时候就让其自动显示，除此之外我们来设置它要绘制的范围;

所以重写onMeasure：

int widthSise=MeasureSpec.getSize(widthMeasureSpec);
int heightSize=MeasureSpec.getSize(heightMeasureSpec);

int widthMode=MeasureSpec.getMode(widthMeasureSpec);
int heightMode=MeasureSpec.getMode(heightMeasureSpec);

//最终要显示的宽和高
int width;
int height;

if(widthMode==MeasureSpec.EXACTLY){
width=widthSise;
}else{//自定义
mPaint.setTextSize(textSize);
mPaint.getTextBounds(textTitle,0,textTitle.length(),mRect);
width=getPaddingLeft()+mRect.width()+getPaddingRight();
}

if(heightMode==MeasureSpec.EXACTLY){
height=heightSize;

}else{
mPaint.setTextSize(textSize);
mPaint.getTextBounds(textTitle,0,textTitle.length(),mRect);
height=getPaddingTop()+mRect.height()+getPaddingBottom();

}

//这句话一定要写
setMeasuredDimension(width,height);

最终效果如下：