Recyclerview 项目中的阴影效果

Question

我想实现一个具有线性布局和少量小部件以及高程等阴影效果的设计，但我无法正确设置阴影。

我尝试在线性布局中添加高程 no，但它在设计中没有显示任何效果。

我也尝试了 cardview，但没有得到想要的阴影效果。

我的 Recyclerview 项目 XML：

<LinearLayout
    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="wrap_content"
    android:elevation="10dp"
    android:outlineProvider="bounds">

    <LinearLayout
      android:id="@+id/layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:background="@drawable/shape_rectangle_rounded_corner_black"
      android:orientation="vertical">

      <RelativeLayout
        android:id="@+id/rl_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingStart="20dp">

        <de.hdodenhof.circleimageview.CircleImageView
          android:layout_width="13dp"
          android:layout_height="13dp"
          android:background="@color/colorPrimary"
          android:visibility="gone"
          app:civ_border_width="1dp"/>

        <TextView
          android:id="@+id/tv_time"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:fontFamily="@font/font_avenirltstd_book"
          android:textColor="@color/color_light_grey"
          android:textSize="14sp"
          tools:text="12 PM"/>

        <TextView
          android:id="@+id/tv_distance"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="15dp"
          android:layout_alignParentEnd="true"
          android:fontFamily="@font/font_avenirltstd_book"
          android:text="2.1 mi."
          android:textColor="@color/color_light_grey"
          android:textSize="14sp"/>

      </RelativeLayout>

      <TextView
        android:id="@+id/tv_workout_Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingStart="20dp"
        android:fontFamily="@font/font_avenirltstd_heavy"
        android:textColor="@color/color_black_1"
        android:textSize="24sp"
        tools:text="HIIT Workout"/>


      <TextView
        android:id="@+id/tv_type_of_booking"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="20dp"
        android:paddingStart="20dp"
        android:fontFamily="@font/font_avenirltstd_book"
        android:text="One-Time Booking"
        android:textColor="@color/color_light_grey"
        android:textSize="14sp"/>

    </LinearLayout>
  </LinearLayout>

我的 RecyclerView 项目：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/white"
  android:clipToPadding="false">


  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false">

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#F3f3f3"
      android:clipToPadding="false">

        <com.marcohc.robotocalendar.RobotoCalendarView
          android:id="@+id/robotoCalendarView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:elevation="10dp"
          android:visibility="visible"
          app:mcv_calendarMode="month"
          app:mcv_dateTextAppearance="@style/CalendarDateTextAppearance"
          app:mcv_headerTextAppearance="@style/CalendarHeaderTextAppearance"
          app:mcv_leftArrow="@drawable/mcv_action_previous"
          app:mcv_monthLabels="@null"
          app:mcv_rightArrow="@drawable/mcv_action_next"
          app:mcv_selectionColor="@color/color_red"
          app:mcv_selectionMode="single"
          app:mcv_showOtherDates="out_of_range"
          app:mcv_weekDayTextAppearance="@style/CalendarWeekTextAppearance"/>

      <View
        android:id="@+id/view_1"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@+id/msvw"
        android:background="@drawable/shadow"/>

        <android.support.v7.widget.RecyclerView
          android:id="@+id/rv_sessions_list"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
    </RelativeLayout>

  </ScrollView>

</RelativeLayout>

电流输出：

预期输出：

Answer 1

您必须使用CardView 来获得阴影效果。尝试以下布局作为 RecyclerView 项目，看看它是否有效。

<android.support.v7.widget.CardView
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="wrap_content"
app:cardElevation="10dp"
app:cardUseCompatPadding="true"
app:cardCornerRadius="10dp">

<LinearLayout
  android:id="@+id/layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="5dp"
  android:background="@drawable/shape_rectangle_rounded_corner_black"
  android:orientation="vertical">

  <RelativeLayout
    android:id="@+id/rl_time"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="20dp"
    android:paddingStart="20dp">

    <de.hdodenhof.circleimageview.CircleImageView
      android:layout_width="13dp"
      android:layout_height="13dp"
      android:background="@color/colorPrimary"
      android:visibility="gone"
      app:civ_border_width="1dp"/>

    <TextView
      android:id="@+id/tv_time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:fontFamily="@font/font_avenirltstd_book"
      android:textColor="@color/color_light_grey"
      android:textSize="14sp"
      tools:text="12 PM"/>

    <TextView
      android:id="@+id/tv_distance"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginEnd="15dp"
      android:layout_alignParentEnd="true"
      android:fontFamily="@font/font_avenirltstd_book"
      android:text="2.1 mi."
      android:textColor="@color/color_light_grey"
      android:textSize="14sp"/>

  </RelativeLayout>

  <TextView
    android:id="@+id/tv_workout_Name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingStart="20dp"
    android:fontFamily="@font/font_avenirltstd_heavy"
    android:textColor="@color/color_black_1"
    android:textSize="24sp"
    tools:text="HIIT Workout"/>


  <TextView
    android:id="@+id/tv_type_of_booking"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingBottom="20dp"
    android:paddingStart="20dp"
    android:fontFamily="@font/font_avenirltstd_book"
    android:text="One-Time Booking"
    android:textColor="@color/color_light_grey"
    android:textSize="14sp"/>

</LinearLayout>

如果您使用的是 AndroidX 库，请将标签 android.support.v7.widget.CardView 替换为 AndroidX CardView 标签。通过使用 cardCornerRadius 标签，您无需为 LinearLayout 提供自定义背景。

另外，不要忘记检查清单文件中的 hardwareAccelerated = true 是否。如果您的目标是 API 14+，这已经是真的了。如果设置为 false，您将看不到阴影。

Answer 2

根据我的了解，我给你的建议是：

1. 将您的顶级 RelativeLayout 设置为具有等于您在要显示阴影的相对布局上设置的边距；

2. 在同一个RelativeLayout上设置android:clipToPadding="false"；

3. 从也设置了高程的RelativeLayout中移除边距；

4. 您可能还需要在需要提升的子布局上设置不透明的背景颜色。

Answer 3

如果您来检查为什么海拔对您的cardview 不起作用，我犯的错误是我必须更改：

android:elevation="8dp"

与

app:cardElevation="8dp"

Answer 4

Android CardView 是您正在寻找的。将您的日历和每个元素放入卡片中。

更改卡片高度以修改阴影大小。