Android图片加载神器之Fresco-圆形圆角二合一教程[Java代码实现圆形圆角效果]

最新推荐文章于 2021-05-29 01:43:45 发布

tiananma0607

最新推荐文章于 2021-05-29 01:43:45 发布

阅读量675

点赞数

分类专栏： android开源框架

android开源框架专栏收录该内容

11 篇文章 1 订阅

订阅专栏

RoundingParams

百学须先立志—学前须知：

之前我们学会了一些基本的效果设置，对于常见的圆形圆角图没有涉及，那么今天我们就一起来看看，如何设置圆形圆角图。
尽信书，不如无书—能学到什么？

1、DraweeHierarchy
2、SettableDraweeHierarchy
3、GenericDraweeHierarchy
4、GenericDraweeHierarchyBuilder
5、RoundingParams
6、RoundingParams.RoundingMethod
7、圆形圆角图
工欲善其事必先利其器—了解Fresco

Fresco官方中文说明：http://www.fresco-cn.org/

Fresco项目官方GitHub地址：https://github.com/facebook/fresco

上一篇Fresco效果设置：Fresco-更灵活的设置加载特效[Java代码实现XML效果]

简单基础：

首先创建一个 activity_main.xml ：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/main_sdv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true" />

</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

代码分析：

XML

相信大家对这个布局已经是很熟悉了，必须指定 SimpleDraweeView 控件的大小，否则图像不能正常加载；那么接下来我们来书写我们的MainActivity 里面的内容：

public class MainActivity extends AppCompatActivity {

    private SimpleDraweeView sdv;
    /**
     * 图片地址
     */
    private Uri imageUrl = Uri.parse("http://avatar.csdn.net/4/E/8/1_y1scp.jpg");

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //初始化Fresco
        Fresco.initialize(this);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        //构建Controller
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                //设置需要下载的图片地址
                .setUri(imageUrl)
                //设置点击重试是否开启
                .setTapToRetryEnabled(true)
                //构建
                .build();

        //设置Controller
        sdv.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
36
37
38
39
40
41
42
43
44
   
   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
36
37
38
39
40
41
42
43
44

代码分析：

main

最后，我们到 AndroidManifest 文件中添加访问网络的权限：

<!-- 访问网络权限 -->
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
   
   1
2
   
   1
2

代码分析：

网络权限

我们运行一下，看看效果：

第一次

圆形图—setRoundingParams：

设置圆形图只有一种方式，但它有两种方法：

限定符和类型	方法	说明
static RoundingParams	asCircle()	将图像设置成圆形
RoundingParams	setRoundAsCircle(boolean roundAsCircle)	是否将图像设置成圆形

那么接下来，我们依次使用这两种方法为图像设置成圆形，首先使用第一种方法，修改刚刚书写的 MainActivity 里面的代码：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {
        ......

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                .setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        ......
    }
}
   
   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

代码分析：

圆形1

运行一下，看看效果：

圆形1效果

那么可以看到第一种方法是完美运行的，接下来使用第二种方法，修改我们刚刚书写的 MainActivity：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {
        ......

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        rp.setRoundAsCircle(true);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        ......
    }
}
   
   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

代码分析：

圆形2

我们运行一下，看看效果：

圆形2效果

圆角图—setRoundingParams：

设置圆角图只有一种方式，但它有六种方法：

限定符和类型	方法	说明
static RoundingParams	fromCornersRadius(float radius)	设置圆角半径
static RoundingParams	fromCornersRadii(float[] radii)	分别设置左上角、右上角、左下角、右下角圆角半径
static RoundingParams	fromCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft)	分别设置左上角、右上角、左下角、右下角圆角半径
RoundingParams	setCornersRadius(float radius)	设置圆角半径
RoundingParams	setCornersRadii(float[] radii)	分别设置左上角、右上角、左下角、右下角圆角半径
RoundingParams	setCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft)	分别设置左上角、右上角、左下角、右下角圆角半径

那么接下来，我们依次使用这六种方法为图像设置成圆形，首先使用第一种方法，修改刚刚书写的 MainActivity 里面的代码：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        ......

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        //rp.setRoundAsCircle(true);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                //.setRoundingParams(rp)
                //设置圆角半径
                .setRoundingParams(RoundingParams.fromCornersRadius(20))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
   
   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

代码分析：

圆角1

运行一下，看看效果：

圆角1效果

接下来第二种方法，修改我们刚刚书写的 MainActivity：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        ......

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        //rp.setRoundAsCircle(true);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                //.setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                .setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
   
   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

代码分析：

圆角2

运行一下，看看效果：

圆角2效果

接下来我们一起来实现第三种方法，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        ......

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                //.setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                .setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
   
   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

代码分析：

圆角3

运行一下，看看效果：

圆角3效果

大家有没有发现我们之前三种方法使用的都是静态方法，那么接下来我们使用剩下的三个非静态方法，首先使用非静态方法第一个，修改我们刚刚书写的 MainActivity 代码：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        //rp.setRoundAsCircle(true);
        //设置圆角半径
        rp.setCornersRadius(20);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
   
   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
