Android项目实战(三十六):给背景加上阴影效果_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > Android项目实战(三十六):给背景加上阴影效果

Android项目实战(三十六):给背景加上阴影效果

 2017/11/7 15:26:29  听着music睡  程序员俱乐部  我要评论(0)
  • 摘要:圆角背景大家应该经常用:一个drawable资源文件里面控制corner圆角和solid填充色<shapexmlns:android="http://schemas.android.com/apk/res/android"><cornersandroid:radius="@dimen/dp_2"></corners><solidandroid:color="@color/standard_main"></solid><
  • 标签:android 项目

 

圆角背景大家应该经常用:

一个drawable资源文件  里面控制corner圆角 和solid填充色 

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp_2"></corners>
    <solid android:color="@color/standard_main"></solid>
</shape>

 

 那么在此基础上 , 实现带阴影效果的圆角背景  

 代码如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 阴影部分 -->
<!-- 个人觉得更形象的表达:top代表下边的阴影高度,left代表右边的阴影宽度。其实也就是相对应的offset,solid中的颜色是阴影的颜色,也可以设置角度等等 -->
<item
    android:left="4dp"
    android:top="4dp">
    <shape android:shape="rectangle" >

        <gradient
            android:angle="270"
            android:endColor="#0F000000"
            android:startColor="#0F000000" />

        <corners
            android:bottomLeftRadius="@dimen/dp_4"
            android:bottomRightRadius="@dimen/dp_14"
            android:topLeftRadius="@dimen/dp_4"
            android:topRightRadius="@dimen/dp_4" />
    </shape>
</item>

<!-- 背景部分 -->
<!-- 形象的表达:bottom代表背景部分在上边缘超出阴影的高度,right代表背景部分在左边超出阴影的宽度(相对应的offset) -->
<item
    android:bottom="3dp"
    android:left="@dimen/dp_0.5"
    android:top="@dimen/dp_0.5"
    android:right="3dp">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:endColor="#FFFFFF"
            android:startColor="#FFFFFF" />

        <corners
            android:bottomLeftRadius="@dimen/dp_4"
            android:bottomRightRadius="@dimen/dp_14"
            android:topLeftRadius="@dimen/dp_4"
            android:topRightRadius="@dimen/dp_4" />
    </shape>
</item>

</layer-list>

 效果: 可以看到 右侧和下侧都有一个小范围的灰色阴影效果。

 

 

在实际产品中作为列表item的背景效果:

 

 是不是实现了一种类似cardview的效果 

 

发表评论
用户名: 匿名