java - Recyclerview 项目中的阴影效果

Question

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

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

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

我的 Recylerview 项目 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 提供自定义背景。

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