Fresco簡單的使用—SimpleDraweeView

• 百學須先立志—學前須知：

  在我們平時加載圖片(不管是下載還是加載本地圖片…..)的時候，我們經常會遇到這樣一個需求，那就是當圖片正在加載時應該呈現正在加載時的圖像，當圖片加載失敗時應該呈現圖片加載時的圖像，當我們重新加載這張圖片時，應該呈現重試時圖像，直到這張圖片加載完成。這些繁瑣并且重復的如果得不到簡化的話，那將是一個開發人員的噩夢，現在好了，我們用?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到項目工程：

  第三步服務及權限：

  <!-- 訪問網絡的權限 --> <uses-permission android:name="android.permission.INTERNET"/>
  • 1
  • 2
  • 1
  • 2

• 常見問題：

  初次使用，我們就先簡單書寫我們的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_adv" android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

  代碼分析：

  MainActivity?實現代碼：

  public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

  簡單的書寫完布局和實現代碼之后我們來運行一下。

  java.lang.RuntimeException: Unable to start activity ComponentInfo{scp.com.frescodemo/scp.com.frescodemo.MainActivity}: android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2264) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2313) at android.app.ActivityThread.access$1100(ActivityThread.java:141) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1238) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:136) at android.app.ActivityThread.main(ActivityThread.java:5336) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:515) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:871) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:687) at dalvik.system.NativeStart.main(Native Method) Caused by: android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

  運行報錯了！怎么回事呢？這里啊，是因為我們沒有在應用調用 setContentView() 之前進行初始化Fresco造成的；解決辦法：

  修改我們的?MainActivity?里代碼：

  public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Fresco.initialize(this); setContentView(R.layout.activity_main); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

  再運行就沒有錯誤發生了。

• 占位圖—placeholderImage：

  在此之前我們需要一張占位圖?icon_placeholder.png?大家右鍵另存為即可：

  修改我們的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_adv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

  代碼說明：

  MainActivity?無需修改，運行一下：

• 正在加載圖—progressBarImage：

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

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

  代碼說明：

  更改我們的?MainActivity?里代碼：

  public class MainActivity extends AppCompatActivity { private SimpleDraweeView simpleDraweeView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Fresco.initialize(this); setContentView(R.layout.activity_main); initView(); } private void initView() { //創建SimpleDraweeView對象 simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv); //創建將要下載的圖片的URI Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar/4/E/8/1_y1scp.jpg"); //開始下載 simpleDraweeView.setImageURI(imageUri); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

  代碼分析：

  運行效果圖：

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

• 失敗圖—failureImage：

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

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

  代碼分析：

  修改我們的?MainActivity?里代碼：

  public class MainActivity extends AppCompatActivity { private SimpleDraweeView simpleDraweeView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Fresco.initialize(this); setContentView(R.layout.activity_main); initView(); } private void initView() { //創建SimpleDraweeView對象 simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv); //創建將要下載的圖片的URI Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar_y1scp.jpg"); //開始下載 simpleDraweeView.setImageURI(imageUri); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

  代碼說明：

  運行效果：

• 重試圖—retryImage：

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

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

  代碼分析：

  修改我們的?MainActivity?里代碼：

  public class MainActivity extends AppCompatActivity { private SimpleDraweeView simpleDraweeView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Fresco.initialize(this); setContentView(R.layout.activity_main); initView(); } private void initView() { //創建SimpleDraweeView對象 simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv); //創建將要下載的圖片的URI Uri imageUri = Uri.parse("https://img-my.csdn.net/uploads/avatar_y1scp.jpg"); //開始下載 simpleDraweeView.setImageURI(imageUri); //創建DraweeController DraweeController controller = Fresco.newDraweeControllerBuilder() //加載的圖片URI地址 .setUri(imageUri) //設置點擊重試是否開啟 .setTapToRetryEnabled(true) //設置舊的Controller .setOldController(simpleDraweeView.getController()) //構建 .build(); //設置DraweeController simpleDraweeView.setController(controller); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

  代碼說明：

  運行效果：

  注意：

  重復加載4次還是沒有加載出來的時候才會顯示?failureImage(失敗圖)?的圖片

• 淡入淡出動畫—fadeDuration：

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

  代碼說明：

  MainActivity?中的代碼無需修改。

  運行效果：

  重試+進度圖+失敗圖進度圖+正確圖

• 背景圖—backgroundImage：

  這里呢，我們的背景圖采用的是一個系統所提供的顏色中的一種。

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

  代碼說明：

  MainActivity?中的代碼無需修改，運行效果：

• 疊加圖—overlayImage：

  這里呢，我們的背景圖采用的是一個系統所提供的顏色中的一種。

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:pressedStateOverlayImage="@android:color/holo_green_dark" fresco:overlayImage="@android:color/black" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

  代碼說明：

  MainActivity?中的代碼無需修改。

  運行效果：

  從運行效果來看，疊加圖在最上面，覆蓋了下面的圖。

• 圓形圖—roundAsCircle：

  一行代碼搞定圓形圖：設置roundAsCircle為true；

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:roundAsCircle="true" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

  代碼說明：

  MainActivity?中的代碼無需修改。

  運行效果：

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

• 圓角圖—roundedCornerRadius：

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:roundedCornerRadius="30dp" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

  代碼說明：

  MainActivity?中的代碼無需修改。

  運行效果：

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

  圓角屬性圓角屬性

  左上角是否為圓角fresco:roundTopLeft="false"	右上角是否為圓角fresco:roundTopRight="false"
  左下角是否為圓角fresco:roundBottomLeft="false"	右下角是否為圓角fresco:roundBottomRight="false"

  注意：

  當我們同時設置圖像顯示為圓形圖像和圓角圖像時，只會顯示為圓形圖像。

• 圓形圓角邊框寬度及顏色—roundingBorder：

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="focusCrop" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="focusCrop" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="focusCrop" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="focusCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:roundAsCircle="true" fresco:roundedCornerRadius="30dp" fresco:roundTopLeft="true" fresco:roundTopRight="true" fresco:roundBottomLeft="true" fresco:roundBottomRight="true" fresco:roundingBorderWidth="10dp" fresco:roundingBorderColor="@android:color/black" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

  代碼說明：

  MainActivity?中的代碼無需修改。

  運行效果(左邊顯示的是帶邊框的圓形圖像，右邊顯示的是帶邊框的圓角圖像)：

• 圓形或圓角圖像底下的疊加顏色—roundWithOverlayColor：

  修改我們剛剛書寫的?activity_main.xml?：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="focusCrop" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="focusCrop" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="focusCrop" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="focusCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:roundWithOverlayColor="@android:color/darker_gray" fresco:roundAsCircle="true" ></com.facebook.drawee.view.SimpleDraweeView> </RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

  代碼說明：

  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

頂

11

?踩

0

總結

以上是生活随笔為你收集整理的【转】Android图片加载神器之Fresco-加载图片基础[详细图解Fresco的使用]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。