Fresco是一個第三方庫,github官網地址:https://github.com/facebook/fresco
-
百學須先立志—學前須知:
在我們平時加載圖片(不管是下載還是加載本地圖片…..)的時候,我們經常會遇到這樣一個需求,那就是當圖片正在加載時應該呈現正在加載時的圖像,當圖片加載失敗時應該呈現圖片加載時的圖像,當我們重新加載這張圖片時,應該呈現重試時圖像,直到這張圖片加載完成。這些繁瑣並且重復的如果得不到簡化的話,那將是一個開發人員的噩夢,現在好了,我們用 Facebook 出品的一個強大的圖片加載組件 Fresco 幾行代碼就可以搞定以上問題了。
-
盡信書,不如無書—能學到什么?
1、SimpleDraweeView最基本的使用
2、SimpleDraweeView的圓形圖
3、SimpleDraweeView的圓角圖
4、SimpleDraweeView的縮放類型 -
工欲善其事必先利其器—下載Fresco並導入到項目
Fresco中文說明:http://www.fresco-cn.org/
Fresco項目GitHub地址:https://github.com/facebook/fresco
第一步進入 Fresco項目GitHub地址 :
-
第二步添加Fresco到項目工程:
第三步服務及權限:
-
常見問題:
初次使用,我們就先簡單書寫我們的 activity_main.xml :
代碼分析:
MainActivity 實現代碼:
簡單的書寫完布局和實現代碼之后我們來運行一下。
運行報錯了!怎么回事呢?這里啊,是因為我們沒有在應用調用 setContentView() 之前進行初始化Fresco造成的;解決辦法:
修改我們的 MainActivity 里代碼:
再運行就沒有錯誤發生了。
-
占位圖—placeholderImage:
在此之前我們需要一張占位圖 icon_placeholder.png 大家右鍵另存為即可:
修改我們的 activity_main.xml :
代碼說明:
MainActivity 無需修改,運行一下:
-
正在加載圖—progressBarImage:
在此之前我們需要一張正在加載圖 icon_progress_bar.png 大家右鍵另存為即可:
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
更改我們的 MainActivity 里代碼:
代碼分析:
運行效果圖:
正在加載圖本身是不可以轉的,但是呢,加上了
fresco:progressBarAutoRotateInterval="5000"
屬性,那么它就可以旋轉了;可以看到,正在加載圖一閃而過,這是因為我們加載的圖片很小,網絡也很好。 -
失敗圖—failureImage:
在此之前我們需要一張正在加載圖 icon_failure.png 大家右鍵另存為即可:
修改我們剛剛書寫的 activity_main.xml :
代碼分析:
修改我們的 MainActivity 里代碼:
代碼說明:
運行效果:
-
重試圖—retryImage:
在此之前我們需要一張正在加載圖 icon_retry.png 大家右鍵另存為即可:
修改我們剛剛書寫的 activity_main.xml :
代碼分析:
修改我們的 MainActivity 里代碼:
代碼說明:
運行效果:
注意:
重復加載4次還是沒有加載出來的時候才會顯示 failureImage(失敗圖) 的圖片
-
淡入淡出動畫—fadeDuration:
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改。
運行效果:
重試+進度圖+失敗圖 進度圖+正確圖 -
背景圖—backgroundImage:
這里呢,我們的背景圖采用的是一個系統所提供的顏色中的一種。
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改,運行效果:
-
疊加圖—overlayImage:
這里呢,我們的背景圖采用的是一個系統所提供的顏色中的一種。
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改。
運行效果:
從運行效果來看,疊加圖在最上面,覆蓋了下面的圖。
-
圓形圖—roundAsCircle:
一行代碼搞定圓形圖:設置roundAsCircle為true;
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改。
運行效果:
可以看到,從圖片開始加載一直到圖片下載完畢,整個圖像都是圓形的。
-
圓角圖—roundedCornerRadius:
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改。
運行效果:
可以看到,從圖片開始加載一直到圖片下載完畢,整個圖像都是圓角的。
圓角屬性 圓角屬性 左上角是否為圓角 fresco:roundTopLeft="false"
右上角是否為圓角 fresco:roundTopRight="false"
左下角是否為圓角 fresco:roundBottomLeft="false"
右下角是否為圓角 fresco:roundBottomRight="false"
注意:
當我們同時設置圖像顯示為圓形圖像和圓角圖像時,只會顯示為圓形圖像。
-
圓形圓角邊框寬度及顏色—roundingBorder:
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改。
運行效果(左邊顯示的是帶邊框的圓形圖像,右邊顯示的是帶邊框的圓角圖像):
-
圓形或圓角圖像底下的疊加顏色—roundWithOverlayColor:
修改我們剛剛書寫的 activity_main.xml :
代碼說明:
MainActivity 中的代碼無需修改。
運行效果(左邊為圓形效果,右邊為圓角效果):
-
縮放類型—ScaleType:
類型 描述 center 居中,無縮放 centerCrop 保持寬高比縮小或放大,使得兩邊都大於或等於顯示邊界。居中顯示。 focusCrop 同centerCrop, 但居中點不是中點,而是指定的某個點 centerInside 使兩邊都在顯示邊界內,居中顯示。如果圖尺寸大於顯示邊界,則保持長寬比縮小圖片。 fitCenter 保持寬高比,縮小或者放大,使得圖片完全顯示在顯示邊界內。居中顯示 fitStart 同上。但不居中,和顯示邊界左上對齊 fitEnd 同fitCenter, 但不居中,和顯示邊界右下對齊 fitXY 不保存寬高比,填充滿顯示邊界 none 如要使用tile mode顯示, 需要設置為none 推薦使用:focusCrop 類型 Fresco中文說明對這一點也有詳情的說明: 縮放
-
總結:
XML屬性 意義 fadeDuration 淡入淡出動畫持續時間(單位:毫秒ms) actualImageScaleType 實際圖像的縮放類型 placeholderImage 占位圖 placeholderImageScaleType 占位圖的縮放類型 progressBarImage 進度圖 progressBarImageScaleType 進度圖的縮放類型 progressBarAutoRotateInterval 進度圖自動旋轉間隔時間(單位:毫秒ms) failureImage 失敗圖 failureImageScaleType 失敗圖的縮放類型 retryImage 重試圖 retryImageScaleType 重試圖的縮放類型 backgroundImage 背景圖 overlayImage 疊加圖 pressedStateOverlayImage 按壓狀態下所顯示的疊加圖 roundAsCircle 設置為圓形圖 roundedCornerRadius 圓角半徑 roundTopLeft 左上角是否為圓角 roundTopRight 右上角是否為圓角 roundBottomLeft 左下角是否為圓角 roundBottomRight 右下角是否為圓角 roundingBorderWidth 圓形或者圓角圖邊框的寬度 roundingBorderColor 圓形或者圓角圖邊框的顏色 roundWithOverlayColor 圓形或者圓角圖底下的疊加顏色(只能設置顏色) viewAspectRatio 控件縱橫比 -
GitHub:
本教程最終項目GitHub地址:https://github.com/scp504677840/Fresco