线性布局切割材料卡阴影

Question

我正在制作带有材质卡片及其阴影的天气应用。我找到了一种使用线性布局将它们居中的方法，但是它可以消除阴影。我该如何预防？有没有一种方法可以在不使用线性布局或框架布局的情况下对齐它们？

这是我的布局代码：我以FrameLayout为根，我的LinearLayout包含两个物料卡，我只是想将它们作为一个组居中，如果您知道另一种方法，请告诉我！

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
    android:id="@+id/img_background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/background"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name"
    android:fontFamily="cursive"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="25dp"
    android:textSize="50sp"
    android:textColor="#FFF"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your location's weather in a touch!"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="90dp"
    android:textSize="17.3sp"
    android:textColor="@color/colorPrimaryText"/>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center">
    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="270dp"
        android:layout_height="140dp"
        android:layout_gravity="center_horizontal"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="5dp">

        <TextView
            android:id="@+id/tv_temperature"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:padding="16dp"
            android:text="30°C"
            android:textColor="@color/colorPrimaryText"
            android:textSize="50sp" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cv_data"
        android:layout_width="270dp"
        android:layout_height="140dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="5dp">

        <TextView
            android:id="@+id/tv_conditions"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:padding="16dp"
            android:text="Scatted Clouds"
            android:textColor="@color/colorPrimaryText"
            android:textSize="30sp" />
    </android.support.v7.widget.CardView>
</LinearLayout>

<ProgressBar
    android:id="@+id/pb_loading"
    android:layout_width="55dp"
    android:layout_height="55dp"
    android:layout_gravity="center"
    android:elevation="20dp"/>
<TextView
    android:id="@+id/tv_city_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:padding="20dp"
    android:fontFamily="sans-serif"
    android:textColor="#FFF"
    android:textSize="20sp"/>

Answer 1

看起来您的布局会比更好，ConstraintLayout而不是FrameLayout，但我们仍然可以满足您的要求。

问题在于（在较新的Android版本上），a的阴影CardView实际上是在视图范围之外绘制的。通常，这很好，但是如果CardView父对象位于父对象中，则如果父对象没有足够的空间显示阴影，则该父对象可以裁剪阴影。

就您而言，“轻松修复”实际上非常容易。将您LinearLayout的宽度更改为match_parent; 这将为纸牌留出阴影的空间。

编辑

我上面说的将解决每张卡侧面的阴影，但不会解决顶部卡上方或底部卡下方的阴影。同样，本着快速修复的精神，我建议将以下属性添加到LinearLayout中：

android:paddingTop="8dp"
android:paddingBottom="8dp"
android:clipToPadding="false"