书史足自悦,安用勤与劬。这篇文章主要讲述Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示相关的知识,希望能为你提供帮助。
android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过Paint和onDraw()进行圆形图片显示。
效果图:
文章图片
代码:
1 activity_image.xml 2 < ?xml version="1.0" encoding="utf-8"?> 3 < LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" 4android:layout_width="match_parent" 5android:layout_height="match_parent" 6android:orientation="vertical"> 7 8< com.example.imageviewdrawdemo.ZQImageViewRoundOval 9android:id="@+id/cicle" 10android:layout_width="100dp" 11android:layout_height="100dp" 12android:src="https://www.songbingjia.com/android/@drawable/qie"> 13< /com.example.imageviewdrawdemo.ZQImageViewRoundOval> 14 15< com.example.imageviewdrawdemo.ZQImageViewRoundOval 16android:id="@+id/roundRect" 17android:layout_width="286dp" 18android:layout_height="190dp" 19android:layout_marginTop="10dp" 20android:src="https://www.songbingjia.com/android/@drawable/l1"> 21< /com.example.imageviewdrawdemo.ZQImageViewRoundOval> 22 23< com.example.imageviewdrawdemo.ZQImageViewRoundOval 24android:id="@+id/oval" 25android:layout_width="wrap_content" 26android:layout_height="wrap_content" 27android:layout_marginTop="20dp" 28android:src="https://www.songbingjia.com/android/@drawable/l2"> 29< /com.example.imageviewdrawdemo.ZQImageViewRoundOval> 30 31 < /LinearLayout>
1 /** 2* 实现圆形、圆角,椭圆等自定义图片View。 3* @author zq 4* 5*/ 6 public classZQImageViewRoundOval extends ImageView { 7 8private Paint mPaint; 9 10private int mWidth; 11 12private int mHeight; 13 14private int mRadius; //圆半径 15 16private RectF mRect; //矩形凹行大小 17 18private int mRoundRadius; //圆角大小 19 20private BitmapShader mBitmapShader; //图形渲染 21 22private Matrix mMatrix; 23 24private int mType; //记录是圆形还是圆角矩形 25 26public static final int TYPE_CIRCLE = 0; //圆形 27public static final int TYPE_ROUND = 1; //圆角矩形 28public static final int TYPE_OVAL = 2; //椭圆形 29public static final int DEFAUT_ROUND_RADIUS = 10; //默认圆角大小 30 31public ZQImageViewRoundOval(Context context) { 32this(context, null); 33// TODOAuto-generated constructor stub 34} 35 36public ZQImageViewRoundOval(Context context, AttributeSet attrs) { 37this(context,attrs, 0); 38// TODOAuto-generated constructor stub 39} 40 41public ZQImageViewRoundOval(Context context, AttributeSet attrs,int defStyle){ 42super(context,attrs, defStyle); 43initView(); 44} 45 46private void initView() { 47mPaint = new Paint(); 48mPaint.setAntiAlias(true); 49mMatrix = new Matrix(); 50mRoundRadius = DEFAUT_ROUND_RADIUS; 51} 52 53@Override 54protected void onMeasure(int widthMeasureSpec,intheightMeasureSpec) { 55// TODOAuto-generated method stub 56super.onMeasure(widthMeasureSpec,heightMeasureSpec); 57// 如果是绘制圆形,则强制宽高大小一致 58if (mType ==TYPE_CIRCLE) { 59mWidth = Math.min(getMeasuredWidth(),getMeasuredHeight()); 60mRadius = mWidth / 2; 61setMeasuredDimension(mWidth, mWidth); 62} 63 64} 65 66@Override 67protected void onDraw(Canvas canvas) { 68 69if (null ==getDrawable()) { 70return; 71} 72setBitmapShader(); 73if (mType ==TYPE_CIRCLE) { 74canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); 75} else if (mType == TYPE_ROUND) { 76mPaint.setColor(Color.RED); 77canvas.drawRoundRect(mRect, mRoundRadius, mRoundRadius, mPaint); 78}else if(mType == TYPE_OVAL){ 79canvas.drawOval(mRect, mPaint); 80} 81} 82 83@Override 84protected void onSizeChanged(int w,int h, int oldw,int oldh) { 85// TODOAuto-generated method stub 86super.onSizeChanged(w,h, oldw, oldh); 87mRect = new RectF(0,0, getWidth(), getHeight()); 88} 89 90/** 91* 设置BitmapShader 92*/ 93private void setBitmapShader() { 94Drawable drawable = getDrawable(); 95if (null ==drawable) { 96return; 97} 98Bitmap bitmap = drawableToBitmap(drawable); 99// 将bitmap作为着色器来创建一个BitmapShader 100mBitmapShader = newBitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP); 101float scale =1.0f; 102if (mType ==TYPE_CIRCLE) { 103// 拿到bitmap宽或高的小值 104int bSize =Math.min(bitmap.getWidth(), bitmap.getHeight()); 105scale = mWidth * 1.0f /bSize; 106 107} else if (mType == TYPE_ROUND ||mType == TYPE_OVAL) { 108// 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值; 109scale = Math.max(getWidth() * 1.0f/ bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight()); 110} 111// shader的变换矩阵,我们这里主要用于放大或者缩小 112mMatrix.setScale(scale,scale); 113// 设置变换矩阵 114mBitmapShader.setLocalMatrix(mMatrix); 115mPaint.setShader(mBitmapShader); 116 117} 118 119/** 120* drawable转bitmap 121* 122* @paramdrawable 123* @return 124*/ 125private Bitmap drawableToBitmap(Drawable drawable) { 126if (drawableinstanceof BitmapDrawable) { 127BitmapDrawable bitmapDrawable =(BitmapDrawable) drawable; 128returnbitmapDrawable.getBitmap(); 129} 130int w =drawable.getIntrinsicWidth(); 131int h =drawable.getIntrinsicHeight(); 132Bitmap bitmap = Bitmap.createBitmap(w,h, Config.ARGB_8888); 133Canvas canvas = newCanvas(bitmap); 134drawable.setBounds(0, 0, w, h); 135drawable.draw(canvas); 136return bitmap; 137} 138/** 139* 单位dp转单位px 140*/ 141public int dpTodx(int dp){ 142 143return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 144dp,getResources().getDisplayMetrics()); 145} 146 147public int getType(){ 148return mType; 149} 150/** 151* 设置图片类型:圆形、圆角矩形、椭圆形 152* @param mType 153*/ 154public void setType(int mType) { 155if(this.mType !=mType){ 156this.mType = mType; 157invalidate(); 158} 159 160} 161public int getRoundRadius() { 162return mRoundRadius; 163} 164/** 165* 设置圆角大小 166* @parammRoundRadius 167*/ 168public void setRoundRadius(int mRoundRadius) { 169if(this.mRoundRadius !=mRoundRadius){ 170this.mRoundRadius =mRoundRadius; 171invalidate(); 172} 173 174} 175 }
1 MainActivity类 2 /**** 3* 4* 自定义ImageView实现圆形图片,圆角矩形图片 椭圆图片 5* 6* @authorzq 7* 8*/ 9 public class MainActivity extends Activity { 10 11 12privateZQImageViewRoundOvaliv_circle; //圆形图片 13private ZQImageViewRoundOvaliv_roundRect; //圆角矩形图片 14private ZQImageViewRoundOvaliv_oval; //椭圆图片 15@Override 16protected void onCreate(Bundle savedInstanceState) { 17super.onCreate(savedInstanceState); 18setContentView(R.layout.activity_image); 19initViews(); 20} 21/** 22* 初始化Views 23*/ 24private void initViews(){ 25iv_circle =(ZQImageViewRoundOval)findViewById(R.id.cicle); 26iv_roundRect =(ZQImageViewRoundOval)findViewById(R.id.roundRect); 27iv_oval =(ZQImageViewRoundOval)findViewById(R.id.oval); 28 29 30iv_roundRect.setType(ZQImageViewRoundOval.TYPE_ROUND); 31iv_roundRect.setRoundRadius(6); //矩形凹行大小 32 33iv_oval.setType(ZQImageViewRoundOval.TYPE_OVAL); 34iv_oval.setRoundRadius(45); //圆角大小 35} 36 }
源码下载:
Eclipse下载:http://download.csdn.net/detail/dickyqie/9621330
AndroidStudio下载: https://github.com/DickyQie/ImageViewDrawDemo
【Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示】
推荐阅读
- Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
- Android Fragment 生命周期
- ANDROID 自动生成动态表格for
- Android4.4 以太网和DHCP启动过程介绍
- 深入理解Android之Java虚拟机Dalvik
- Android 使用shape来画线
- Android Fragment之间传值
- Android界面架构(Activity,PhoneWiondow,DecorView)简介
- 让你Android开发更简单