36
37
38
39

代码分析：

圆角4

运行一下，看看效果：

圆角4效果

和第一种设置圆角方法的效果一样，接下来我们使用非静态方法第二种，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        //rp.setRoundAsCircle(true);
        //设置圆角半径
        //rp.setCornersRadius(20);
        //分别设置左上角、右上角、左下角、右下角的圆角半径
        rp.setCornersRadii(20,25,30,35);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
40
41
   
   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
36
37
38
39
40
41

代码分析：

圆角5

运行一下，看看效果：

圆角5效果

和第二种设置圆角方法的效果一样，接下来我们使用非静态方法第三种，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        //rp.setRoundAsCircle(true);
        //设置圆角半径
        //rp.setCornersRadius(20);
        //分别设置左上角、右上角、左下角、右下角的圆角半径
        //rp.setCornersRadii(20,25,30,35);
        //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
        rp.setCornersRadii(new float[]{20,25,30,35,40,45,50,55});

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
40
41
42
43
   
   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
36
37
38
39
40
41
42
43

代码分析：

圆角6

运行一下，看看效果：

圆角6效果

和第三种设置圆角方法的效果一样，好了，设置圆角的6种方法都演示了一遍，大家可以从头回顾一下。

边框颜色及其宽度—setBorder：

接下来，我们对圆形圆角图的边框宽度进行设置，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        rp.setRoundAsCircle(true);
        //设置圆角半径
        //rp.setCornersRadius(20);
        //分别设置左上角、右上角、左下角、右下角的圆角半径
        //rp.setCornersRadii(20,25,30,35);
        //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
        //rp.setCornersRadii(new float[]{20,25,30,35,40,45,50,55});
        //设置边框颜色及其宽度
        rp.setBorder(Color.RED,10);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
40
41
42
43
44
45
   
   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
36
37
38
39
40
41
42
43
44
45

代码分析：

运行一下，看看效果：

边框效果

叠加颜色—setOverlayColor：

设置叠加颜色，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        rp.setRoundAsCircle(true);
        //设置圆角半径
        //rp.setCornersRadius(20);
        //分别设置左上角、右上角、左下角、右下角的圆角半径
        //rp.setCornersRadii(20,25,30,35);
        //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
        //rp.setCornersRadii(new float[]{20,25,30,35,40,45,50,55});
        //设置边框颜色及其宽度
        rp.setBorder(Color.BLACK,10);
        //设置叠加颜色
        rp.setOverlayColor(Color.GRAY);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
40
41
42
43
44
45
46
47
   
   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
36
37
38
39
40
41
42
43
44
45
46
47

代码分析：

叠加颜色

运行一下，看看效果：

叠加颜色效果

注意：

此效果仅在 RoundingParams.RoundingMethod为OVERLAY_COLOR 模式下有效，并且当我们使用了这个方法之后，它会将默认的BITMAP_ONLY 改为 OVERLAY_COLOR ，前提是没有使用设置圆形圆角模式方法。

圆形圆角模式—setRoundingMethod：

什么是圆形圆角模式呢？首先模式有两种：

限定符和类型	方法	说明
RoundingParams.RoundingMethod	BITMAP_ONLY	使用圆角BitmapShader绘制Bitmap
RoundingParams.RoundingMethod	OVERLAY_COLOR	画圆角的底部通过一个纯色绘制，颜色由setOverlayColor指定

我们来看看 Fresco中文说明上的说明：

在运行时，不能改变呈现方式: 原本是圆角，不能改为圆圈。

当使用BITMAP_ONLY（默认）模式时的限制：

1、并非所有的图片分支部分都可以实现圆角，目前只有占位图片和实际图片可以实现圆角，我们正在努力为背景图片实现圆角功能。

2、只有BitmapDrawable 和 ColorDrawable类的图片可以实现圆角。我们目前不支持包括NinePatchDrawable和 ShapeDrawable在内的其他类型图片。（无论他们是在XML或是程序中声明的）

3、动画不能被圆角。

4、由于Android的BitmapShader的限制，当一个图片不能覆盖全部的View的时候，边缘部分会被重复显示，而非留白。对这种情况可以使用不同的缩放类型（比如centerCrop）来保证图片覆盖了全部的View。

OVERLAY_COLOR模式没有上述限制，但由于这个模式使用在图片上覆盖一个纯色图层的方式来模拟圆角效果，因此只有在图标背景是静止的并且与图层同色的情况下才能获得较好的效果。

Drawee 内部实现了一个CLIPPING模式。但由于有些Canvas的实现并不支持路径剪裁（Path Clipping），这个模式被禁用了且不对外开放。并且由于路径剪裁不支持反锯齿，会导致圆角的边缘呈现像素化的效果。

总之，如果生成临时bitmap的方法，所有的上述问题都可以避免。但是这个方法并不被支持因为这会导致很严重的内存问题。

