1. 程式人生 > >Android自定義圓角ImageView 支援網路圖片

Android自定義圓角ImageView 支援網路圖片

         先看下效果圖

         

             我們再來看一張CSDN的圓角圖片

            

             從佈局可以看出csdn app 的頭像也是圓角的Image,但可以看到,有明顯的毛刺感,不知道是csdn 程式設計師的疏忽還是 我手機的問題,本人手機(小米note)。不知道其他的小夥伴顯示效果也是這樣。

             好回到主題。其實實現圓角Image的方式有很多,今天所講的是我認為比較簡單的一種。首先我們需要了解Xfermode屬性,什麼意思呢?看一張圖你就明白了

            

                  這是Xfermode屬性的幾種模式和效果,簡單說明一下

                   Src和Dst分別是一張矩形和原型圖片,當我們設定不同的模式,顯示的效果就如上圖所示。關於Xfermode這裡不過多闡述,免得把大家繞暈了,我們這裡只需要關注其中的SrcIn模式,可以看到這個模式取的是兩張圖片的交集部分。這就好辦了,我們通常拿到img圖片都是矩形,我們可以利用canvas畫一個圓,然後利用SrcIn屬性,取img和圓的交集,那麼圓角ImageView是不是就輕易實現了呢?

                   這裡先理一下思路,1、自定義兩個屬性來設定圓角的弧度,以及當前是否畫純圓。2、設定Xfermode屬性為SrcIn 。就這簡單兩步圓角ImageView就實現了,接下來直接上程式碼。



import wu.han.himan_library.R;
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.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * 
 * @author Mr.Himan
 * @version 1.0<br>
 *          2015年12月16日 09:28:25<br>
 *          圖片圓角實現
 * 
 */
public class CustomImageView extends ImageView {
	private Paint paint;
	private Paint paintBorder;
	private Bitmap mSrcBitmap;
	/**
	 * 圓角的弧度
	 */
	private float mRadius;
	private boolean mIsCircle;

	public CustomImageView(final Context context) {
		this(context, null);
	}

	public CustomImageView(Context context, AttributeSet attrs) {
		this(context, attrs, R.attr.customImageViewStyle);
	}

