android圖片圓角怎麼簡單高效實現?布拉德皮蛋兒2016-06-16 13:59:34

佔位……到時回答。

好了,健身回來洗了個澡,目前12:40

圖片圓角實現,透過Canvas類中的drawRoundRect()方法:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

這裡的引數:

#FormatImgID_3##FormatImgID_4#rect:

可見上圖rect傳入RectF作為引數(RectF中的“F”表示接受的值是Float)

RectF類包含一個矩形的四個單精度浮點座標。矩形透過上下左右4個邊的座標來表示一個矩形

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

這裡的left、top、right、bottom的值意思是:

left:是矩形距離左邊的X軸

top:是矩形距離上邊的Y軸

right:是矩形距離右邊的X軸

bottom:是矩形距離下邊的Y軸

rx、ry:

x軸方向的圓角半徑,y軸方向的圓角半徑。

paint:

繪製時所使用的畫筆。

現在drawRoundRect()大概瞭解了,簡單的例子:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

效果:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

大概原理就是這些,知道原理後看看如何應用到主流圖片載入庫中:

目前主流的圖片載入庫主要有Picasso,Glide,Fresco,Android-Universal-Image-Loader等;

Picasso

為例:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

使用:

#FormatImgID_13##FormatImgID_14#Glide和Picasso簡直一曲同工。這裡不再敘述:

#FormatImgID_15##FormatImgID_16#最後

效果圖:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

最後一點補充:

有評論說,

我只想下面兩個角是圓角,上面保持不變

好的滿足你,方法如下:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

傳入的引數和上圖一樣:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

使用和上面一樣,傳個定義好的列舉型別

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

效果圖:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

最後的最後再補充一點:

有人私信問我,為什麼不使用Fresco呢?

沒錯,Fresco很強大比Picasso、Glide都要強大,是Facebook的“黑科技”,但它的“侵入”感比較強,使用它,你必須將ImageView替換成com。facebook。drawee。view。SimpleDraweeView,如果專案工程剛開始搭建,並且專案中需要載入大量的圖片,那Fresco是個不錯的選擇,但是如果專案工程已經迭代了好幾個版本,佈局中都替換成它還真是一個麻煩的事,所以我並不使用Fresco。

但Picasso、Glide就沒有這個問題,它們使用的還是ImageView控制元件,所以我完全可以寫個ImageLoader工具類,所有的配置都寫在這裡,像下面這樣:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

使用的時候,像這樣:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

所有的地方都是統一呼叫的

ImageLoader.getInstance().displayImage(Context,ImageUrl,ImageView);

這樣其他地方並不修改,不管換什麼圖片載入框架,只要改

ImageLoader

裡的實現就可以了

……

最後的最後的最後

再補充一點

(這幾個載入圖片的庫都寫了,再問我可自殺了)

有人問,剛開始寫專案不想寫上面的方法,還有沒有簡單的方式去實現,有!大名鼎鼎的

Fresco

GitHub - facebook/fresco: An Android library for managing images and the memory they use。

首先初始化

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

佈局檔案中配置

注意,SimpleDraweeView一定要確定具體的

roundedCornerRadius就是設定圓角的

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

更多設定:

具體意思去Github的專案主頁看中文文件

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

使用setImageURI()載入圖片地址

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

效果圖:

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?知乎使用者2016-06-18 10:52:25

/**

* 矩形將圖片圓化

*

* @param bitmap

* 傳入Bitmap物件

* @return

*/

public

Bitmap

toRoundBitmap

Bitmap

bitmap

{

int

width

=

bitmap

getWidth

();

int

height

=

bitmap

getHeight

();

float

roundPx

float

left

top

right

bottom

dst_left

dst_top

dst_right

dst_bottom

if

width

<=

height

{

roundPx

=

width

/

2

left

=

0

top

=

0

right

=

width

bottom

=

width

height

=

width

dst_left

=

0

dst_top

=

0

dst_right

=

width

dst_bottom

=

width

}

else

{

roundPx

=

height

/

2

float

clip

=

width

-

height

/

2

left

=

clip

right

=

width

-

clip

top

=

0

bottom

=

height

width

=

height

dst_left

=

0

dst_top

=

0

dst_right

=

height

dst_bottom

=

height

}

Bitmap

output

=

Bitmap

createBitmap

width

height

Config

ARGB_8888

);

Canvas

canvas

=

new

Canvas

output

);

final

int

color

=

0xff424242

final

Paint

