继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示

白板的微信
关注TA
已关注
手记 341
粉丝 70
获赞 385

Android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过PaintonDraw()进行圆形图片显示。   

代码:

 1 activity_image.xml

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

 3 <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

 4     android:layout_width="match_parent"

 5     android:layout_height="match_parent"

 6     android:orientation="vertical">

 7 

 8     <com.example.imageviewdrawdemo.ZQImageViewRoundOval

 9         android:id="@+id/cicle"

10         android:layout_width="100dp"

11         android:layout_height="100dp"

12         android:src="@drawable/qie">

13     </com.example.imageviewdrawdemo.ZQImageViewRoundOval>

14 

15     <com.example.imageviewdrawdemo.ZQImageViewRoundOval

16         android:id="@+id/roundRect"

17         android:layout_width="286dp"

18         android:layout_height="190dp"

19         android:layout_marginTop="10dp"

20         android:src="@drawable/l1">

21     </com.example.imageviewdrawdemo.ZQImageViewRoundOval>

22 

23     <com.example.imageviewdrawdemo.ZQImageViewRoundOval

24         android:id="@+id/oval"

25         android:layout_width="wrap_content"

26         android:layout_height="wrap_content"

27         android:layout_marginTop="20dp"

28         android:src="@drawable/l2">

29     </com.example.imageviewdrawdemo.ZQImageViewRoundOval>

30 

31 </LinearLayout>

 

 

 

  1 /**

  2  * 实现圆形、圆角,椭圆等自定义图片View。

  3  * @author zq

  4  *

  5  */

  6 public class  ZQImageViewRoundOval extends ImageView {

  7 

  8     private Paint mPaint;

  9 

 10     private int mWidth;

 11 

 12     private int mHeight;

 13 

 14     private int mRadius;//圆半径

 15 

 16     private RectF mRect;//矩形凹行大小

 17 

 18     private int mRoundRadius;//圆角大小

 19 

 20     private BitmapShader mBitmapShader;//图形渲染

 21 

 22     private Matrix mMatrix;

 23 

 24     private int mType;//记录是圆形还是圆角矩形

 25 

 26     public static final int TYPE_CIRCLE = 0;//圆形

 27     public static final int TYPE_ROUND = 1;//圆角矩形

 28     public static final int TYPE_OVAL = 2;//椭圆形

 29     public static final int DEFAUT_ROUND_RADIUS = 10;//默认圆角大小

 30 

 31     public ZQImageViewRoundOval(Context context) {

 32         this(context, null);

 33         // TODOAuto-generated constructor stub

 34     }

 35 

 36     public ZQImageViewRoundOval(Context context, AttributeSet attrs) {

 37         this(context,attrs, 0);

 38         // TODOAuto-generated constructor stub

 39     }

 40 

 41     public ZQImageViewRoundOval(Context context, AttributeSet attrs,int defStyle){

 42         super(context,attrs, defStyle);

 43         initView();

 44     }

 45 

 46     private void initView() {

 47         mPaint = new Paint();

 48         mPaint.setAntiAlias(true);

 49         mMatrix = new Matrix();

 50         mRoundRadius = DEFAUT_ROUND_RADIUS;

 51     }

 52 

 53     @Override

 54     protected void onMeasure(int widthMeasureSpec,intheightMeasureSpec) {

 55         // TODOAuto-generated method stub

 56         super.onMeasure(widthMeasureSpec,heightMeasureSpec);

 57         // 如果是绘制圆形,则强制宽高大小一致

 58         if (mType ==TYPE_CIRCLE) {

 59             mWidth = Math.min(getMeasuredWidth(),getMeasuredHeight());

 60             mRadius = mWidth / 2;

 61             setMeasuredDimension(mWidth, mWidth);

 62         }

 63 

 64     }

 65 

 66     @Override

 67     protected void onDraw(Canvas canvas) {

 68 

 69         if (null ==getDrawable()) {

 70             return;

 71         }

 72         setBitmapShader();

 73         if (mType ==TYPE_CIRCLE) {

 74             canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

 75         } else if (mType == TYPE_ROUND) {

 76             mPaint.setColor(Color.RED);

 77             canvas.drawRoundRect(mRect, mRoundRadius, mRoundRadius, mPaint);

 78         }else if(mType == TYPE_OVAL){

 79             canvas.drawOval(mRect, mPaint);

 80         }

 81     }

 82 

 83     @Override

 84     protected void onSizeChanged(int w,int h, int oldw,int oldh) {

 85         // TODOAuto-generated method stub

 86         super.onSizeChanged(w,h, oldw, oldh);

 87         mRect = new RectF(0,0, getWidth(), getHeight());

 88     }

 89 

 90     /**

 91      * 设置BitmapShader

 92      */

 93     private void setBitmapShader() {

 94         Drawable drawable = getDrawable();

 95         if (null ==drawable) {

 96             return;

 97         }

 98         Bitmap bitmap = drawableToBitmap(drawable);

 99         // 将bitmap作为着色器来创建一个BitmapShader

100         mBitmapShader = newBitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);

101         float scale =1.0f;

102         if (mType ==TYPE_CIRCLE) {

103             // 拿到bitmap宽或高的小值

104             int bSize =Math.min(bitmap.getWidth(), bitmap.getHeight());

105             scale = mWidth * 1.0f /bSize;

106 

107         } else if (mType == TYPE_ROUND ||mType == TYPE_OVAL) {

108             // 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;

109             scale = Math.max(getWidth() * 1.0f/ bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight());

110         }

111         // shader的变换矩阵,我们这里主要用于放大或者缩小

112         mMatrix.setScale(scale,scale);

113         // 设置变换矩阵

114         mBitmapShader.setLocalMatrix(mMatrix);

115         mPaint.setShader(mBitmapShader);

116 

117     }