	public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		TypedArray ta = context.obtainStyledAttributes(attrs,
				R.styleable.CustomImageView, defStyle, 0);
		mRadius = ta.getDimension(R.styleable.CustomImageView_radius, 0);
		mIsCircle = ta.getBoolean(R.styleable.CustomImageView_circle, false);
		int srcResource = attrs.getAttributeResourceValue(
				"http://schemas.android.com/apk/res/android", "src", 0);
		if (srcResource != 0)
			mSrcBitmap = BitmapFactory.decodeResource(getResources(),
					srcResource);
		ta.recycle();
		paint = new Paint();
		paint.setAntiAlias(true);
		paintBorder = new Paint();
		paintBorder.setAntiAlias(true);
	}

	@Override
	public void onDraw(Canvas canvas) {
		int width = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
		int height = canvas.getHeight() - getPaddingTop() - getPaddingBottom();
		Bitmap image = drawableToBitmap(getDrawable());
		if (mIsCircle) {
			Bitmap reSizeImage = reSizeImageC(image, width, height);
			canvas.drawBitmap(createCircleImage(reSizeImage, width, height),
					getPaddingLeft(), getPaddingTop(), null);

		} else {

			Bitmap reSizeImage = reSizeImage(image, width, height);
			canvas.drawBitmap(createRoundImage(reSizeImage, width, height),
					getPaddingLeft(), getPaddingTop(), null);
		}
	}

	/**
	 * 畫圓角
	 * 
	 * @param source
	 * @param width
	 * @param height
	 * @return
	 */
	private Bitmap createRoundImage(Bitmap source, int width, int height) {
		Paint paint = new Paint();
		paint.setAntiAlias(true);
		Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
		Canvas canvas = new Canvas(target);
		RectF rect = new RectF(0, 0, width, height);
		canvas.drawRoundRect(rect, mRadius, mRadius, paint);
		// 核心程式碼取兩個圖片的交集部分
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		canvas.drawBitmap(source, 0, 0, paint);
		return target;
	}

	/**
	 * 畫圓
	 * 
	 * @param source
	 * @param width
	 * @param height
	 * @return
	 */
	private Bitmap createCircleImage(Bitmap source, int width, int height) {

		Paint paint = new Paint();
		paint.setAntiAlias(true);
		Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
		Canvas canvas = new Canvas(target);
		canvas.drawCircle(width / 2, height / 2, Math.min(width, height) / 2,
				paint);
		// 核心程式碼取兩個圖片的交集部分
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		canvas.drawBitmap(source, (width - source.getWidth()) / 2,
				(height - source.getHeight()) / 2, paint);
		return target;

	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int width = MeasureSpec.getSize(widthMeasureSpec);
		int height = MeasureSpec.getSize(heightMeasureSpec);
		setMeasuredDimension(width, height);
	}

	/**
	 * drawable轉bitmap
	 * 
	 * @param drawable
	 * @return
	 */
	private Bitmap drawableToBitmap(Drawable drawable) {
		if (drawable == null) {
			if (mSrcBitmap != null) {
				return mSrcBitmap;
			} else {
				return null;
			}
		} else if (drawable instanceof BitmapDrawable) {
			return ((BitmapDrawable) drawable).getBitmap();
		}
		Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
				drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
		drawable.draw(canvas);
		return bitmap;
	}

	/**
	 * 重設Bitmap的寬高
	 * 
	 * @param bitmap
	 * @param newWidth
	 * @param newHeight
	 * @return
	 */
	private Bitmap reSizeImage(Bitmap bitmap, int newWidth, int newHeight) {
		int width = bitmap.getWidth();
		int height = bitmap.getHeight();
		// 計算出縮放比
		float scaleWidth = ((float) newWidth) / width;
		float scaleHeight = ((float) newHeight) / height;
		// 矩陣縮放bitmap
		Matrix matrix = new Matrix();

		matrix.postScale(scaleWidth, scaleHeight);
		return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
	}

	/**
	 * 重設Bitmap的寬高
	 * 
	 * @param bitmap
	 * @param newWidth
	 * @param newHeight
	 * @return
	 */
	private Bitmap reSizeImageC(Bitmap bitmap, int newWidth, int newHeight) {
		int width = bitmap.getWidth();
		int height = bitmap.getHeight();
		int x = (newWidth - width) / 2;
		int y = (newHeight - height) / 2;
		if (x > 0 && y > 0) {
			return Bitmap.createBitmap(bitmap, 0, 0, width, height, null, true);
		}

		float scale = 1;

		if (width > height) {
			// 按照寬度進行等比縮放
			scale = ((float) newWidth) / width;

		} else {
			// 按照高度進行等比縮放
			// 計算出縮放比
			scale = ((float) newHeight) / height;
		}
		Matrix matrix = new Matrix();
		matrix.postScale(scale, scale);
		return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
	}
}
attr.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="Theme">
        <attr name="customImageViewStyle" format="reference" />
    </declare-styleable>
    <!-- 自定義圓角ImageView -->
    <declare-styleable name="CustomImageView">
        <attr name="circle" format="boolean" />
        <attr name="radius" format="dimension" />
    </declare-styleable>

</resources>

到這裡圓角ImageView就實現了,程式碼比較簡單,同樣的我們可以根據Xfermode設定不痛的模式,來實現不同的效果。需要注意的是,在上面程式碼中我做了圖片的壓縮和縮放操作,當我們有時在載入網路圖片的時候,圖片寬高往往是不確定的,所以這裡的壓縮和縮放處理,需要大家根據自己的業務需求進行相應的改動

相關推薦

Android定義圓角ImageView 支援網路圖片

         先看下效果圖                        我們再來看一張CSDN的圓角圖片                           從佈局可以看出csdn app 的頭像也是圓角的Image,但可以看到,有明顯的毛刺感,不知道是csdn

android 定義圓角ImageView以及鋸齒的處理

看到很多人開發過程中要使用圓角圖片時,解決方法有: 1.重新繪製一張圖片 2.通過佈局來配置 3.通過重寫View來實現 其中1,2在這裡就不講了,重點講講方法三的實現。實現一:通過擷取畫布一個圓形區域與圖片的相交部分進行繪製,缺點:鋸齒明顯,設定Paint,Canvas抗

Android定義圓角ImageView

我們經常看到一些app中可以顯示圓角圖片,比如qq的聯絡人圖示等等,實現圓角圖片一種辦法是直接使用圓角圖片資源,當然如果沒有圓角圖片資源,我們也可以自己通過程式實現的,下面介紹一個自定義圓角ImageView的方法: package com.yulongfei.imagev

Android定義圓角矩形ImageView支援Glide載入圖片及顏色填充

前言:  之前用到圓角的情況大都是自定義一個shape背景drawable及用到v7包下的CardView包裹View實現圓角矩形效果,還有就是在使用者圓形頭像的時候需要使用到圓角矩形(圓形可以看做是特殊的圓角矩形),諸如Button,Editext,Text

Android定義圓角圓形圖片

