【问题标题】:Android CardView Drop shadow gets clipped [duplicate]Android CardView投影被剪裁[重复]
【发布时间】:2021-07-15 11:38:10
【问题描述】:

我正在尝试在 CardView 上显示投影。如果我将 CardView 放入容器(如 LinearLayout)中,阴影将无法正确显示。

我的代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFF8"
    android:clipToPadding="false"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:translationZ="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <LinearLayout
        android:id="@+id/card1"
        android:layout_width="match_parent"
        android:layout_height="330dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="#FFFFF8"
        android:clipToPadding="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:translationZ="16dp"
            />
    </LinearLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>



看起来像:

我有两个CardViews,我把下面的一个放到LinearLayout中,如你所见,它的顶部和左侧没有阴影。不过上面那个好看。

有什么办法可以解决 CardView 在 LinearLayout 中的情况吗?

附:

  • 我不想在 CardView 上引入额外的边距或在容器 LinearLayout 中引入额外的填充
  • 我尝试将android:clipToPadding="false" 添加到容器LinearLayout,但没有帮助。
  • 我已经阅读了这个Elevation shadow is clipped,并尝试了android:clipToPadding="false" && android:clipChildren="false",它不起作用。

关于为什么我不想有额外的边距或填充的更多上下文,我的应用程序是数据驱动的,并且与 CardViews 上的阴影相同,CardViews 可以垂直或水平一一布局,使用或使用没有阴影,如果我必须考虑额外的边距,以显示带有阴影的 CardViews,那么逻辑就太复杂了。

假设这样一个场景,比如说一个阴影 CardView,另一个阴影向右;但是一个没有阴影到底部等。我必须将边距设置到第一个但不设置到右边,因为第二个(在右侧)也有阴影,而对于第二个,我有阴影的右边距;与下面的逻辑相同,但逻辑在这里变得复杂,这就是为什么我在这里寻求解决方案,如果投影可以在不依赖边距/填充的情况下可见,那对我来说太好了。

编辑:关闭,因为:https://stackoverflow.com/a/57741227/853191,这条评论帮助了我。

谢谢!

【问题讨论】:

  • 使用"app:cardUseCompatPadding=true"
  • @OhhhThatVarun 感谢您的回答!它有一点帮助,但仍然看起来不太好。见raw.githubusercontent.com/chinalwb/myres/master/shadow.jpeg
  • 然后在您的cardView中添加更多填充
  • @OhhhThatVarun 谢谢先生的想法!但是这里我不想引入额外的逻辑,因为在我的项目中可以有多个这样的cardviews,水平或垂直对齐,运行时布局,数据驱动,我希望它们的边缘可以对齐,即.: 第一个卡片视图的右侧与第二个卡片视图的右侧紧密匹配,因此阴影看起来像它们两个而不是它们每个。还有什么想法吗?再次感谢!
  • 如果您将 layout_marginLeftlayout_marginRight 分别更改为 paddingLeftpaddingRightLinearLayout 父级上,您将修复水平剪切。移除阴影顶部剪裁的唯一方法是将 paddingTop 引入阴影视图的父级(至少等于顶部边缘的阴影大小)

标签: android cardview dropshadow


【解决方案1】:

要显示投影,您应该使用 android:translationX="16dp", android:translationY="16dp", android:translationZ="16dp" 如下所示。

<LinearLayout
    android:id="@+id/card1"
    android:layout_width="match_parent"
    android:layout_height="330dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:background="#FFFFF8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:translationX="16dp"
        android:translationY="16dp"
        android:translationZ="16dp" />
</LinearLayout>

输出: Output Image click here!

【讨论】:

  • 感谢您的回答先生!但是 X 和 Y 的翻译会改变 CardView 的位置,这是我不想拥有的。即:在这张照片中:raw.githubusercontent.com/chinalwb/myres/master/… 我希望左边缘匹配黄色区域和黄色区域之外的阴影。还有其他想法吗?
猜你喜欢
  • 1970-01-01
  • 2011-10-14
  • 2020-11-16
  • 2013-07-12
  • 2017-07-08
  • 2021-05-30
  • 1970-01-01
  • 2014-10-14
  • 1970-01-01
相关资源
最近更新 更多