看完了 Fresco中文说明之后呢，我们来看看这两种模式有什么不同，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        rp.setRoundAsCircle(true);
        //设置圆角半径
        //rp.setCornersRadius(20);
        //分别设置左上角、右上角、左下角、右下角的圆角半径
        //rp.setCornersRadii(20,25,30,35);
        //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
        //rp.setCornersRadii(new float[]{20,25,30,35,40,45,50,55});
        //设置边框颜色及其宽度
        rp.setBorder(Color.BLACK,10);
        //设置叠加颜色
        rp.setOverlayColor(Color.GRAY);
        //设置圆形圆角模式
        rp.setRoundingMethod(RoundingParams.RoundingMethod.BITMAP_ONLY);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
   
   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
36
37
38
39
40
41
42
43
44
45
46
47
48
49

代码分析：

圆形圆角模式1

运行一下，看看效果：

圆形圆角模式1效果

可以看到我们设置的叠加图没有效果，那么接下来我们将模式改为 OVERLAY_COLOR 看看，修改我们刚刚书写的 MainActivity ：

public class MainActivity extends AppCompatActivity {

    ......

    private void initView() {

        //获取SimpleDraweeView
        sdv = (SimpleDraweeView) findViewById(R.id.main_sdv);

        //初始化圆角圆形参数对象
        RoundingParams rp = new RoundingParams();
        //设置图像是否为圆形
        rp.setRoundAsCircle(true);
        //设置圆角半径
        //rp.setCornersRadius(20);
        //分别设置左上角、右上角、左下角、右下角的圆角半径
        //rp.setCornersRadii(20,25,30,35);
        //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
        //rp.setCornersRadii(new float[]{20,25,30,35,40,45,50,55});
        //设置边框颜色及其宽度
        rp.setBorder(Color.BLACK, 10);
        //设置叠加颜色
        rp.setOverlayColor(Color.GRAY);
        //设置圆形圆角模式
        //rp.setRoundingMethod(RoundingParams.RoundingMethod.BITMAP_ONLY);
        //设置圆形圆角模式
        rp.setRoundingMethod(RoundingParams.RoundingMethod.OVERLAY_COLOR);

        //获取GenericDraweeHierarchy对象
        GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
                //设置圆形圆角参数
                .setRoundingParams(rp)
                //设置圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadius(20))
                //分别设置左上角、右上角、左下角、右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(20,25,30,35))
                //分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
                //.setRoundingParams(RoundingParams.fromCornersRadii(new float[]{20,25,30,35,40,45,50,55}))
                //设置圆形圆角参数；RoundingParams.asCircle()是将图像设置成圆形
                //.setRoundingParams(RoundingParams.asCircle())
                //设置淡入淡出动画持续时间(单位：毫秒ms)
                .setFadeDuration(5000)
                //构建
                .build();

        //设置Hierarchy
        sdv.setHierarchy(hierarchy);

        ......
    }
}
   
   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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
   
   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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

代码分析：

圆形圆角模式2

运行一下，看看效果：

圆形圆角模式2效果

总结：

限定符和类型	方法	说明
static RoundingParams	asCircle()	将图像设置成圆形
static RoundingParams	fromCornersRadii(float[] radii)	分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
static RoundingParams	fromCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft)	分别设置左上角、右上角、左下角、右下角的圆角半径
static RoundingParams	fromCornersRadius(float radius)	设置圆角半径
int	getBorderColor()	获取边框颜色
float	getBorderWidth()	获取边框宽度
float[]	getCornersRadii()	获取圆角半径
int	getOverlayColor()	获取叠加颜色
boolean	getRoundAsCircle()	获取图像是否是圆形
RoundingParams.RoundingMethod	getRoundingMethod()	获取当前圆形圆角模式
RoundingParams	setBorder(int color, float width)	设置边框颜色及其宽度
RoundingParams	setCornersRadii(float[] radii)	分别设置（前2个）左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径
RoundingParams	setCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft)	分别设置左上角、右上角、左下角、右下角的圆角半径
RoundingParams	setCornersRadius(float radius)	设置圆角半径
RoundingParams	setOverlayColor(int overlayColor)	设置叠加颜色并将设置圆形圆角的方法改为RoundingMethod.COLOR_OVERLAY
RoundingParams	setRoundAsCircle(boolean roundAsCircle)	设置图像是否为圆形
RoundingParams	setRoundingMethod(RoundingParams.RoundingMethod roundingMethod)	设置圆形圆角模式

Github：

此次教程Github项目地址：https://github.com/scp504677840/Fresco

tiananma0607

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android图片加载神器之Fresco-圆形圆角二合一教程[Java代码实现圆形圆角效果]

RoundingParams百学须先立志—学前须知：之前我们学会了一些基本的效果设置，对于常见的圆形圆角图没有涉及，那么今天我们就一起来看看，如何设置圆形圆角图。尽信书，不如无书—能学到什么？1、DraweeHierarchy 2、SettableDraweeHierarchy 3、GenericDraweeHierarchy 4、GenericDr
复制链接

扫一扫