118 

119     /**

120      * drawable转bitmap

121      *

122      * @paramdrawable

123      * @return

124      */

125     private Bitmap drawableToBitmap(Drawable drawable) {

126         if (drawableinstanceof BitmapDrawable) {

127             BitmapDrawable bitmapDrawable =(BitmapDrawable) drawable;

128             returnbitmapDrawable.getBitmap();

129         }

130         int w =drawable.getIntrinsicWidth();

131         int h =drawable.getIntrinsicHeight();

132         Bitmap bitmap = Bitmap.createBitmap(w,h, Config.ARGB_8888);

133         Canvas canvas = newCanvas(bitmap);

134         drawable.setBounds(0, 0, w, h);

135         drawable.draw(canvas);

136         return bitmap;

137     }

138     /**

139      * 单位dp转单位px

140      */

141     public int dpTodx(int dp){

142       

143         return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

144                 dp,getResources().getDisplayMetrics());

145     }

146   

147     public int getType(){

148         return mType;

149     }

150     /**

151      * 设置图片类型:圆形、圆角矩形、椭圆形

152      * @param mType

153      */

154     public void setType(int mType) {

155         if(this.mType !=mType){

156             this.mType = mType;

157             invalidate();

158         }

159       

160     }

161     public int getRoundRadius() {

162         return mRoundRadius;

163     }

164     /**

165      * 设置圆角大小

166      * @parammRoundRadius

167      */

168     public void setRoundRadius(int mRoundRadius) {

169         if(this.mRoundRadius !=mRoundRadius){

170             this.mRoundRadius =mRoundRadius;

171             invalidate();

172         }

173       

174     }

175 }

 

 

 

 1 MainActivity类

 2 /****

 3  *

 4  * 自定义ImageView实现圆形图片,圆角矩形图片 椭圆图片

 5  *

 6  * @authorzq

 7  *

 8  */

 9 public class MainActivity extends Activity {

10 

11  

12     private  ZQImageViewRoundOvaliv_circle;//圆形图片

13     private ZQImageViewRoundOvaliv_roundRect;//圆角矩形图片

14     private ZQImageViewRoundOvaliv_oval;//椭圆图片

15     @Override

16     protected void onCreate(Bundle savedInstanceState) {

17         super.onCreate(savedInstanceState);

18       setContentView(R.layout.activity_image);

19       initViews();

20    }

21    /**

22     * 初始化Views

23     */

24    private void initViews(){

25       iv_circle =(ZQImageViewRoundOval)findViewById(R.id.cicle);

26       iv_roundRect =(ZQImageViewRoundOval)findViewById(R.id.roundRect);

27       iv_oval =(ZQImageViewRoundOval)findViewById(R.id.oval);

28      

29     

30       iv_roundRect.setType(ZQImageViewRoundOval.TYPE_ROUND);

31       iv_roundRect.setRoundRadius(6);//矩形凹行大小

32      

33        iv_oval.setType(ZQImageViewRoundOval.TYPE_OVAL);

34        iv_oval.setRoundRadius(45);//圆角大小

35    }

36 }

 

 

源码下载:

 

Eclipse下载:http://download.csdn.net/detail/dickyqie/9621330

AndroidStudio下载:https://github.com/DickyQie/android-imageview

原文链接:http://www.apkbus.com/blog-894741-63333.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP