-
百學須先立志—學前須知:
在我們平時加載圖片(不管是下載還是加載本地圖片…..)的時候,我們經常會遇到這樣一個需求,那就是當圖片正在加載時應該呈現正在加載時的圖像,當圖片加載失敗時應該呈現圖片加載時的圖像,當我們重新加載這張圖片時,應該呈現重試時圖像,直到這張圖片加載完成。這些繁瑣並且重複的如果得不到簡化的話,那將是一個開發人員的噩夢,現在好了,我們用 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"/>
-
常見問題:
初次使用,我們就先簡單書寫我們的 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>
代碼分析:
MainActivity 實現代碼:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
簡單的書寫完佈局和實現代碼之後我們來運行一下。
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
運行報錯了!怎麼回事呢?這裏啊,是因爲我們沒有在應用調用 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);
}
}
再運行就沒有錯誤發生了。
-
佔位圖—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>
代碼說明:
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) findViewById(R.id.main_sdv);
Uri imageUri = Uri.parse("http://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) findViewById(R.id.main_sdv);
Uri imageUri = Uri.parse("http://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) findViewById(R.id.main_sdv);
Uri imageUri = Uri.parse("http://my.csdn.net/uploads/avatar_y1scp.jpg");
simpleDraweeView.setImageURI(imageUri);
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(imageUri)
.setTapToRetryEnabled(true)
.setOldController(simpleDraweeView.getController())
.build();
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>
代碼說明:
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