你不知道的圓形圓角處理方式

ChicoChen發表於2018-02-07

圖片裁剪我們最常見的做法是通過自定義檢視使用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"，以上方式都將無效

相關文章