Xamarin.Android ImageView 圖片圓角顯示
阿新 • • 發佈:2018-12-28
第一步:在 values 資料夾下新增 Attrs.xml 檔案
<?xml version="1.0" encoding="utf-8" ?> <resources> <declare-styleable name="RoundImageView"> <attr name="border_width" format="dimension" /> <attr name="border_color" format="color" /> </declare-styleable> </resources>
第二步:建立名為 RoundImageView 的類,用於自定義圖片展示。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Android.App; using Android.Content; using Android.Graphics; using Android.OS; using Android.Runtime; using Android.Views; using Android.Widget; using Android.Util;using Java.Util.Jar; using Android.Graphics.Drawables; using static Android.Graphics.PorterDuff; using Android.Content.Res; namespace RoundImageViewDemo { /// <summary> /// 圓角 /// </summary> public class RoundImageView : ImageView { private int mBorderWidth = 10;private Bitmap mask; private Paint paint; private Color mBorderColor = Color.ParseColor("#CCCCCC"); private Context mContext; public RoundImageView(Context context) : base(context) { mContext = context; } public RoundImageView(Context context, IAttributeSet attrs) : base(context, attrs) { mContext = context; GetAttributes(context, attrs); } public RoundImageView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle) { mContext = context; GetAttributes(context, attrs); } /// <summary> /// 獲取自定義屬性 /// </summary> /// <param name="context"></param> /// <param name="attrs"></param> private void GetAttributes(Context context, IAttributeSet attrs) { TypedArray t_attrs = context.ObtainStyledAttributes(attrs, Resource.Styleable.RoundImageView); mBorderColor = t_attrs.GetColor(Resource.Styleable.RoundImageView_border_color, mBorderColor); int defalut = (int)(2 * context.Resources.DisplayMetrics.Density + 0.5f); mBorderWidth = t_attrs.GetDimensionPixelOffset(Resource.Styleable.RoundImageView_border_width, defalut); t_attrs.Recycle(); } protected override void OnDraw(Canvas canvas) { Drawable localDrawable = Drawable; if (localDrawable == null) return; if (localDrawable is NinePatchDrawable) return; if (this.paint == null) { PorterDuff.Mode localMode = PorterDuff.Mode.DstIn; Paint localPaint = new Paint(); localPaint.FilterBitmap = false; localPaint.AntiAlias = true; localPaint.SetXfermode(new PorterDuffXfermode(localMode)); this.paint = localPaint; } int width = Width; int height = Height; /** 儲存layer */ int layer = canvas.SaveLayer(0.0F, 0.0F, width, height, null, SaveFlags.All); /** 設定drawable的大小 */ localDrawable.SetBounds(0, 0, width, height); /** 將drawable繫結到bitmap(this.mask)上面(drawable只能通過bitmap顯示出來) */ localDrawable.Draw(canvas); if ((this.mask == null) || (this.mask.IsRecycled)) { this.mask = CreateOvalBitmap(width, height); } /** 將bitmap畫到canvas上面 */ canvas.DrawBitmap(this.mask, 0.0F, 0.0F, this.paint); /** 將畫布複製到layer上 */ canvas.RestoreToCount(layer); DrawBorder(canvas, width, height); } private void DrawBorder(Canvas canvas, int width, int height) { if (mBorderWidth == 0) return; Paint mBorderPaint = new Paint(); mBorderPaint.SetStyle(Paint.Style.Stroke); mBorderPaint.AntiAlias = true; mBorderPaint.Color = mBorderColor; mBorderPaint.StrokeWidth = mBorderWidth; /** * 座標x:view寬度的一般 座標y:view高度的一般 半徑r:因為是view的寬度-border的一半 */ canvas.DrawCircle(width >> 1, height >> 1, (width - mBorderWidth) >> 1, mBorderPaint); canvas = null; } /// <summary> /// 獲取一個bitmap,目的是用來承載drawable; /// 將這個bitmap放在canvas上面承載,並在其上面畫一個橢圓(其實也是一個圓,因為width=height)來固定顯示區域 /// </summary> /// <param name="width"></param> /// <param name="height"></param> /// <returns></returns> public Bitmap CreateOvalBitmap(int width, int height) { Bitmap.Config localConfig = Bitmap.Config.Argb8888; Bitmap localBitmap = Bitmap.CreateBitmap(width, height, localConfig); Canvas localCanvas = new Canvas(localBitmap); Paint localPaint = new Paint(); int padding = mBorderWidth - 3; /** * 設定橢圓的大小(因為橢圓的最外邊會和border的最外邊重合的,如果圖片最外邊的顏色很深,有看出有稜邊的效果,所以為了讓體驗更加好, * 讓其縮排padding px) */ RectF localRectF = new RectF(padding, padding, width - padding, height - padding); localCanvas.DrawOval(localRectF, localPaint); return localBitmap; } } }
第三步:前臺控制元件的呼叫
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal"> <RoundImageViewDemo.RoundImageView android:src="@drawable/icon_boy" android:layout_height="80dp" android:layout_alignParentRight="true" android:id="@+id/iv_userphoto_mycenter_myprofile" android:layout_width="80dp" android:gravity="center_horizontal"/> </LinearLayout>
效果展示:
參考:https://www.cnblogs.com/mycing/p/5556943.html
原始碼下載連結: https://pan.baidu.com/s/1y2ON9qP1k9KsNjkn1xmT9A
提取碼: k4dc