用于Android的xml中的梯形阴影

Posted 2023-01-18

我想为android的<RelativeLayout>创建一个阴影框，如下图所示：

将在其内部创建<gradient>的影子框可绘制对象，如下所示：

我正在努力，因为我正在尝试使用梯形形状来使<RelativeLayout>从屏幕上站立时可以看到它。

---

这是我的代码：

activity_main.xml

<?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="#fff"
   tools:context=".LoginActivity">

   <RelativeLayout
       android:id="@+id/myRectangleView"
       android:layout_width="354dp"
       android:layout_height="239dp"
       android:layout_marginStart="30.5dp"
       android:layout_marginLeft="30.5dp"
       android:layout_marginTop="84dp"       
       android:background="@drawable/my_drawable"    
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">

       <ImageView
           android:layout_width="48dp"
           android:layout_height="48dp"
           android:layout_alignParentStart="true"
           android:layout_alignParentLeft="true"
           android:layout_alignParentTop="true"
           android:layout_marginStart="15dp"
           android:layout_marginLeft="15dp"
           android:layout_marginTop="15dp"           
           android:contentDescription="avatar"
           app:srcCompat="@mipmap/ic_launcher_round" />

   </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

my_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list
   xmlns:android="http://schemas.android.com/apk/res/android">

   <!-- image shadow below can be use just fine-->
   <item
       android:drawable="@drawable/image_shadow">
   </item>

   <!-- drawn shadow below is what I want it to be trapezoidal shape -->
   <!-- right now it's a triangle, and I unsuccessfully tried to overlap it so it'd become trapezoid -->
   <item
       android:drawable="@drawable/drawn_shadow">
   </item>

   <item
       android:top="0dp"
       android:bottom="0dp">
       <shape
           android:shape="rectangle">
           <solid
               android:color="#d1d1d1"/>
           <stroke
               android:width="0.01dp"
               android:color="#9c9c9c"/>
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
   <item
       android:top="0dp"
       android:bottom="2dp">
       <shape
           android:shape="rectangle">
           <solid
               android:color="#d1d1d1"/>
           <stroke
               android:width="0.01dp"
               android:color="#9c9c9c"/>
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
   <item
       android:top="0dp"
       android:bottom="4dp">
       <shape
           android:shape="rectangle">
           <gradient
               android:angle="90"
               android:endColor="#564DA1"
               android:centerColor="#463894"
               android:startColor="#2D216F"
               android:centerY="0.75"
               android:type="linear" />
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
   <item
       android:top="0dp"
       android:bottom="157.5dp">
       <shape>
           <gradient
               android:startColor="#564DA1"
               android:centerColor="#e8e8e8"
               android:endColor="#564DA1"
               android:type="linear"
               android:centerY="0.75"
               android:angle="90"/>
       </shape>
   </item>
   <item
       android:top="125dp"
       android:bottom="4dp">
       <shape>
           <gradient
               android:startColor="#574EA4"
               android:centerColor="#574EA4"
               android:endColor="#574EA4"
               android:type="linear"
               android:centerY="0.75"
               android:angle="90"/>
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
</layer-list>

image_shadow.9.png

drawn_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item >
       <rotate
           android:fromDegrees="45"
           android:toDegrees="-45"
           android:pivotX="15%"
           android:pivotY="-36%" >
           <shape
               android:shape="rectangle"  >
                   <padding
                       android:bottom="50dp"
                       android:left="0dp"
                       android:right="0dp"
                       android:top="0dp" />
               <gradient
                   android:angle="225"
                   android:endColor="@android:color/transparent"
                   android:centerColor="@android:color/transparent"
                   android:startColor="#999999"
                   android:centerY="0.1"
                   android:type="linear" />
           </shape>
       </rotate>
   </item>
</layer-list>

答案

将布局放入名片视图

另一答案

尝试使用此方法而不是drawd_shadow.xml

另一答案

到目前为止，我无法创建梯形形状的可绘制文件，但是我已经成功为其创建了9补丁文件。