佔位……到時回答。
好了,健身回來洗了個澡,目前12:40
圖片圓角實現,透過Canvas類中的drawRoundRect()方法:
這裡的引數:
#FormatImgID_3##FormatImgID_4#rect:
可見上圖rect傳入RectF作為引數(RectF中的“F”表示接受的值是Float)
RectF類包含一個矩形的四個單精度浮點座標。矩形透過上下左右4個邊的座標來表示一個矩形
這裡的left、top、right、bottom的值意思是:
left:是矩形距離左邊的X軸
top:是矩形距離上邊的Y軸
right:是矩形距離右邊的X軸
bottom:是矩形距離下邊的Y軸
rx、ry:
x軸方向的圓角半徑,y軸方向的圓角半徑。
paint:
繪製時所使用的畫筆。
現在drawRoundRect()大概瞭解了,簡單的例子:
效果:
大概原理就是這些,知道原理後看看如何應用到主流圖片載入庫中:
目前主流的圖片載入庫主要有Picasso,Glide,Fresco,Android-Universal-Image-Loader等;
以
Picasso
為例:
使用:
#FormatImgID_13##FormatImgID_14#Glide和Picasso簡直一曲同工。這裡不再敘述:
#FormatImgID_15##FormatImgID_16#最後
效果圖:
最後一點補充:
有評論說,
我只想下面兩個角是圓角,上面保持不變
,
好的滿足你,方法如下:
傳入的引數和上圖一樣:
使用和上面一樣,傳個定義好的列舉型別
效果圖:
最後的最後再補充一點:
有人私信問我,為什麼不使用Fresco呢?
沒錯,Fresco很強大比Picasso、Glide都要強大,是Facebook的“黑科技”,但它的“侵入”感比較強,使用它,你必須將ImageView替換成com。facebook。drawee。view。SimpleDraweeView,如果專案工程剛開始搭建,並且專案中需要載入大量的圖片,那Fresco是個不錯的選擇,但是如果專案工程已經迭代了好幾個版本,佈局中都替換成它還真是一個麻煩的事,所以我並不使用Fresco。
但Picasso、Glide就沒有這個問題,它們使用的還是ImageView控制元件,所以我完全可以寫個ImageLoader工具類,所有的配置都寫在這裡,像下面這樣:
使用的時候,像這樣:
所有的地方都是統一呼叫的
ImageLoader.getInstance().displayImage(Context,ImageUrl,ImageView);
這樣其他地方並不修改,不管換什麼圖片載入框架,只要改
ImageLoader
裡的實現就可以了
……
最後的最後的最後
再補充一點
:
(這幾個載入圖片的庫都寫了,再問我可自殺了)
有人問,剛開始寫專案不想寫上面的方法,還有沒有簡單的方式去實現,有!大名鼎鼎的
Fresco
:
GitHub - facebook/fresco: An Android library for managing images and the memory they use。
首先初始化
佈局檔案中配置
注意,SimpleDraweeView一定要確定具體的
寬
和
高
;
roundedCornerRadius就是設定圓角的
更多設定:
具體意思去Github的專案主頁看中文文件
使用setImageURI()載入圖片地址
效果圖:
/**
* 矩形將圖片圓化
*
* @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格式的。
沒大家說的那麼麻煩,已經有許多實現的類庫,沒必要自己造輪子了。
比如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。
除了圓角之外,Fresco還支援圓形、佔位符、載入失敗時的佔位圖、點選重新載入、顯示一個進度條、背景、疊加圖、按壓狀態下的疊加圖、漸進式……(太多了,基本上只要你能想到的,它都…)。
除此功能豐富之外,關鍵是效能還超牛逼,我最初開始使用Fresco的原因就是為了解決圖片太多造成的介面卡頓~
恁這還等啥嘞!趕緊用起來啊!
最簡單的方法是在控制元件的onDraw方法裡用path截出一個圓角矩形,然後在再調super。ondraw,這樣就形成了一個圓角的控制元件,而且可以是任意控制元件
直接使用v4包裡的