2. 程式人生 > >Android Xfermode 實戰 實現圓形、圓角圖片

Android Xfermode 實戰 實現圓形、圓角圖片

阿新 • • 發佈：2019-01-29

1、概述

其實這篇本來準備Android BitmapShader 實戰 實現圓形、圓角圖片放到一篇裡面，結果由於篇幅原因就獨立出來了~在很久以前也寫過一個利用Xfermode 實現圓形、圓角圖片的，但是那個繼承的是View，其實繼承ImageView能方便點，最起碼省去了onMeasure裡面自己去策略，以及不需要自己去提供設定圖片的方法，最主要的是大家對ImageView的API會比較熟悉，用起來會比較順手。

好了，本篇就當是個記錄了~~~電腦上程式碼放幾天就找不到了，還是放部落格裡面，有需要自己過來看看~~~

2、原理


原理就不多說了，這張圖在我部落格裡出現的次數大概有3次以上了，我們這次使用的模式DST_IN；也就是先繪製圖片，再繪製形狀了~~

3、Xfermode實戰

1、自定義屬性

首先依然是自定義屬性，和上篇一致。

<?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>
  

    <declare-styleable name="RoundImageViewByXfermode">
        <attr name="borderRadius" />
        <attr name="type" />
    </declare-styleable>

</resources>

2、構造中獲取屬性

public class RoundImageViewByXfermode extends ImageView
{

	private Paint mPaint;
	private Xfermode mXfermode = new PorterDuffXfermode(Mode.DST_IN);
	private Bitmap mMaskBitmap;

	private WeakReference<Bitmap> mWeakBitmap;

	/**
	 * 圖片的型別，圓形or圓角
	 */
	private int type;
	public static final int TYPE_CIRCLE = 0;
	public static final int TYPE_ROUND = 1;
	/**
	 * 圓角大小的預設值
	 */
	private static final int BODER_RADIUS_DEFAULT = 10;
	/**
	 * 圓角的大小
	 */
	private int mBorderRadius;

	public RoundImageViewByXfermode(Context context)
	{
		this(context,null);

		mPaint = new Paint();
		mPaint.setAntiAlias(true);
	}

	public RoundImageViewByXfermode(Context context, AttributeSet attrs)
	{
		super(context, attrs);

		mPaint = new Paint();
		mPaint.setAntiAlias(true);

		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.RoundImageViewByXfermode);

		mBorderRadius = a.getDimensionPixelSize(
				R.styleable.RoundImageViewByXfermode_borderRadius, (int) TypedValue
						.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
								BODER_RADIUS_DEFAULT, getResources()
										.getDisplayMetrics()));// 預設為10dp
		Log.e("TAG", mBorderRadius+"");
		type = a.getInt(R.styleable.RoundImageViewByXfermode_type, TYPE_CIRCLE);// 預設為Circle

		a.recycle();
	}

獲取自定義屬性，然後還寫些成員變數~~

3、onMeasure

@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		/**
		 * 如果型別是圓形，則強制改變view的寬高一致，以小值為準
		 */
		if (type == TYPE_CIRCLE)
		{
			int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
			setMeasuredDimension(width, width);
		}

	}

在onMeasure中，如果是圓形則重新設定view大小。

4、onDraw

@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas)
	{
		//在快取中取出bitmap
		Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();

		if (null == bitmap || bitmap.isRecycled())
		{
			//拿到Drawable
			Drawable drawable = getDrawable();
			//獲取drawable的寬和高
			int dWidth = drawable.getIntrinsicWidth();
			int dHeight = drawable.getIntrinsicHeight();

			if (drawable != null)
			{
				//建立bitmap
				bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
						Config.ARGB_8888);
				float scale = 1.0f;
				//建立畫布
				Canvas drawCanvas = new Canvas(bitmap);
				//按照bitmap的寬高，以及view的寬高，計算縮放比例；因為設定的src寬高比例可能和imageview的寬高比例不同，這裡我們不希望圖片失真；
				if (type == TYPE_ROUND)
				{
					// 如果圖片的寬或者高與view的寬高不匹配，計算出需要縮放的比例；縮放後的圖片的寬高，一定要大於我們view的寬高；所以我們這裡取大值；
					scale = Math.max(getWidth() * 1.0f / dWidth, getHeight()
							* 1.0f / dHeight);
				} else
				{
					scale = getWidth() * 1.0F / Math.min(dWidth, dHeight);
				}
				//根據縮放比例，設定bounds，相當於縮放圖片了
				drawable.setBounds(0, 0, (int) (scale * dWidth),
						(int) (scale * dHeight));
				drawable.draw(drawCanvas);
				if (mMaskBitmap == null || mMaskBitmap.isRecycled())
				{
					mMaskBitmap = getBitmap();
				}
				// Draw Bitmap.
				mPaint.reset();
				mPaint.setFilterBitmap(false);
				mPaint.setXfermode(mXfermode);
				//繪製形狀
				drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);
				mPaint.setXfermode(null);
				//將準備好的bitmap繪製出來
				canvas.drawBitmap(bitmap, 0, 0, null);
				//bitmap快取起來，避免每次呼叫onDraw，分配記憶體
				mWeakBitmap = new WeakReference<Bitmap>(bitmap);
			}
		}
		//如果bitmap還存在，則直接繪製即可
		if (bitmap != null)
		{
			mPaint.setXfermode(null);
			canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
			return;
		}

	}
	/**
	 * 繪製形狀
	 * @return
	 */
	public Bitmap getBitmap()
	{
		Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
				Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
		paint.setColor(Color.BLACK);

		if (type == TYPE_ROUND)
		{
			canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),
					mBorderRadius, mBorderRadius, paint);
		} else
		{
			canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,
					paint);
		}

		return bitmap;
	}

