xml - 用于android的xml中的梯形阴影
问题描述
我想<RelativeLayout>
为 android 创建一个阴影框,如下图所示:
阴影框可绘制对象将在其<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
draw_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>
解决方案
将您的布局放在卡片视图中
如果您想要更多阴影,请增加 'card_view:cardElevation="30dp"' 的值
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_gravity="center"
card_view:cardElevation="30dp"
card_view:cardBackgroundColor="#000"><!--
card elevation value 30dp and black background
-->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="AbhiAndroid"
android:textColor="#fff"
android:textSize="20sp" />
</android.support.v7.widget.CardView>
推荐阅读
- r-markdown - 在 R Markdown 中创建两个不同深度的目录
- json - 在 Gatling EL 之外调用 jsonStringify()
- java - 如何在 jdk15 之上运行的 felix (v603) 内的 OSGi 组件中创建 InitialDirContext
- ruby-on-rails - Ruby on Rails 中的版本控制 API 助手
- cassandra - cassandra 和 cqlsy 的错误和警告
- c++ - 如何在c ++中将字符串值分配给整数变量?
- c++ - 从模板化向量函数中删除 cv-qualifier
- python-3.x - 来自 AWS 控制台的 AWS 反向迁移设置本地主机
- c - 语法 C,这是什么意思
- c - 而函数C编程