android - 在 MaterialCardView 中心设置自定义图标

Question

我无法在 MaterialCardView 的中心设置自定义图标。这是我的 xml 布局

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/cardPaymentContainer"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:layout_margin="@dimen/default_margin"
    android:layout_marginStart="@dimen/button_margin"
    android:layout_marginEnd="@dimen/button_margin"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolBarContainer">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardPaymentCardView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:checkable="true"
        android:clickable="true"
        android:focusable="true"
        app:cardCornerRadius="@dimen/card_view_cornder_radius"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

处理 Activity 中的点击:

dataBinding =
            DataBindingUtil.setContentView<PaymentActivityBinding>(this, R.layout.payment_activity)
        dataBinding.setHandler(this)
        dataBinding.cardPaymentCardView.setOnClickListener({
            Debug.d(TAG, "cardPaymentCardView: onClick")
            dataBinding.cardPaymentCardView.isChecked = !dataBinding.cardPaymentCardView.isChecked
        })

这里的结果:

未点击:

然后点击:

但我需要将我的自定义图标放在 CardView 的中心。像这样:

我将 SVG 转换为 xml(通过 Android Studio)

我试过了，但是图标不显示，也没有显示在 cardView 的中心:

 <com.google.android.material.card.MaterialCardView
                android:id="@+id/cardPaymentCardView"
                style="@style/cardViewStyle"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                app:cardCornerRadius="@dimen/card_view_cornder_radius"
                app:checkedIcon="@drawable/ic_credit_card_outline_select"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

            </com.google.android.material.card.MaterialCardView>

Answer 1

简而言之，您无法使用组件提供的标准 checkedIcon 来实现它。您必须在 Card 中添加可绘制对象/ View 。

对于 1.1.0、1.2.1 你可以 :

• 使用 app:checkedIcon 属性定义自定义图标
• 使用 app:checkedIconTint 属性为图标定义颜色选择器

从 1.3.0-alpha03 开始，您还可以定义:

• app:checkedIconSize:图标的大小(默认24dp)
• app:checkedIconMargin:图标的边距(默认8dp)

---

要在 1.2.x 和 1.1.0 版本中实现相同的行为，您可以执行类似的操作((但我建议您避免这种解决方法):

• 在 dimens.xml 中添加勾选图标覆盖使用的边距:

      <!-- Margin between the checked icon and the card -->
      <dimen name="mtrl_card_checked_icon_margin">xxdp</dimen>
  

• 在 dimens.xml 中添加选中的图标覆盖使用的大小:

      <!-- Size of the icon to be placed when the card is checked -->
      <dimen name="mtrl_card_checked_icon_size">xxdp</dimen>