Android圓角ViewGrup/View庫（可加邊框），媽媽再也不用擔心設計圓角了！

項目位址：RoundCorners

比較常用的ViewGroup和View的圓角實作（可加邊框），一發治好設計的圓角病。

Demo

效果預覽

特點

• LinearLayout、RelativeLayout、FrameLayout、ViewPager支援圓角
• ImageView、TextView、View、Button支援圓角
• CircleImageView（圓形圖檔）
• 支援邊框（不遮擋圖檔）
• 可正常設定ripple（波紋不會突破邊框）
• 使用xml進行配置，使用簡單
• …

基本用法

Step 1. 添加JitPack倉庫

在項目根目錄下的

build.gradle

中添加倉庫:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
           

Step 2. 添加項目依賴

dependencies {
    implementation 'com.github.KuangGang:RoundCorners:1.0.2'
}
           

Step 3. 在布局檔案中添加需要的RoundCorners

<com.kproduce.roundcorners.CircleImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@mipmap/ic_test"
    app:rStrokeColor="@android:color/holo_red_dark"
    app:rStrokeWidth="5dp" />

<com.kproduce.roundcorners.RoundImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    android:src="@mipmap/ic_test"
    app:rRadius="30dp"/>

<com.kproduce.roundcorners.RoundTextView
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@android:color/holo_blue_dark"
    android:gravity="center"
    android:text="Hello!"
    android:textColor="@android:color/white"
    android:textSize="40sp"
    app:rRightRadius="30dp" />

<com.kproduce.roundcorners.RoundRelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:rTopRightRadius="30dp"
    app:rBottomRightRadius="30dp"
    app:rStrokeColor="@android:color/holo_green_dark"
    app:rStrokeWidth="5dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_dark" />
</com.kproduce.roundcorners.RoundRelativeLayout>

<com.kproduce.roundcorners.RoundTextView
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@android:color/holo_blue_dark"
    android:gravity="center"
    android:text="Hello!"
    android:textColor="@android:color/white"
    android:textSize="40sp"
    app:rLeftRadius="50dp"
    app:rRightRadius="50dp"/>
……
           

支援的屬性、方法

屬性名	含義	預設值
rRadius	統一設定四個角的圓角半徑	0dp
rLeftRadius	左邊兩個角圓角半徑	0dp
rRightRadius	右邊兩個角圓角半徑	0dp
rTopRadius	上邊兩個角圓角半徑	0dp
rBottomRadius	下邊兩個角圓角半徑	0dp
rTopLeftRadius	左上角圓角半徑	0dp
rTopRightRadius	右上角圓角半徑	0dp
rBottomLeftRadius	左下角圓角半徑	0dp
rBottomRightRadius	右下角圓角半徑	0dp
rStrokeWidth	邊框寬度	0dp
rStrokeColor	邊框顔色	Color.WHITE

原理淺解

Android View的繪制流程。

View的繪制看一下這篇文章即可，代碼版本比較早，但是邏輯基本相同。

1. 使用Path的addRoundRect方法，将需要剪切的圓角半徑進行設定。
2. 所有View和ViewGroup的繪制都需要經過draw方法，在draw結束之後使用第一步的Path進行畫布切割。
3. 注意在draw中減少建立對象次數。

版本記錄

版本号	更新内容
1.0.2	1.增加邊框 2.增加RoundButton/RoundViewPager
1.0.1	1.修複低版本系統圓角View黑框問題 2.增加CircleImageView
1.0.0	First Version