在onDraw中拿到drawable，然後獲取drawable的寬和高，根據當前的type和view的寬和高，進行適當的縮放。具體原理：參考上篇的matrix的scale計算，原理一致。

然後就是設定Xfermode，getBitmap會根據type返回圖形，直接繪製到記憶體中的bitmap上即可。最後把bitmap快取起來，避免每次onDraw都分配記憶體和重啟繪圖。

大家可以進行擴充套件type，繪製心形、三角形什麼的，直接在getBitmap裡面新增分支就可以。

最後記得invalidate中做一些處理：

@Override
	public void invalidate()
	{
		mWeakBitmap = null;
		if (mMaskBitmap != null)
		{
			mMaskBitmap.recycle();
			mMaskBitmap = null;
		}
		super.invalidate();
	}

主要是因為我們快取了，當呼叫invalidate時，將快取清除。

4、佈局檔案及效果圖

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.variousshapeimageview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >


        <com.zhy.view.RoundImageViewByXfermode
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_margin="10dp"
            android:src="@drawable/qiqiu" >
        </com.zhy.view.RoundImageViewByXfermode>

        <com.zhy.view.RoundImageViewByXfermode
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:src="@drawable/aa"
            zhy:borderRadius="30dp"
            zhy:type="round" >
        </com.zhy.view.RoundImageViewByXfermode>

        <com.zhy.view.RoundImageViewByXfermode
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:src="@drawable/aa"
            zhy:type="circle" >
        </com.zhy.view.RoundImageViewByXfermode>

        <com.zhy.view.RoundImageViewByXfermode
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:src="@drawable/aa"
            zhy:type="circle" >
        </com.zhy.view.RoundImageViewByXfermode>

    </LinearLayout>

</ScrollView>

效果圖：


好了，比較簡單~~

宣告下：本例參考了：https://github.com/MostafaGazar/CustomShapeImageView ;不過對其中的部分程式碼進行了改變，比如CustomShapeImageView如果圖片為長方形，但是設定為circle型別，效果依然是矩形；以及會對bitmap比例和view比例不一致的直接進行壓縮，類似fitxy的效果~~~主要對這兩點進行了修改~~當然了，該案例比本部落格功能要強大，看名字也知道，支援很多形狀，以及支援SVG~大家自行進行參考~

博主部分視訊已經上線，如果你不喜歡枯燥的文字，請猛戳（初錄，期待您的支援）：



相關推薦

Android Xfermode 實戰 實現圓形、圓角圖片

1、概述其實這篇本來準備Android BitmapShader 實戰 實現圓形、圓角圖片放到一篇裡面，結果由於篇幅原因就獨立出來了~在很久以前也寫過一個利用Xfermode 實現圓形、圓角圖片的，但是那個繼承的是View，其實繼承ImageView能方便點，最起碼省去了on

Android BitmapShader 實戰 實現圓形、圓角圖片

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/41967509，本文出自：【張鴻洋的部落格】1、概述記得初學那會寫過一篇部落格Android 完美實現圖片圓角和圓形（對實現進行分析），主要是個自定View加

Android Glide載入圖片時轉換為圓形、圓角、毛玻璃等圖片效果

Android Glide載入圖片時轉換為圓形、圓角、毛玻璃等圖片效果 附錄1簡單介紹了Android開源的圖片載入框架。在實際的開發中，雖然Glide解決了快速載入圖片的問題，但還有一個問題懸而未決：比如使用者的頭像，往往使用者的頭像是從伺服器端讀出的一個普通矩形圖片

自定義View（1）--圓形圖片、圓角圖片的實現

之前說過會將專案中運用的東西抽離出來做一個總結，今天我主要想總結一下圓角和圓形頭像問題。由於我們的應用涉及到很多使用者頭像，如果所有的影象都是方方正正的話，那顯得不是很美觀，所以設計溼強行要我將頭像圓角化處理。好吧，so easy。專案截圖我就不想貼了，還是一貫貼demo截

自定義圓形圖片、圓角圖片，橢圓圖片

自定義圓形圖片、圓角圖片，橢圓圖片，主要是利用BitmapShader （點陣圖Shader）來進行圖形填充； 先看效果圖: <?xml version="1.0" encoding="utf-8"?> <resources> <attr

