【Android CustomImageView】圖片圓角設定/圓形圖片設定
阿新 • • 發佈：2019-02-08
這個貼參考 鴻洋_ dalao 的，我進行簡單介紹！
現在的QQ，微信，貼吧等等app中，使用者的頭像 圓形，圓角化很常見了！
這個貼就是介紹 圖片的 圓角設定！
例子：
程式碼構成：
其實主要靠：paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));這行程式碼，為什麼呢，我給大家解釋下，SRC_IN這種模式，兩個繪製的效果疊加後取交集展現後圖，怎麼說呢，咱們第一個繪製的是個圓形，第二個繪製的是個Bitmap，於是交集為圓形，展現的是BItmap，就實現了圓形圖片效果。圓角，其實就是先繪製圓角矩形，是不是很簡單，以後別人再說實現圓角，你就把這一行程式碼給他就行了。
一、CustomImageView外掛
package com.open_open.android_plantest; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; import android.graphics.RectF; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; /** * 自定義View，實現圓角，圓形等效果 * * @author zhy * */ public class CustomImageView extends View { /** * TYPE_CIRCLE / TYPE_ROUND */ private int type; private static final int TYPE_CIRCLE = 0; private static final int TYPE_ROUND = 1; /** * 圖片 */ private Bitmap mSrc; /** * 圓角的大小 */ private int mRadius; /** * 控制元件的寬度 */ private int mWidth; /** * 控制元件的高度 */ private int mHeight; public CustomImageView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomImageView(Context context) { this(context, null); } /** * 初始化一些自定義的引數 * * @param context * @param attrs * @param defStyle */ public CustomImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); switch (attr) { case R.styleable.CustomImageView_src: mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0)); break; case R.styleable.CustomImageView_type: type = a.getInt(attr, 0);// 預設為Circle break; case R.styleable.CustomImageView_borderRadius: mRadius = a.getDimensionPixelSize(attr, (int) TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f, getResources().getDisplayMetrics()));// 預設為10DP break; } } a.recycle(); } /** * 計算控制元件的高度和寬度 */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // super.onMeasure(widthMeasureSpec, heightMeasureSpec); /** * 設定寬度 */ int specMode = MeasureSpec.getMode(widthMeasureSpec); int specSize = MeasureSpec.getSize(widthMeasureSpec); if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate { mWidth = specSize; } else { // 由圖片決定的寬 int desireByImg = getPaddingLeft() + getPaddingRight() + mSrc.getWidth(); if (specMode == MeasureSpec.AT_MOST)// wrap_content { mWidth = Math.min(desireByImg, specSize); } else mWidth = desireByImg; } /*** * 設定高度 */ specMode = MeasureSpec.getMode(heightMeasureSpec); specSize = MeasureSpec.getSize(heightMeasureSpec); if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate { mHeight = specSize; } else { int desire = getPaddingTop() + getPaddingBottom() + mSrc.getHeight(); if (specMode == MeasureSpec.AT_MOST)// wrap_content { mHeight = Math.min(desire, specSize); } else mHeight = desire; } setMeasuredDimension(mWidth, mHeight); } /** * 繪製 */ @Override protected void onDraw(Canvas canvas) { switch (type) { // 如果是TYPE_CIRCLE繪製圓形 case TYPE_CIRCLE: int min = Math.min(mWidth, mHeight); /** * 長度如果不一致，按小的值進行壓縮 */ mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false); canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null); break; case TYPE_ROUND: canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null); break; } } /** * 根據原圖和變長繪製圓形圖片 * * @param source * @param min * @return */ private Bitmap createCircleImage(Bitmap source, int min) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888); /** * 產生一個同樣大小的畫布 */ Canvas canvas = new Canvas(target); /** * 首先繪製圓形 */ canvas.drawCircle(min / 2, min / 2, min / 2, paint); /** * 使用SRC_IN，參考上面的說明 */ paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); /** * 繪製圖片 */ canvas.drawBitmap(source, 0, 0, paint); return target; } /** * 根據原圖新增圓角 * * @param source * @return */ private Bitmap createRoundConerImage(Bitmap source) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888); Canvas canvas = new Canvas(target); RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight()); canvas.drawRoundRect(rect, mRadius, mRadius, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(source, 0, 0, paint); return target; } }
二、主頁的程式碼
（其實就是一個跳轉和呼叫選單menu）
package com.open_open.android_plantest; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class PhotoYJ extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_photo_yj); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }
------------------------xml檔案
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:zhy="http://schemas.android.com/apk/res-auto"
（這個在studio是自動判斷，eclipse要手動寫包名）
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="@drawable/icon" />
<com.open_open.android_plantest.CustomImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
zhy:src="@drawable/icon"
zhy:type="circle" />
<com.open_open.android_plantest.CustomImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
zhy:borderRadius="10dp"
zhy:src="@drawable/icon"
zhy:type="round" />
<com.open_open.android_plantest.CustomImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
zhy:borderRadius="20dp"
zhy:src="@drawable/icon"
zhy:type="round" />
</LinearLayout>
</ScrollView>注意自己的包名有沒有寫錯。
三、選單 和 自定義的view
1、main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="@string/action_settings"/>
</menu>
2、attr.xml （自定義的view）
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="borderRadius" format="dimension" />
<attr name="type">
<enum name="circle" value="0" />
<enum name="round" value="1" />
</attr>
<attr name="src" format="reference"></attr>
<declare-styleable name="CustomImageView">
<attr name="borderRadius" />
<attr name="type" />
<attr name="src" />
</declare-styleable>
</resources>