anroid给边框加阴影只能对内阴影,没有给边框对外加阴影,在自定义shape中增加一层或多层,并错开,即可显示阴影效果。

给边框加阴影可使用<layer-list  多图层叠加,但是对于圆角边框阴影来讲就复杂点,特别还是渐变色阴影就更难玩了,如下具体介绍。

1.圆角阴影效果(内阴影),不加渐变色,第一层渐变色其实没啥用,是对整个边框渐变,2dp的阴影还是一个颜色。

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

<!-- bottom shadow 第一层也就是最外那层 -->
<item >
<!left="1dp"  距离左边1dp -->
 <shape android:shape="rectangle" >

<gradient android:type="linear"

android:centerX="0.5"

android:centerY="0.5"

android:angle="90"

android:startColor="#1A000000"

android:centerColor="#00000000"

android:endColor="#1A000000" />

<corners android:radius="3.33dp" />

</shape>

</item>

<!-- content 最上面那层-->

<item android:bottom="2dp" >
<!android:bottom="1dp"  第一层下阴影的厚度 -->
 <shape android:shape="rectangle" > <solid android:color="#fffffe" /> <corners android:radius="3.33dp" /> </shape></item>

</layer-list>

<layer-list> 
      <!-- 第一层 -->  
      <item android:left="4dp" android:top="4dp">
        <shape> 
          <solid android:color="#66000000"/>  
          <corners android:radius="30dip"/>  
          <!-- 描边 -->  
          <stroke android:width="1dp" android:color="#ffffffff"/> 
        </shape>
      </item>  
      <!-- 第二层 -->  
      <item android:bottom="4dp" android:right="4dp">
        <shape> 
          <solid android:color="#ff58bb52"/>  
          <corners android:radius="30dip"/>  
          <!-- 描边 -->  
          <stroke android:width="1dp" android:color="#ffffffff"/> 
        </shape>
      </item> 
    </layer-list>

由于渐变是对整个边框进行的,以上由于阴影厚度为2dp,几乎看不到渐变色。

2.矩形阴影效果,外阴影,如果是矩形阴影则可以显示渐变色,在边框下边再添加一个边框表示阴影,模拟外阴影效果。

<View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@drawable/layout_shadow"
        >

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

<gradient
        android:type="linear"
        android:centerX="0.5"
        android:centerY="0.5"
        android:angle="270"
        android:startColor="#1A000000"
        android:endColor="#00000000"
        />

</shape>

3. 圆角渐变阴影,三层叠加
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- 第一层为背景色 -->
<item >
    <shape android:shape="rectangle" >
        <solid android:color="@color/color_f5f5f5" />
    </shape>

</item>

<!-- 第二层投影渐变色 -->
<item android:top="62dp"
   >
    <shape android:shape="rectangle" >
        <!-- from top to bottom -->
        <gradient
            android:type="linear"
            android:centerX="0.5"
            android:centerY="0.5"
            android:angle="270"
            android:startColor="#33000000"
            android:centerColor="#1A000000"
            android:endColor="#00000000"
            />
        <!-- 4dp渐变 后2dp为10%透明度到完全透明 -->
        <corners android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"/>

</shape>

</item>

<!-- 第三层数据显示 -->
    <item android:bottom="2dp"
        >
        <shape android:shape="rectangle" >
           <solid android:color="@color/color_fffffe"/>
            <corners android:radius="3.33dp" />

</shape>

</item>

</layer-list>

<LinearLayout
    android:layout_marginTop="10dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:paddingLeft="12dp"
    android:layout_width="match_parent"
    android:layout_height="66dp"
    android:background="@drawable/shape_corner"
    android:gravity="center_vertical"
    android:orientation="vertical">







												

anroid边框阴影-圆角阴影-渐变阴影相关推荐

  1. 自定义字体样式引入使用方法、文本阴影、边框阴影、(边框)圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别

    目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法 引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡  transition 7.理论知识 ...

  2. 转:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)...

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  3. Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  4. Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  5. CSS 边框 圆角 盒子阴影 圆角 solid dotted dashed

    用来单独设置覆盖  边框    阴影 圆角

  6. Fulutter 设置圆角背景图片Container 设置边框、圆角、阴影

    Fulutter 设置圆角背景图片&Container 设置边框.圆角.阴影 在 Flutter 中,如何实现背景图片呢?又如何实现带圆角的背景图片呢? Fulutter 设置圆角背景图片 使 ...

  7. css圆角框四周阴影,css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  8. css圆角边框、文字、盒子阴影

    文章目录 圆角边框.文字.盒子阴影 圆角边框 盒子阴影 文字阴影 圆角边框.文字.盒子阴影 圆角边框 css3中新增了圆角边框样式 border-radius(半径)属性用于设置元素的外边框圆角 参数 ...

  9. CSS3开发总结(圆角、盒阴影、边界图片)

    CSS3开发总结(圆角) 12/100 发布文章 qq_41913971 CSS3 1)圆角 border-radius 2)盒阴影 box-shadow 3)边界图片 border-image-so ...

最新文章

  1. Linux学习笔记13:把网卡名字都修改成eth*
  2. SQL Server 2005 中提供的隔离级别
  3. 2014\Province_C_C++_B\6 奇怪的分式
  4. 我的狗丢了,所以我能加你微信吗? | 今日最佳
  5. 基于Enterprise Library的Winform开发框架实现支持国产达梦数据库的扩展操作
  6. xrdp完美实现Windows远程访问Ubuntu 16.04
  7. Mysql事务探索及其在Django中的实践(二)
  8. vue-cli4 无法访问static资源问题
  9. 委托函数《重构》----处理概括关系
  10. 火狐—火狐浏览器中的“HttpWatch”
  11. 【C++】内建函数对象
  12. 利用安装光盘创建本地 yum 源补装 RPM 软件包
  13. Android 模拟器中的menu键
  14. Caffe for Python 官方教程
  15. Apache Hive实战基础
  16. java内省_java内省机制
  17. Casinos and travel[智力和快速幂]
  18. linux开发板led怎么亮,飞凌OK6410开发板(裸板) 第一个点亮LED灯程序
  19. linux下添加mq队列管理配置,linux下 MQ第二弹:队列管理器的配置,实现双机MQI通道异步双向通信,亲测!!...
  20. 统计排名的MySQL语句

热门文章

  1. IDEA生成Javadoc报错及处理方法
  2. 小米放弃php,小米安全中心
  3. 中国移动遭遇反垄断诉讼
  4. 使用lua脚本解决防止误删的原子性问题
  5. multimap多重映照容器
  6. 宝哥第一回用1500块外星人机械键盘写代码,说实话真的很爽,把这台送大伙了!...
  7. 三箭齐发!达梦数据库一体机 2023 年金融行业开门红
  8. PHP跳转失败,header location无效
  9. 如何用burp抓取手机的流量_手机两个卡槽,流量卡怎么选择,怎么用更合适
  10. ECharts安装和使用