Android自定义View(二）

时间：2023-02-09 20:50:33

转载请标明出处：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

[html]  view plain  copy   Android自定义View(二） Android自定义View(二）
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <attr name="titleText" format="string" />  
  5.     <attr name="titleTextSize" format="dimension" />  
  6.     <attr name="titleTextColor" format="color" />  
  7.     <attr name="image" format="reference" />  
  8.     <attr name="imageScaleType">  
  9.         <enum name="fillXY" value="0" />  
  10.         <enum name="center" value="1" />  
  11.     </attr>  
  12.   
  13.     <declare-styleable name="CustomImageView">  
  14.         <attr name="titleText" />  
  15.         <attr name="titleTextSize" />  
  16.         <attr name="titleTextColor" />  
  17.         <attr name="image" />  
  18.         <attr name="imageScaleType" />  
  19.     </declare-styleable>  
  20.   
  21. </resources>  

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

[java]  view plain  copy   Android自定义View(二） Android自定义View(二）
  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.   
  12.         TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);  
  13.   
  14.         int n = a.getIndexCount();  
  15.   
  16.         for (int i = 0; i < n; i++)  
  17.         {  
  18.             int attr = a.getIndex(i);  
  19.   
  20.             switch (attr)  
  21.             {  
  22.             case R.styleable.CustomImageView_image:  
  23.                 mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  
  24.                 break;  
  25.             case R.styleable.CustomImageView_imageScaleType:  
  26.                 mImageScale = a.getInt(attr, 0);  
  27.                 break;  
  28.             case R.styleable.CustomImageView_titleText:  
  29.                 mTitle = a.getString(attr);  
  30.                 break;  
  31.             case R.styleable.CustomImageView_titleTextColor:  
  32.                 mTextColor = a.getColor(attr, Color.BLACK);  
  33.                 break;  
  34.             case R.styleable.CustomImageView_titleTextSize:  
  35.                 mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,  
  36.                         16, getResources().getDisplayMetrics()));  
  37.                 break;  
  38.   
  39.             }  
  40.         }  
  41.         a.recycle();  
  42.         rect = new Rect();  
  43.         mPaint = new Paint();  
  44.         mTextBound = new Rect();  
  45.         mPaint.setTextSize(mTextSize);  
  46.         // 计算了描绘字体需要的范围  
  47.         mPaint.getTextBounds(mTitle, 0, mTitle.length(), mTextBound);  
  48.   
  49.     }  

3、重写onMeasure

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

4、重写onDraw

[java]  view plain  copy   Android自定义View(二） Android自定义View(二）
  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.   
  13.         rect.left = getPaddingLeft();  
  14.         rect.right = mWidth - getPaddingRight();  
  15.         rect.top = getPaddingTop();  
  16.         rect.bottom = mHeight - getPaddingBottom();  
  17.   
  18.         mPaint.setColor(mTextColor);  
  19.         mPaint.setStyle(Style.FILL);  
  20.         /** 
  21.          * 当前设置的宽度小于字体需要的宽度，将字体改为xxx... 
  22.          */  
  23.         if (mTextBound.width() > mWidth)  
  24.         {  
  25.             TextPaint paint = new TextPaint(mPaint);  
  26.             String msg = TextUtils.ellipsize(mTitle, paint, (float) mWidth - getPaddingLeft() - getPaddingRight(),  
  27.                     TextUtils.TruncateAt.END).toString();  
  28.             canvas.drawText(msg, getPaddingLeft(), mHeight - getPaddingBottom(), mPaint);  
  29.   
  30.         } else  
  31.         {  
  32.             //正常情况，将字体居中  
  33.             canvas.drawText(mTitle, mWidth / 2 - mTextBound.width() * 1.0f / 2, mHeight - getPaddingBottom(), mPaint);  
  34.         }  
  35.   
  36.         //取消使用掉的快  
  37.         rect.bottom -= mTextBound.height();  
  38.   
  39.         if (mImageScale == IMAGE_SCALE_FITXY)  
  40.         {  
  41.             canvas.drawBitmap(mImage, null, rect, mPaint);  
  42.         } else  
  43.         {  
  44.             //计算居中的矩形范围  
  45.             rect.left = mWidth / 2 - mImage.getWidth() / 2;  
  46.             rect.right = mWidth / 2 + mImage.getWidth() / 2;  
  47.             rect.top = (mHeight - mTextBound.height()) / 2 - mImage.getHeight() / 2;  
  48.             rect.bottom = (mHeight - mTextBound.height()) / 2 + mImage.getHeight() / 2;  
  49.   
  50.             canvas.drawBitmap(mImage, null, rect, mPaint);  
  51.         }  
  52.   
  53.     }  

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

[html]  view plain  copy   Android自定义View(二） Android自定义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.   
  8.     <com.zhy.customview02.view.CustomImageView  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_margin="10dp"  
  12.         android:padding="10dp"  
  13.         zhy:image="@drawable/ic_launcher"  
  14.         zhy:imageScaleType="center"  
  15.         zhy:titleText="hello andorid ! "  
  16.         zhy:titleTextColor="#ff0000"  
  17.         zhy:titleTextSize="30sp" />  
  18.   
  19.     <com.zhy.customview02.view.CustomImageView  
  20.         android:layout_width="100dp"  
  21.         android:layout_height="wrap_content"  
  22.         android:layout_margin="10dp"  
  23.         android:padding="10dp"  
  24.         zhy:image="@drawable/ic_launcher"  
  25.         zhy:imageScaleType="center"  
  26.         zhy:titleText="helloworldwelcome"  
  27.         zhy:titleTextColor="#00ff00"  
  28.         zhy:titleTextSize="20sp" />  
  29.   
  30.     <com.zhy.customview02.view.CustomImageView  
  31.         android:layout_width="wrap_content"  
  32.         android:layout_height="wrap_content"  
  33.         android:layout_margin="10dp"  
  34.         android:padding="10dp"  
  35.         zhy:image="@drawable/lmj"  
  36.         zhy:imageScaleType="center"  
  37.         zhy:titleText="妹子~"  
  38.         zhy:titleTextColor="#ff0000"  
  39.         zhy:titleTextSize="12sp" />  
  40.   
  41. </LinearLayout>  

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

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

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

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

看看显示效果：

Android自定义View(二）

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


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


源码点击下载

标签：

相关文章