先上图,看看最终个效果。
总的来说有二种手段来实现
1. 使用layer-list
2. 使用Elevant
使用layer-list
layer-list的方式的就一层一层绘制叠加,下面的item总是覆盖在上面的item上。
方式一:用一条条的线条来叠加
就是一条条有梯度的线条来模拟一个阴影效果,具体背景drawable如下代码所示:
android:topRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp" />
android:left="1dp"
android:right="1dp"
android:top="1dp" />
android:topRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp" />
android:left="1dp"
android:right="1dp"
android:top="1dp" />
android:topRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp" />
android:left="1dp"
android:right="1dp"
android:top="1dp" />
android:topRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp" />
android:left="1dp"
android:right="1dp"
android:top="1dp" />
android:topRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp" />
android:left="1dp"
android:right="1dp"
android:top="1dp" />
方式二:两个有差异的方块来叠加
android:top="2dp">
android:centerX="50"
android:centerY="50"
android:endColor="#03000000"
android:startColor="#0F000000" />
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
android:right="3dp">
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
使用elevation
有阳光的地方就有阴影,真实的阴影其实是一种光影的效果。一个有光照的角度,加上物体有厚度就会形成一个阴影层。谷歌为了做出材料设计的风格 新增了一个z的方向,代表的三维立体的高度。 这个值可以用elevation 表达,这是一种阴影的方式。
使用系统的在阴影的效果表达上会更加的形象,一般会出现一边的阴影比较浓,一边的比较淡。但是有很多的设计师,并不是想要个阴影,就想实现毛茸茸的阴影边框,可能上面的layer-list会更加的实用
方式一:直接使用elevation
有个限制是在api 21以上才会生效
android:id="@+id/tv_2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="50dp"
android:layout_centerHorizontal="true"
android:text="elevation"
android:gravity="center"
android:background="#fff"
android:elevation="10dp"/>
方式二:使用CardView
这个有兼容包,在各个的表现都不错。
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@id/tv_2"
android:layout_marginTop="50dp"
android:layout_centerHorizontal="true"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="CardView"
android:gravity="center"
android:background="#fff"
/>