Android学习之自定义view(二)

在csdn博客上看到卡片重叠的效果

，由于最近一直在学自定义view，所以想着这个卡片效果可以通过自定义view来实现，于是花了一些时间来实现，这也是学习自定义view的第二篇。

按照国际惯例，自定义view三部曲走起来：

1.在values文件夹下创建attrs.xml文件，内容如下：

<resources>

<declare-styleable name="MyCustomView2">

<attr name="firstCardColor" format="color" />

<attr name="secCardColor" format="color" />

<attr name="thirdCardColor" format="color" />

</declare-styleable>

</resources>
三个属性分别代表三张卡片的颜色

2.写一个类继承自view，并在构造函数中获取上面定义的属性
public MyCustomView2(Context context, AttributeSet attrs) {

super(context, attrs);

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyCustomView2);

for(int i=0;i<ta.getIndexCount();i++){

int attr = ta.getIndex(i);

switch(attr){

case R.styleable.MyCustomView2_firstCardColor :

firstCardColor = ta.getColor(attr, Color.BLUE); //未设置颜色的时候默认为蓝色

break;

case R.styleable.MyCustomView2_secCardColor :

secCardColor = ta.getColor(attr, Color.RED); //未设置颜色的时候默认为红色

break;

case R.styleable.MyCustomView2_thirdCardColor :

thirdCardColor = ta.getColor(attr, Color.GREEN);//未设置颜色的时候默认为绿色

break;

}

}

ta.recycle();



mPaint = new Paint();

}

3.重写[onMeasure]onDraw方法
在这里有两种情况，重写onMeasure和不重写onMeasure
a).不重写onMeasure(使用系统自带的测量方法)：
@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
｝
接着重写onDraw方法
@Override

protected void onDraw(Canvas canvas) {



//将组件宽度的1/4和高度的1/3作为第一张卡片的宽和高

width = getMeasuredWidth() / 4;

height = getMeasuredHeight() / 3;



/**

* 若没有指定android:padding属性，则取组件大小的1/8作为卡片之间的间距

* 否则就取它们四个值的平均值

*/

if(getPaddingLeft() == 0 || getPaddingRight() == 0

|| getPaddingTop() == 0 || getPaddingBottom() == 0){

mStep = getMeasuredWidth() / 8;//将组件的1/8作为卡片之间的间距

}else{

mStep = (getPaddingLeft() + getPaddingRight() + getPaddingTop() + getPaddingBottom()) / 4;//取平均值作为间距

}



//画第一张卡片

mPaint.setColor(firstCardColor);

canvas.drawRect(0, 0, width, height, mPaint);



//画第二张卡片

mPaint.setColor(secCardColor);

canvas.drawRect(mStep, mStep, width + mStep, height + mStep, mPaint);



//画第三张卡片

mPaint.setColor(thirdCardColor);

canvas.drawRect(mStep * 2, mStep * 2, width + mStep * 2, height + mStep * 2, mPaint);

}
在这个方法中，主要就是绘制想要的效果了。绘制的内容始终在通过测量的view大小之中
在画第一个卡片的时候，起始的left和top坐标可以根据需要将其设置到组件的任何位置。
然后就是在布局文件中使用这个自定义的view
注：使用之前需要添加namespace,在这里，我的namespace是：
xmlns:custom="http://schemas.android.com/apk/res/com.example.mycustomview2"
<com.example.mycustom.view.MyCustomView2

android:layout_width="300dp"

android:layout_height="300dp"

android:layout_margin="10dp"

android:layout_centerInParent="true"

android:background="#000000"

custom:firstCardColor="#0066CC"

custom:secCardColor="#ff0000"

custom:thirdCardColor="#009933"/>
此时的效果是：



<com.example.mycustom.view.MyCustomView2

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="10dp"

android:layout_centerInParent="true"

android:background="#000000"

custom:firstCardColor="#0066CC"

custom:secCardColor="#ff0000"

custom:thirdCardColor="#009933"/>



改为warp_parent也是相同的效果

b).重写onMeasure
@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int width = 0; //组件的宽度

int height = 0; //组件的高度

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int heightSize = MeasureSpec.getSize(heightMeasureSpec);



/**

* 组件宽度和高度的布局为MATCH_PARENT或精确的值的时，使用系统测试的结果；

* 否则使用在资源文件中定义的组件的大小

*/

if(widthMode == MeasureSpec.EXACTLY){ //一般为MATCH_PARENT和精确的值

width = widthSize;

}else if(heightMode == MeasureSpec.AT_MOST){ //一般为WARP_PARENT

//从资源文件中获取默认的宽度

width = getResources().getDimensionPixelSize(R.dimen.custom_view_size);

}

if(heightMode == MeasureSpec.EXACTLY){

height = heightSize;

}else if(heightMode == MeasureSpec.AT_MOST){

//从资源文件中获取默认的高度

height = getResources().getDimensionPixelSize(R.dimen.custom_view_size);

}



setMeasuredDimension(width, height);

}

<com.example.mycustom.view.MyCustomView2

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="10dp"

android:layout_centerInParent="true"

android:background="#000000"

custom:firstCardColor="#0066CC"

custom:secCardColor="#ff0000"

custom:thirdCardColor="#009933"/>
效果如下：



<com.example.mycustom.view.MyCustomView2

android:layout_width="300dp"

android:layout_height="300dp"

android:layout_margin="10dp"

android:layout_centerInParent="true"

android:background="#000000"

custom:firstCardColor="#0066CC"

custom:secCardColor="#ff0000"

custom:thirdCardColor="#009933"/>
效果如下：



由此可见，不管是否重写onMeasure方法，android:layout_width和android:layout_height为match_parent或者精确值的时候效果是一样的，关键是当为warp_parent的时候。
<com.example.mycustom.view.MyCustomView2

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:layout_centerInParent="true"

android:background="#000000"

custom:firstCardColor="#0066CC"

custom:secCardColor="#ff0000"

custom:thirdCardColor="#009933"/>
效果如下：



之所以会出现这样的效果是因为，在重写onMeasure方法的时候，如果定义的宽度和高度为warp_parent的话(对应MeasureSpec.AT_MOST)，就从dimens.xml文件中获取一个大小，用于决定view的大小。

至此，卡片重叠的效果已经实现。这个案例是将三张卡片作为一个view，而不是单独的由三个view构成，因此，要想还是实现同样的效果，可以自定ViewGroup来实现，所以下一篇就来阐述通过自定义ViewGroup方式来实现，敬请期待！~

源码下载