如何在使用cardUseCompatPadding時覆蓋CardView中的標准填充？

Question

當我使用cardUseCompatPadding在我的卡片視圖中顯示陰影時，頂部填充比左邊填充大。 如何使兩個填充相等，因為我的絲帶看起來不漂亮，它在頂部更大？ 謝謝。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Green triangles for badge -->
    <FrameLayout
        android:id="@+id/ribbon_parts"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:background="@drawable/ic_ribbon_parts"
        android:visibility="gone"/>

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/item_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:background="@color/red"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:theme="@style/LightGrayHighlightTheme"
            card_view:cardBackgroundColor="@color/white"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="2dp"
            card_view:cardPreventCornerOverlap="true"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:animateLayoutChanges="true"
                android:orientation="horizontal"
                android:background="@color/blue"
                android:weightSum="3"> </LinearLayout>
</FrameLayout>

<!-- badge -->
<FrameLayout
        android:id="@+id/ribbon_main"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:background="@drawable/ic_ribbon_main"
        android:visibility="gone"/>

https://www.shutterstock.com/search/new+blue+corner+ribbon

Answer 1

取自文檔：

這可能導致卡片在棒棒糖之間和棒棒糖之前具有不同的尺寸。 如果需要將CardView與其他視圖對齊，則可能需要api版本特定的維度資源來考慮更改。 作為替代方案，您可以將此標志設置為true，並且CardView將在Lollipop平台和之后添加相同的填充值。

接下來，您可以使用margin屬性添加所需的縮進

的example.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2861">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/item_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="1dp"
            android:layout_marginEnd="2dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="1dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?attr/selectableItemBackground"
            card_view:cardBackgroundColor="@android:color/white"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="2dp"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:animateLayoutChanges="true"
                android:orientation="horizontal"
                android:weightSum="3">

                <!-- Your code here -->

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </FrameLayout>

    <!-- badge -->
    <FrameLayout
        android:id="@+id/ribbon_main"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="end"
        android:background="@drawable/corner_ribbon"
        android:visibility="visible" />

</FrameLayout>

現在它在不同版本的API上看起來很棒。

API 19示例

API 26示例

比較並排

在項目中，您可以將這些設置用於CardView和FrameLayout（功能區）以獲得所需的結果。

example_2.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2861">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/item_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="18dp"
            android:layout_marginTop="17dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?attr/selectableItemBackground"
            card_view:cardBackgroundColor="@android:color/white"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="2dp"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:animateLayoutChanges="true"
                android:orientation="horizontal"
                android:weightSum="3">

                <!-- Your code here -->

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </FrameLayout>

    <!-- badge -->
    <FrameLayout
        android:id="@+id/ribbon_main"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="end"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/corner_ribbon"
        android:visibility="visible" />

</FrameLayout>

增加壓痕

Answer 2

你無法解決這個問題。 設置cardUseCompatPadding標志后，這些方法用於計算所有API級別的填充：

final static float SHADOW_MULTIPLIER = 1.5f;

static float calculateVerticalPadding(float maxShadowSize, float cornerRadius, addPaddingForCorners) {
   if (addPaddingForCorners) {
      return (float) (maxShadowSize * SHADOW_MULTIPLIER + (1 - COS_45) * cornerRadius);
   } else {
      return maxShadowSize * SHADOW_MULTIPLIER;
   }
}

static float calculateHorizontalPadding(float maxShadowSize, float cornerRadius, boolean addPaddingForCorners) {
   if (addPaddingForCorners) {
      return (float) (maxShadowSize + (1 - COS_45) * cornerRadius);
   } else {
      return maxShadowSize;
   }
}

使用card_view:cardPreventCornerOverlap="true"時， addPaddingForCorners為true card_view:cardPreventCornerOverlap="true" 。

或許設置一些layout_marginTop上ribbon_main和ribbon_parts會給你想要的效果？

Answer 3

這對我有用，也可能對你有用：

    float cardelevation = cardView.getMaxCardElevation();
    float cardradius = cardView.getRadius();
    double cardcos = Math.cos(Math.toRadians(45));

    int horizontalPadding = (int) (cardelevation + (1 - cardcos ) * cardradius);
    int verticalPadding = (int) (cardelevation * 1.5 + (1 - cardcos ) * cardradius);

謝謝。