Android 7.0實現拍照、獲取相簿圖片上傳頭像功能

對網上關於Android7.0的上傳頭像進行整理 1.新增許可權管理。內容例如以下： <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-pe

TitleLayout——一個Android輕松實現通用、標準、支持沈浸式狀態欄的標題欄庫

sub blog uri IT 特殊 java代碼 ber ext tar TitleLayout 多功能、通用的、可在布局或者使用Java代碼實現標題欄；支持沈浸式狀態欄，支持左側返回按鈕（不需要手動實現頁面返回），左側支持圖片+文字、圖片、文字；右側支持圖片、文字等。

Android 使用ViewPager實現左右迴圈滑動圖片

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android——EditText自定義邊框、圓角和其常用屬性總結

看下效果圖： 執行步驟： 首先在/res/layout資料夾下建立custom_et_layout.xml佈局檔案，原始碼如下： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:

Android使用CircleImageView實現圓形頭像

     一般做社交類APP，包括其他很多隻要有個人頁面的基本都會有設定頭像的這個功能，而且大多數也是圓形的頭像，顯的也比較美觀，github上有很多別人的第三方工具類，今天沒事就自己研究了一下看了看原始碼，下面附上程式碼。   自定義ViewCircleImageView 

Android使用shape實現非四角圓角

如圖效果：如果直接設定radius，會是四角都是圓角 <corners android:radius="5dp" /> 區別性的設定圓角，需要使用下面的： <shape xml

android使用ucrop實現頭像裁剪，圖片裁剪的使用

github地址  https://github.com/linliangliang/CorpIamge uCrop 支援縮放圖片，旋轉圖片，改變裁剪長寬比例，支援出手勢：一根指頭滑動圖片，兩根指頭旋轉圖片，捏拉縮放，雙擊縮放。等功能。對於裁剪頭像的需求基本滿足。 下面記

Android自定義實現圓形播放進度條

自定義實現圓形播放進度條（Android，飛一般的感覺）。 廢話不多說，先上效果圖： Android提供了很多基本的控制元件實現，但不是一個完整、強大的實現。 幸運的是，Android提供了自定義控制元件的實現，有了自定義控制元件，我們就可以再Androi

httpClient及android 原生介面實現下載並顯示圖片

前言：這篇文章用到了Android的handler機制，對於handler機制我也還沒搞得太清楚，只能先把相關的幾個帖子貼上，大家先看看吧，等後面理解了再仔細講講，最後我另外給出了用android原生HttpURLConnection是怎樣來下載並顯示圖片的，但這種方法一般

android 使用BitmapShader實現圓形以及放大鏡效果

在一些顯示使用者頭像的時候,大多數都是顯示圓形的,而不是顯示一個正方形或者長方形,這樣顯得很呆板,視覺效果也不好看,今天就用二種方式實現圖片圓形顯示的效果,在先講這個效果實現之前,講下BitmapShader到底能幹嘛,android有幾個關於渲染的類,使用它能實現一些不錯

Android利用CircleImageView實現圓形頭像效果整理

一、參考內容 根據上面大神的修改。但是使用方法已經變了。最先版本使用是 並且在build.gradle中新增依賴: compile 'de.hdodenhof:circleimageview:2.1.0' <de.hdodenhof.cir

Android 基於ImageSwitcher實現的左右切換圖片

左右切換圖片控制元件大家都用ViewPager, ViewFipper比較多吧，我之前也用ViewPager實現了，有興趣的可以去看下，今天介紹的是基於ImageSwitcher實現的左右切換圖片，先上截圖吧 好了，接下來來看程式碼吧，第一張圖是一個

Android呼叫相機實現拍照並裁剪圖片，呼叫手機中的相簿圖片並裁剪圖片

在 Android應用中，很多時候我們需要實現上傳圖片，或者直接呼叫手機上的拍照功能拍照處理然後直接顯示並上傳功能，下面將講述呼叫相機拍照處理圖片然後顯示和呼叫手機相簿中的圖片處理然後顯示的功能，要想實現上傳功能，一般都是上傳到資料庫中，將imageView中的圖片取出來然

Glide 圓形圖片和圓角圖片的實現

一、背景前言 在Android APP的設計中圓角和圓形圖片的設計是必須的，網上關於圓形和圓角圖片的實現方案也已經有很多，但是那都是人家的，因此在此總結一下，方便後續設計中的查閱，希望對需要幫助的你也有用。 二、方案的實現 2.1 方案一 使用RoundedBitmapDraw

用UGUI方式實現圖片的遮罩，圓角圖片，圓形圖片效果

實現圖片的圓角效果，圓形圖片效果，是一個很常見的功能，如下 很多人會使用shader來做，但是太麻煩了，網上關於UGUI實現這種效果的方法我也一直沒有找到 我這裡知道一個很簡單的方法，不用寫一行程式碼 現在我打算告訴你 原理，就是通過Mask遮罩來實現 第一步：