自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)

时间:2022-06-07 20:35:35

最近遇到新需求   不论用户上传什么形状的头像  展示的时候都要显示成圆形  且头像背后是有背景图的   。

于是想到了 将控件变圆  这样可以任意适配了

先上效果图

下图为方形头像

自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)


而此处展示为圆形

自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)                  

自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)


下面展示下 重写的imageview    实质是用canvas去画控件的四个角  

[java]  view plain copy 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角) 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)
  1. /* 
  2.  * 文 件 名:  MyImageView.java 
  3.  * 版    权:  Linkage Technology Co., Ltd. Copyright 2010-2011,  All rights reserved 
  4.  * 描    述:  <描述> 
  5.  * 版    本: <版本号>  
  6.  * 创 建 人:  Wuhq 
  7.  * 创建时间:  2013-12-11 
  8.   
  9.  */  
  10. package com.suo.myimage;  
  11.   
  12. import android.content.Context;  
  13. import android.content.res.TypedArray;  
  14. import android.graphics.Bitmap;  
  15. import android.graphics.Canvas;  
  16. import android.graphics.Color;  
  17. import android.graphics.Paint;  
  18. import android.graphics.Path;  
  19. import android.graphics.PorterDuff;  
  20. import android.graphics.PorterDuffXfermode;  
  21. import android.graphics.RectF;  
  22. import android.graphics.Bitmap.Config;  
  23. import android.util.AttributeSet;  
  24. import android.widget.ImageView;  
  25.   
  26. /** 
  27.  * <一句话功能简述> 
  28.  * <功能详细描述> 
  29.  *  
  30.  * @author  Wuhq 
  31.  * @version  [版本号, 2013-12-11] 
  32.  * @see  [相关类/方法] 
  33.  * @since  [产品/模块版本] 
  34.  */  
  35. public class MyImageView extends ImageView  
  36. {  
  37.   
  38.     private Paint paint;   
  39.     private int roundWidth = 180//这里的宽高很关键  
  40.     private int roundHeight = 180//这里的宽高很关键  
  41.   
  42.     private Paint paint2;   
  43.    
  44.     public MyImageView(Context context, AttributeSet attrs, int defStyle) {   
  45.         super(context, attrs, defStyle);   
  46.         init(context, attrs);   
  47.     }   
  48.    
  49.     public MyImageView(Context context, AttributeSet attrs) {   
  50.         super(context, attrs);   
  51.         init(context, attrs);   
  52.     }   
  53.    
  54.     public MyImageView(Context context) {   
  55.         super(context);   
  56.         init(context, null);   
  57.     }   
  58.        
  59.     private void init(Context context, AttributeSet attrs) {   
  60.            
  61.         if(attrs != null) {      
  62.             TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundAngleImageView);    
  63.             roundWidth= a.getDimensionPixelSize(R.styleable.RoundAngleImageView_roundWidth, roundWidth);   
  64.             roundHeight= a.getDimensionPixelSize(R.styleable.RoundAngleImageView_roundHeight, roundHeight);   
  65.         }else {   
  66.             float density = context.getResources().getDisplayMetrics().density;   
  67.             roundWidth = (int) (roundWidth*density);   
  68.             roundHeight = (int) (roundHeight*density);   
  69.         }    
  70.            
  71.         paint = new Paint();   
  72.         paint.setColor(Color.WHITE);   
  73.         paint.setAntiAlias(true);   
  74.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));   
  75.            
  76.         paint2 = new Paint();   
  77.         paint2.setXfermode(null);   
  78.     }   
  79.        
  80.     @Override   
  81.     public void draw(Canvas canvas) {   
  82.         Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);   
  83.         Canvas canvas2 = new Canvas(bitmap);   
  84.         super.draw(canvas2);   
  85.         drawLiftUp(canvas2);   
  86.         drawRightUp(canvas2);   
  87.         drawLiftDown(canvas2);   
  88.         drawRightDown(canvas2);   
  89.         canvas.drawBitmap(bitmap, 00, paint2);   
  90.         bitmap.recycle();   
  91.     }   
  92.        
  93.     private void drawLiftUp(Canvas canvas) {   
  94.         Path path = new Path();   
  95.         path.moveTo(0, roundHeight);   
  96.         path.lineTo(00);   
  97.         path.lineTo(roundWidth, 0);   
  98.         path.arcTo(new RectF(   
  99.                 0,    
  100.                 0,    
  101.                 roundWidth*2,    
  102.                 roundHeight*2),    
  103.                 -90,    
  104.                 -90);   
  105.         path.close();   
  106.         canvas.drawPath(path, paint);   
  107.     }   
  108.        
  109.     private void drawLiftDown(Canvas canvas) {   
  110.         Path path = new Path();   
  111.         path.moveTo(0, getHeight()-roundHeight);   
  112.         path.lineTo(0, getHeight());   
  113.         path.lineTo(roundWidth, getHeight());   
  114.         path.arcTo(new RectF(   
  115.                 0,    
  116.                 getHeight()-roundHeight*2,    
  117.                 0+roundWidth*2,    
  118.                 getHeight()),    
  119.                 90,    
  120.                 90);   
  121.         path.close();   
  122.         canvas.drawPath(path, paint);   
  123.     }   
  124.        
  125.     private void drawRightDown(Canvas canvas) {   
  126.         Path path = new Path();   
  127.         path.moveTo(getWidth()-roundWidth, getHeight());   
  128.         path.lineTo(getWidth(), getHeight());   
  129.         path.lineTo(getWidth(), getHeight()-roundHeight);   
  130.         path.arcTo(new RectF(   
  131.                 getWidth()-roundWidth*2,    
  132.                 getHeight()-roundHeight*2,    
  133.                 getWidth(),    
  134.                 getHeight()), 090);   
  135.         path.close();   
  136.         canvas.drawPath(path, paint);   
  137.     }   
  138.        
  139.     private void drawRightUp(Canvas canvas) {   
  140.         Path path = new Path();   
  141.         path.moveTo(getWidth(), roundHeight);   
  142.         path.lineTo(getWidth(), 0);   
  143.         path.lineTo(getWidth()-roundWidth, 0);   
  144.         path.arcTo(new RectF(   
  145.                 getWidth()-roundWidth*2,    
  146.                 0,    
  147.                 getWidth(),    
  148.                 0+roundHeight*2),    
  149.                 -90,    
  150.                 90);   
  151.         path.close();   
  152.         canvas.drawPath(path, paint);   
  153.     }  
  154.       
  155. }  

 这是类文件   注意我将控件宽高置为了屏幕宽度的一半 由于我机型分辨率是1280*720  所以一半便是360   所以在上面的自定义imageview里宽高再取一半便是180   这也就是变成圆形的关键     你们可以动态去获取  我就偷懒写死了。

