Fresco簡單的使用—SimpleDraweeView


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 大家右鍵另存為即可:

      icon_placeholder

      修改我們的 activity_main.xml :

      代碼說明:

      占位符

      MainActivity 無需修改,運行一下:

      占位符

    •  正在加載圖—progressBarImage:

      在此之前我們需要一張正在加載圖 icon_progress_bar.png 大家右鍵另存為即可:

      正在加載圖

      修改我們剛剛書寫的 activity_main.xml :

      代碼說明:

      正在加載圖

      更改我們的 MainActivity 里代碼:

      代碼分析:

      正在加載圖

      運行效果圖:

      正在加載圖

      正在加載圖本身是不可以轉的,但是呢,加上了 fresco:progressBarAutoRotateInterval="5000" 屬性,那么它就可以旋轉了;可以看到,正在加載圖一閃而過,這是因為我們加載的圖片很小,網絡也很好。

    • 失敗圖—failureImage:

      在此之前我們需要一張正在加載圖 icon_failure.png 大家右鍵另存為即可:

      icon_failure

      修改我們剛剛書寫的 activity_main.xml :

      代碼分析:

      失敗圖代碼分析

      修改我們的 MainActivity 里代碼:

      代碼說明:

      錯誤的網絡圖片地址

      運行效果:

      failure

    • 重試圖—retryImage:

      在此之前我們需要一張正在加載圖 icon_retry.png 大家右鍵另存為即可:

      icon_retry

      修改我們剛剛書寫的 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 中的代碼無需修改。

      運行效果:

      circle

      可以看到,從圖片開始加載一直到圖片下載完畢,整個圖像都是圓形的。

    •  圓角圖—roundedCornerRadius:

      修改我們剛剛書寫的 activity_main.xml :

      代碼說明:

      圓角

      MainActivity 中的代碼無需修改。

      運行效果:

      圓角運行圖

      可以看到,從圖片開始加載一直到圖片下載完畢,整個圖像都是圓角的。

      圓角屬性 圓角屬性
      左上角是否為圓角fresco:roundTopLeft="false" 右上角是否為圓角fresco:roundTopRight="false"
      topLeft topRight
      bottomLeft bottomRight
      左下角是否為圓角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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM