ImageView in android can only display rectangular pictures. For more user experience, Android implements shapes such as rounded rectangles, circles or ellipses , which are generally implemented by customizing ImageView . First, get the Bitmap of the picture, and then use Paint and onDraw . ( ) for circular picture display.
Effect picture:
Code:
activity_image.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.example.imageviewdrawdemo.ZQImageViewRoundOval android:id="@+id/cicle" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/qie"> </com.example.imageviewdrawdemo.ZQImageViewRoundOval> <com.example.imageviewdrawdemo.ZQImageViewRoundOval android:id="@+id/roundRect" android:layout_width="286dp" android:layout_height="190dp" android:layout_marginTop="10dp" android:src="@drawable/l1"> </com.example.imageviewdrawdemo.ZQImageViewRoundOval> <com.example.imageviewdrawdemo.ZQImageViewRoundOval android:id="@+id/oval" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:src="@drawable/l2"> </com.example.imageviewdrawdemo.ZQImageViewRoundOval> </LinearLayout>
Custom ImageView class /** * Realize custom picture View such as circle, rounded corner, ellipse, etc. * @author zq * */ public class ZQImageViewRoundOval extends ImageView { private Paint mPaint; private int mWidth; private int mHeight; private int mRadius;//Circle radius private RectF mRect;//Rectangular concave row size private int mRoundRadius;// rounded corner size private BitmapShader mBitmapShader;//Graphics rendering private Matrix mMatrix; private int mType;// whether the record is a circle or a rounded rectangle public static final int TYPE_CIRCLE = 0;// 圆形 public static final int TYPE_ROUND = 1;// rounded rectangle public static final int TYPE_OVAL = 2;//Oval public static final int DEFAUT_ROUND_RADIUS = 10;//Default rounded corner size public ZQImageViewRoundOval(Context context) { this(context, null); // TODOAuto-generated constructor stub } public ZQImageViewRoundOval(Context context, AttributeSet attrs) { this(context,attrs, 0); // TODOAuto-generated constructor stub } public ZQImageViewRoundOval(Context context, AttributeSet attrs, int defStyle){ super(context,attrs, defStyle); initView(); } private void initView() { mPaint = new Paint(); mPaint.setAntiAlias(true); mMatrix = new Matrix(); mRoundRadius = DEFAUT_ROUND_RADIUS; } @Override protected void onMeasure(int widthMeasureSpec, intheightMeasureSpec) { // TODOAuto-generated method stub super.onMeasure(widthMeasureSpec,heightMeasureSpec); // If you are drawing a circle, force the width and height to be the same size if (mType == TYPE_CIRCLE) { mWidth = Math.min(getMeasuredWidth(),getMeasuredHeight()); mRadius = mWidth / 2; setMeasuredDimension(mWidth, mWidth); } } @Override protected void onDraw(Canvas canvas) { if (null ==getDrawable()) { return; } setBitmapShader(); if (mType == TYPE_CIRCLE) { canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); } else if (mType == TYPE_ROUND) { mPaint.setColor(Color.RED); canvas.drawRoundRect(mRect, mRoundRadius, mRoundRadius, mPaint); }else if(mType == TYPE_OVAL){ canvas.drawOval(mRect, mPaint); } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { // TODOAuto-generated method stub super.onSizeChanged(w,h, oldw, oldh); mRect = new RectF(0,0, getWidth(), getHeight()); } /** * Set BitmapShader */ private void setBitmapShader() { Drawable drawable = getDrawable(); if (null ==drawable) { return; } Bitmap bitmap = drawableToBitmap(drawable); // Create a BitmapShader with the bitmap as a shader mBitmapShader = newBitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP); float scale =1.0f; if (mType == TYPE_CIRCLE) { // Get the small value of bitmap width or height int bSize =Math.min(bitmap.getWidth(), bitmap.getHeight()); scale = mWidth * 1.0f /bSize; } else if (mType == TYPE_ROUND || mType == TYPE_OVAL) { // If the width or height of the picture does not match the width and height of the view, calculate the ratio that needs to be scaled; the width and height of the scaled picture must be greater than the width and height of our view; so we take the larger value here; scale = Math.max(getWidth() * 1.0f/ bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight()); } // The transformation matrix of the shader, we are mainly used here to enlarge or reduce mMatrix.setScale(scale,scale); // set transformation matrix mBitmapShader.setLocalMatrix(mMatrix); mPaint.setShader (mBitmapShader); } /** * drawable to bitmap * * @paramdrawable * @return */ private Bitmap drawableToBitmap(Drawable drawable) { if (drawableinstanceof BitmapDrawable) { BitmapDrawable bitmapDrawable =(BitmapDrawable) drawable; returnbitmapDrawable.getBitmap(); } int w =drawable.getIntrinsicWidth(); int h =drawable.getIntrinsicHeight(); Bitmap bitmap = Bitmap.createBitmap(w,h, Config.ARGB_8888); Canvas canvas = newCanvas(bitmap); drawable.setBounds(0, 0, w, h); drawable.draw(canvas); return bitmap; } /** * Unit dp to unit px */ public int dpTodx(int dp){ return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,getResources().getDisplayMetrics()); } public int getType(){ return mType; } /** * Set picture type: circle, rounded rectangle, oval * @param mType */ public void setType(int mType) { if(this.mType !=mType){ this.mType = mType; invalidate(); } } public int getRoundRadius() { return mRoundRadius; } /** * Set the rounded corner size * @parammRoundRadius */ public void setRoundRadius(int mRoundRadius) { if(this.mRoundRadius !=mRoundRadius){ this.mRoundRadius =mRoundRadius; invalidate(); } } }
MainActivity class /**** * * Customize ImageView to realize circular picture, rounded rectangular picture and ellipse picture * * @authorzq * */ public class MainActivity extends Activity { private ZQImageViewRoundOvaliv_circle;//Circle picture private ZQImageViewRoundOvaliv_roundRect;//Round rectangle picture private ZQImageViewRoundOvaliv_oval;//Ellipse picture @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate (savedInstanceState); setContentView(R.layout.activity_image); initViews(); } /** * Initialize Views */ private void initViews(){ iv_circle =(ZQImageViewRoundOval)findViewById(R.id.cicle); iv_roundRect =(ZQImageViewRoundOval)findViewById(R.id.roundRect); iv_oval =(ZQImageViewRoundOval)findViewById(R.id.oval); iv_roundRect.setType(ZQImageViewRoundOval.TYPE_ROUND); iv_roundRect.setRoundRadius(6);//Rectangular concave row size iv_oval.setType(ZQImageViewRoundOval.TYPE_OVAL); iv_oval.setRoundRadius(45);//Round size } }
Source code download:
Eclipse download: http://download.csdn.net/detail/dickyqie/9621330
AndroidStudio download: https://github.com/DickyQie/android-imageview