Android 自定义View (二) 进阶

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24300125

继续自定义View之旅，前面已经介绍过一个自定义View的基础的例子，Android 自定义View (一)，如果你还对自定义View不了解可以去看看。今天给大家带来一个稍微复杂点的例子。

自定义View显示一张图片，下面包含图片的文本介绍，类似相片介绍什么的，不过不重要，主要是学习自定义View的用法么。

还记得上一篇讲的4个步骤么:

1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw

直接切入正题：

1、在res/values/attr.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <attr name="titleText" format="string" />
4. <attr name="titleTextSize" format="dimension" />
5. <attr name="titleTextColor" format="color" />
6. <attr name="image" format="reference" />
7. <attr name="imageScaleType">
8. <enum name="fillXY" value="0" />
9. <enum name="center" value="1" />
10. </attr>
11. <declare-styleable name="CustomImageView">
12. <attr name="titleText" />
13. <attr name="titleTextSize" />
14. <attr name="titleTextColor" />
15. <attr name="image" />
16. <attr name="imageScaleType" />
17. </declare-styleable>
18. </resources>

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

1. /**
2. * 初始化所特有自定义类型
3. *
4. * @param context
5. * @param attrs
6. * @param defStyle
7. */
8. public CustomImageView(Context context, AttributeSet attrs, int defStyle)
9. {
10. super(context, attrs, defStyle);
11. TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);
12. int n = a.getIndexCount();
13. for (int i = 0; i < n; i++)
14. {
15. int attr = a.getIndex(i);
16. switch (attr)
17. {
18. case R.styleable.CustomImageView_image:
19. mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
20. break;
21. case R.styleable.CustomImageView_imageScaleType:
22. mImageScale = a.getInt(attr, 0);
23. break;
24. case R.styleable.CustomImageView_titleText:
25. mTitle = a.getString(attr);
26. break;
27. case R.styleable.CustomImageView_titleTextColor:
28. mTextColor = a.getColor(attr, Color.BLACK);
29. break;
30. case R.styleable.CustomImageView_titleTextSize:
31. mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
32. 16, getResources().getDisplayMetrics()));
33. break;
34. }
35. }
36. a.recycle();
37. rect = new Rect();
38. mPaint = new Paint();
39. mTextBound = new Rect();
40. mPaint.setTextSize(mTextSize);
41. // 计算了描绘字体需要的范围
42. mPaint.getTextBounds(mTitle, 0, mTitle.length(), mTextBound);
43. }

3、重写onMeasure

1. @Override
2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
3. {
4. // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
5. /**
6. * 设置宽度
7. */
8. int specMode = MeasureSpec.getMode(widthMeasureSpec);
9. int specSize = MeasureSpec.getSize(widthMeasureSpec);
10. if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
11. {
12. Log.e("xxx", "EXACTLY");
13. mWidth = specSize;
14. } else
15. {
16. // 由图片决定的宽
17. int desireByImg = getPaddingLeft() + getPaddingRight() + mImage.getWidth();
18. // 由字体决定的宽
19. int desireByTitle = getPaddingLeft() + getPaddingRight() + mTextBound.width();
20. if (specMode == MeasureSpec.AT_MOST)// wrap_content
21. {
22. int desire = Math.max(desireByImg, desireByTitle);
23. mWidth = Math.min(desire, specSize);
24. Log.e("xxx", "AT_MOST");
25. }
26. }
27. /***
28. * 设置高度
29. */
30. specMode = MeasureSpec.getMode(heightMeasureSpec);
31. specSize = MeasureSpec.getSize(heightMeasureSpec);
32. if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
33. {
34. mHeight = specSize;
35. } else
36. {
37. int desire = getPaddingTop() + getPaddingBottom() + mImage.getHeight() + mTextBound.height();
38. if (specMode == MeasureSpec.AT_MOST)// wrap_content
39. {
40. mHeight = Math.min(desire, specSize);
41. }
42. }
43. setMeasuredDimension(mWidth, mHeight);
44. }

