你不知道的圆形圆角处理方式

图片裁剪我们最常见的做法是通过自定义视图使用BitmapShader或者Xfermode方式来实现。

BitmapShader和Xfermode不是这里的重点，具体可以自行去查找。

下面介绍的主角是通过CardView和ViewOutlineProvider来圆角圆形需求，而且这两种方式主要是针对控件。

CardView是Android 5.0引入的卡片显示控件，可以实现阴影和圆角

ViewOutlineProvider是Android 5.x引入的新特性，用于实现View的阴影和轮廓

废话不多说，直接看实现方法

CardViews实现圆形

<android.support.v7.widget.CardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    app:cardCornerRadius="50dp">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:src="@drawable/girl" />
</android.support.v7.widget.CardView>

CardViews实现圆形

<android.support.v7.widget.CardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    app:cardCornerRadius="10dp">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:src="@drawable/girl" />
</android.support.v7.widget.CardView>

上面两种方式主要是设置CardView的cardCornerRadius属性，如果要展示指定的圆角，把这个值设置成你想要的圆角值就行，如果展示为圆形，首先要设置CardView长宽等值，而且cardCornerRadius为长宽的一半

ViewOutlineProvider实现圆角

roundImage.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        });
roundImage.setClipToOutline(true);

ViewOutlineProvider实现圆形

circleImage.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        });
circleImage.setClipToOutline(true);

setClipToOutline方法可以在前设置也可以在为设置，如果设置为false则表示禁止裁剪，setOutlineProvider方法将无效。

注意：如果我们的应用设置了android:hardwareAccelerated="false"，以上方式都将无效

作者：ChicoChen
链接：https://juejin.im/post/5a7a6bd1f265da4e9c630fa9
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。