[java]  view plain copy 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角) 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)
  1. package com.suo.myimage;  
  2.   
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.view.Menu;  
  7. import android.view.WindowManager;  
  8. import android.widget.ImageView;  
  9. import android.widget.LinearLayout;  
  10. import android.widget.RelativeLayout;  
  11.   
  12. public class MainActivity extends Activity {  
  13.   
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);   
  17.         setContentView(R.layout.activity_main);  
  18.           
  19.         MyImageView image = (MyImageView) findViewById(R.id.image);  
  20.           
  21.         WindowManager wm = (WindowManager)getSystemService(Context.WINDOW_SERVICE);  
[java]  view plain copy 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角) 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)
  1.         int width = wm.getDefaultDisplay().getWidth()/2;//这里我将控件宽高设为屏幕一半 正方形  
  2.         int height = width;  
  3.           
  4.         //更改该imageview的宽高并重构实现圆角  
  5.         RelativeLayout.LayoutParams linearParams =(RelativeLayout.LayoutParams) image.getLayoutParams();  
  6.         linearParams.width = width;  
  7.         linearParams.height = height;  
  8.         image.invalidate();  
  9.           
  10.     }  
  11.   
  12. }  


最后是布局文件

[java]  view plain copy 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角) 自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".MainActivity"  
  6.     android:background="@drawable/aa" >  
  7.   
  8.     <com.suo.myimage.MyImageView  
  9.         android:id="@+id/image"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="match_parent"  
  12.         android:src="@drawable/bb"  
  13.         android:layout_margin="5dp"/>  
  14. </RelativeLayout>