Anko 中使用 CardView 無法設定 radius 圓角

摘要： Anko 提升了 Android 頁面的渲染速度，但是在用 Anko 寫佈局的時卻遇到了很多坑，用 XML 可以輕鬆實現的一些效果，在 Anko 中經常找不到解決方案。比如說題目中的這個問題。 XML 中 CardView 的實現 1. 首先在匯入依賴 implementation...

Anko 提升了 Android 頁面的渲染速度，但是在用 Anko 寫佈局的時卻遇到了很多坑，用 XML 可以輕鬆實現的一些效果，在 Anko 中經常找不到解決方案。比如說題目中的這個問題。

XML 中 CardView 的實現

1. 首先在匯入依賴

implementation 'com.android.support:cardview-v7:26.1.0'

2. XML 程式碼

<android.support.v7.widget.CardView
app:cardCornerRadius="@dimen/dp_10"
app:cardElevation="@dimen/dp_10"
app:cardPreventCornerOverlap="true"
app:cardBackgroundColor="@color/colorBackground"
android:foreground="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_height="80dp">
</android.support.v7.widget.CardView>

3. 屬性詳解

cardCornerRadius屬性用來設定 CardView 的圓角效果

cardElevation屬性用來提供 CardView 的陰影效果

cardBackgroundColor屬性用來設定 CardView 中的背景顏色

foreground屬性用來設定 CardView 的點選效果，前提是新增 clickable 和 focusable

Anko 中 CardView 的實現

1. 匯入依賴

implementation "org.jetbrains.anko:anko-cardview-v7:$anko_version"// build.gradleModule: app
ext.anko_version='0.10.7'// build.gradle Project

2. Anko 程式碼

cardView {
id_cardView = View.generateViewId()
id = id_cardView
radius = 43f
cardElevation = 30f
backgroundColor = ContextCompat.getColor(ctx, R.color.colorWhite)
//background.setColorFilter(Color.WHITE,PorterDuff.Mode.SRC_ATOP)
}.lparams(width = matchParent, height = dip(200)) {
leftMargin = dip(30)
topMargin = dip(30)
rightMargin = dip(30)
topToBottom = id_toolbar
startToStart = PARENT_ID
endToEnd = PARENT_ID
}

程式碼看起來很完美，我們來看一下執行效果：

圓角呢？圓角呢？圓角呢？

問題就出在了這句程式碼上：

backgroundColor = ContextCompat.getColor(ctx, R.color.colorWhite)

這句程式碼將背景色設定給了 ColorDrawable 而不是 RoundRectDrawable ，所以應該把這句程式碼改成這樣：

background.setColorFilter(ContextCompat.getColor(ctx,R.color.colorWhite),PorterDuff.Mode.SRC_ATOP)

修改之後的執行效果：