4、重写onDraw

1. @Override
2. protected void onDraw(Canvas canvas)
3. {
4. // super.onDraw(canvas);
5. /**
6. * 边框
7. */
8. mPaint.setStrokeWidth(4);
9. mPaint.setStyle(Paint.Style.STROKE);
10. mPaint.setColor(Color.CYAN);
11. canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
12. rect.left = getPaddingLeft();
13. rect.right = mWidth - getPaddingRight();
14. rect.top = getPaddingTop();
15. rect.bottom = mHeight - getPaddingBottom();
16. mPaint.setColor(mTextColor);
17. mPaint.setStyle(Style.FILL);
18. /**
19. * 当前设置的宽度小于字体需要的宽度，将字体改为xxx...
20. */
21. if (mTextBound.width() > mWidth)
22. {
23. TextPaint paint = new TextPaint(mPaint);
24. String msg = TextUtils.ellipsize(mTitle, paint, (float) mWidth - getPaddingLeft() - getPaddingRight(),
25. TextUtils.TruncateAt.END).toString();
26. canvas.drawText(msg, getPaddingLeft(), mHeight - getPaddingBottom(), mPaint);
27. } else
28. {
29. //正常情况，将字体居中
30. canvas.drawText(mTitle, mWidth / 2 - mTextBound.width() * 1.0f / 2, mHeight - getPaddingBottom(), mPaint);
31. }
32. //取消使用掉的快
33. rect.bottom -= mTextBound.height();
34. if (mImageScale == IMAGE_SCALE_FITXY)
35. {
36. canvas.drawBitmap(mImage, null, rect, mPaint);
37. } else
38. {
39. //计算居中的矩形范围
40. rect.left = mWidth / 2 - mImage.getWidth() / 2;
41. rect.right = mWidth / 2 + mImage.getWidth() / 2;
42. rect.top = (mHeight - mTextBound.height()) / 2 - mImage.getHeight() / 2;
43. rect.bottom = (mHeight - mTextBound.height()) / 2 + mImage.getHeight() / 2;
44. canvas.drawBitmap(mImage, null, rect, mPaint);
45. }
46. }

代码，结合注释和第一篇View的使用，应该可以看懂，不明白的留言。下面我们引入我们的自定义View:

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.customview02"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:orientation="vertical" >
7. <com.zhy.customview02.view.CustomImageView
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_margin="10dp"
11. android:padding="10dp"
12. zhy:image="@drawable/ic_launcher"
13. zhy:imageScaleType="center"
14. zhy:titleText="hello andorid ! "
15. zhy:titleTextColor="#ff0000"
16. zhy:titleTextSize="30sp" />
17. <com.zhy.customview02.view.CustomImageView
18. android:layout_width="100dp"
19. android:layout_height="wrap_content"
20. android:layout_margin="10dp"
21. android:padding="10dp"
22. zhy:image="@drawable/ic_launcher"
23. zhy:imageScaleType="center"
24. zhy:titleText="helloworldwelcome"
25. zhy:titleTextColor="#00ff00"
26. zhy:titleTextSize="20sp" />
27. <com.zhy.customview02.view.CustomImageView
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:layout_margin="10dp"
31. android:padding="10dp"
32. zhy:image="@drawable/lmj"
33. zhy:imageScaleType="center"
34. zhy:titleText="妹子~"
35. zhy:titleTextColor="#ff0000"
36. zhy:titleTextSize="12sp" />
37. </LinearLayout>

我特意让显示出现3中情况：

1、字体的宽度大于图片，且View宽度设置为wrap_content

2、View宽度设置为精确值，字体的长度大于此宽度

3、图片的宽度大于字体，且View宽度设置为wrap_content

看看显示效果：

怎么样，对于这三种情况所展示的效果都还不错吧。

好了，就到这里，各位看官，没事留个言，顶一个呗~

源码点击下载