Android 中的那些圆角

发表于 | 分类于
Android 中的那些圆角

引用关键字

implement、api和compile区别

图片圆角

加载处理原图圆角

Glide和Picasso

Glide

使用扩展Glide Transformations

1
2
3
4
5
6
7
8
9
repositories {
    jcenter()
}

dependencies {
    implementation 'jp.wasabeef:glide-transformations:3.1.1'
    // If you want to use the GPU Filters
    implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}

设置代码

1
2
3
Glide.with(this).load(url)
        .apply(bitmapTransform(new BlurTransformation(25)))
        .into((ImageView) findViewById(R.id.image));

Picasso

使用扩展picasso-transformations

引用

1
2
3
4
5
6
7
8
9
repositories {
    jcenter()
}

dependencies {
    compile 'jp.wasabeef:picasso-transformations:2.2.1'
    // If you want to use the GPU Filters
    compile 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}

使用

1
2
3
4
Picasso.with(mContext).load(R.drawable.demo)
    .transform(transformation)
    .transform(new CropCircleTransformation())
    .into(holder.image);

Fresco

第一步：引入支持

1
2
3
dependencies {
  implementation 'com.facebook.fresco:fresco:1.8.1'
}

第二步：使用SimpleDraweeView代替ImageView

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">>

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/iamgeView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:roundedCornerRadius="2dp"/>

</RelativeLayout>

注意其中的：

app:roundedCornerRadius=”2dp”

这样你就得到了一个2dp圆角的ImageView。

初始化

1
2
3
4
5
6
7
public class MyApplication extends Application {
	@Override
	public void onCreate() {
		super.onCreate();
		Fresco.initialize(this);
	}
}

加载图片

1
2
3
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

圆角图片组件

RoundedImageView

1
2
3
4
5
6
7
repositories {
    mavenCentral()
}

dependencies {
    compile 'com.makeramen:roundedimageview:2.3.0'
}

XML中应用

1
2
3
4
5
6
7
8
9
10
11
<com.makeramen.roundedimageview.RoundedImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imageView1"
        android:src="@drawable/photo1"
        android:scaleType="fitCenter"
        app:riv_corner_radius="30dip"
        app:riv_border_width="2dip"
        app:riv_border_color="#333333"
        app:riv_mutate_background="true"
        app:riv_tile_mode="repeat"
        app:riv_oval="true" />

代码中应用

1
2
3
4
5
6
7
8
9
10
11
RoundedImageView riv = new RoundedImageView(context);
riv.setScaleType(ScaleType.CENTER_CROP);
riv.setCornerRadius((float) 10);
riv.setBorderWidth((float) 2);
riv.setBorderColor(Color.DKGRAY);
riv.mutateBackground(true);
riv.setImageDrawable(drawable);
riv.setBackground(backgroundDrawable);
riv.setOval(true);
riv.setTileModeX(Shader.TileMode.REPEAT);
riv.setTileModeY(Shader.TileMode.REPEAT);

背景圆角

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
	<solid android:color="#60000000"/>  
	<stroke android:width="3dp" color="#ff000000"/>  
	<corners android:radius="10dp" />  
</shape>

容器圆角(CardView)

引用

1
2
3
dependencies {  
    implementation 'com.android.support:cardview-v7:27.0.2'
}

设置

1
2
3
4
5
6
7
8
9
10
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    android:id="@+id/cardview"  
    app:cardCornerRadius="8dp"  
    app:cardBackgroundColor="@color/black"  
    android:layout_margin="8dp"  
    android:layout_height="80dp"  
    android:layout_width="match_parent">  
    
</android.support.v7.widget.CardView>