1. 程式人生 > >Xamarin.Android ImageView 圖片圓角顯示

Xamarin.Android ImageView 圖片圓角顯示

第一步:在 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