paint

=

new

Paint

();

final

Rect

src

=

new

Rect

((

int

left

int

top

int

right

int

bottom

);

final

Rect

dst

=

new

Rect

((

int

dst_left

int

dst_top

int

dst_right

int

dst_bottom

);

final

RectF

rectF

=

new

RectF

dst

);

paint

setAntiAlias

true

);

// 設定畫筆無鋸齒

canvas

drawARGB

0

0

0

0

);

// 填充整個Canvas

paint

setColor

color

);

// 以下有兩種方法畫圓,drawRounRect和drawCircle

// canvas。drawRoundRect(rectF, roundPx, roundPx, paint);//

// 畫圓角矩形,第一個引數為圖形顯示區域,第二個引數和第三個引數分別是水平圓角半徑和垂直圓角半徑。

canvas

drawCircle

roundPx

roundPx

roundPx

paint

);

paint

setXfermode

new

PorterDuffXfermode

Mode

SRC_IN

));

// 設定兩張圖片相交時的模式,參考http://trylovecatch。iteye。com/blog/1189452

canvas

drawBitmap

bitmap

src

dst

paint

);

// 以Mode。SRC_IN模式合併bitmap和已經draw了的Circle

return

output

}

/**

* 矩形將圖片的四角圓化

*

* @param bitmap

* 傳入Bitmap物件

* @return

*/

public

static

Bitmap

getRoundedCornerBitmap

Bitmap

bitmap

{

Bitmap

output

=

Bitmap

createBitmap

bitmap

getWidth

(),

bitmap

getHeight

(),

Config

ARGB_8888

);

// 得到畫布

Canvas

canvas

=

new

Canvas

output

);

// 將畫布的四角圓化

final

int

color

=

Color

RED

final

Paint

paint

=

new

Paint

();

// 得到與影象相同大小的區域 由構造的四個值決定區域的位置以及大小

final

Rect

rect

=

new

Rect

0

0

bitmap

getWidth

(),

bitmap

getHeight

());

final

RectF

rectF

=

new

RectF

rect

);

// 值越大角度越明顯

final

float

roundPx

=

30

paint

setAntiAlias

true

);

canvas

drawARGB

0

0

0

0

);

paint

setColor

color

);

// drawRoundRect的第2,3個引數一樣則畫的是正圓的一角,如果數值不同則是橢圓的一角

canvas

drawRoundRect

rectF

roundPx

roundPx

paint

);

paint

setXfermode

new

PorterDuffXfermode

Mode

SRC_IN

));

canvas

drawBitmap

bitmap

rect

rect

paint

);

return

output

}

最重要的一點圖片一定是png格式的。

android圖片圓角怎麼簡單高效實現?騰兒飛(張新強)2016-06-18 13:28:05

沒大家說的那麼麻煩,已經有許多實現的類庫,沒必要自己造輪子了。

比如FaceBook出品的Fresco(中文文件: Fresco | 引入Fresco )

第一步:引入支援

dependencies {

compile ‘com。facebook。fresco:fresco:0。9。0+’

}

第二步:使用SimpleDraweeView代替ImageView

<?xml version=“1。0” encoding=“utf-8”?>

xmlns:app=“http://schemas。android。com/apk/res-auto”

android:layout_width=“wrap_content”

android:layout_height=“match_parent”>>

android:id=“@+id/iamgeView”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:roundedCornerRadius=“2dp”/>

注意其中的:

app:roundedCornerRadius=“2dp”

這樣你就得到了一個2dp圓角的ImageView。

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

除了圓角之外,Fresco還支援圓形、佔位符、載入失敗時的佔位圖、點選重新載入、顯示一個進度條、背景、疊加圖、按壓狀態下的疊加圖、漸進式……(太多了,基本上只要你能想到的,它都…)。

除此功能豐富之外,關鍵是效能還超牛逼,我最初開始使用Fresco的原因就是為了解決圖片太多造成的介面卡頓~

恁這還等啥嘞!趕緊用起來啊!

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?知乎使用者2016-06-18 20:52:12

最簡單的方法是在控制元件的onDraw方法裡用path截出一個圓角矩形,然後在再調super。ondraw,這樣就形成了一個圓角的控制元件,而且可以是任意控制元件

android圖片圓角怎麼簡單高效實現?知乎使用者2016-06-26 04:38:53

直接使用v4包裡的

android圖片圓角怎麼簡單高效實現?

android圖片圓角怎麼簡單高效實現?