說起Android裡面的自定義圓角圓形圖片,已經算是老生常談的話題了,之前一直使用別人的,最近使用的時候發現自己居然沒有一個這樣屬於自己的工具庫,實在遺憾,畢竟還是自己的東西用起來最順手,所以就打造了一個,先來看看效果: 怎麼樣,還不錯吧~支援各種圖案

Android自己定義圓角ImageView

play setfill recycle fig wid art app util clear 我們常常看到一些app中能夠顯示圓角圖片。比方qq的聯系人圖標等等,實現圓角圖片一種辦法是直接使用圓角圖片資源,當然假設沒有圓角圖片資源。我們也能夠自己通過程序實現的,以下介

Android定義控制元件之區域性圖片放大鏡--BiggerView

零、前言: 本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法,你也將對onMesure有更深的認識 2.關於bitmap的簡單處理,及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡),前者為後者作為鋪墊。 4.最後會

Android 定義 ViewPager 打造千變萬化的圖片切換效果

                記得第一次見到ViewPager這個控制元件,瞬間愛不釋手,做東西的主介面通通ViewPager,以及圖片切換也拋棄了ImageSwitch之類的,開始讓ViewPager來做。時間長了,ViewPager的切換效果覺得枯燥,形成了審美疲勞~~我們需要改變,今天教大家如何改變V

Android定義視訊播放器(網路/本地)

最近因公司專案要求需要寫一個播放器,自帶的又不太好用,也不太好看。自能自定義啦。查看了很多資料,都沒有完善的,還好得以為前輩的指點得以完成,感謝Yang。本篇裡面我有可能有些地方寫得不好(都附上了註釋)。希望各路大神指點,虛心受教。 先來個圖(原始碼在後面附上) 視訊列表裡面

Android 定義 HorizontalScrollView 打造再多圖片(控制元件)也不怕 OOM 的橫向滑動效果

自從Gallery被谷歌廢棄以後,Google推薦使用ViewPager和HorizontalScrollView來實現Gallery的效果。的確HorizontalScrollView可以實現Gallery的效果,但是HorizontalScrollView存在一個很大的問

Android-定義圓角Toast提示框

有時候我們根據需求需要自己指定toast的樣式,例如在介面中間顯示、圓角、帶圖片什麼的。 今天我給大家帶來的就是自定義圓角帶圖片顯示的toast提示框,先來看看最終效果圖:圖一為圓角帶圖片顯示的,圖二為圓角普通顯示。均為居中顯示 圖1:          圖2: 先來看看

Android 定義仿微信網路載入彈出框

額,沒有餓了麼的動畫效果好看,但是,特別適用,拿來就用! 看一下效果圖 圖片素材 好了,其實很簡單,就是一個自定義Dialog的控制元件而已 1. 自定義view的style樣式

定義圓角ImageView方案1,去鋸齒

import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas;

Android定義圓角對話方塊

自定義對話方塊MyDialog類繼承Dialog類: package com.example.jjy.myapplication; import android.app.Dialog; import android.content.Context; import andr

android定義圓角實線邊框,圓角虛線邊框,直實線,虛實線,半圓角邊框

先上圖。<img src="http://img.my.csdn.net/uploads/201510/05/1444048517_3752.png-thumb.jpg" width="1080" height="1920" style="font-family: A

Android 定義View ProgressBarHorizontal:橫向進度條、支援圓角、漸變、圖片

背景:因系統的ProgressBar設定圖片時,如果圖片不夠大,而在大解析度的手機上時會出現無法填充滿,所以自己寫一個,既修復該問題,又可方便拓展,所以拋磚引玉 功能介紹:橫向進度條,分為背景與封面兩層,封面與背景均支援圓角矩形、漸變、圖片。 效果圖: (上面仿微博

Android 定義ImageView支援圓角和直角

使用自定義ImageView,實現圓角功能 1.自定義屬性attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundC

Android開發之定義圓角矩形圖片ImageView

android中的ImageView只能顯示矩形的圖片,這樣一來不能滿足我們其他的需求,比如要顯示圓角矩形的圖片,這個時候,我們就需要自定義ImageView了,其原理就是首先獲取到圖片的Bitmap,然後進行裁剪對應的圓角矩形的bitmap,然後在onDraw()進行繪製

android定義imageview實現圓角圖片

自定義圖片的屬性,對圖片進行圓角切割 實現效果圖: (1)在activity_main.xml檔案佈局,非常簡單 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

Android定義Movie播放網路gif圖片

之前看到過一些帖子播放gif圖片的,大概看過兩種版本,一種是使用把gif解碼,分為一幀一幀的播放,另一種就是直接播放gif圖片。可以使用Movie類來播放,一種是使用框架,一個是android-gifview,另一個是android-gif-drawable,前者載入小的gif圖片沒問題