Android之设置控件的阴影

原创 2017年09月13日 16:23:50

本文主要记录Android控件设置阴影

  • 给控件设置阴影,会使得界面元素更好看一写,google 给我们提供了一个现成的控CardView,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果
  • 本文是使用给控件设置背景实现阴影

    • 在res/drawable 下新建一个 Drawable Resource File
    • 使用 layer-list 图层 就是说可以多个图层一层一层盖上去
    • 新建一个渐变的图层 item作为背景图层,主要是 gradient,shape是用来定义形状的,corners设置角度,gradient定义该形状里面为渐变色填充,startColor起始颜色,endColor结束颜色,angle表示方向角度。当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上

      <item >
          <shape android:shape="rectangle" >
      
              <gradient
                  android:angle="90"
                  android:endColor="#dad9d9"
                  android:startColor="#03a430" />
              <corners android:radius="10dp" />
          </shape>
          </item>

      这里写图片描述

    • 新建一个图层,作为顶层图层, 阴影实现的原理,就是顶层的小显示一点,露出一部分下面的图层,这个就需要设置Item的 left, top, right, bottom属性,这几个参数的设置就类似于设置margin, 这样就可以出来阴影效果了,当然为了效果,我的参数设置的有点夸张,只设置了右边和下边的阴影,solid 设置填充, 还有stroke 设置边框,设置了颜色,设置了宽度就可以看见边框效果了

      <item >
         <shape android:shape="rectangle" >
      
              <gradient
                  android:angle="90"
                  android:endColor="#dad9d9"
                  android:startColor="#03a430" />
      
              <corners android:radius="10dp" />
          </shape>
      </item>
      <item android:right="20dp"
            android:bottom="40dp">
          <shape android:shape="rectangle" >
              <solid android:color="#FFFFFF"/>
      
              <corners android:radius="10dp" />
          </shape>
      </item>

      这里写图片描述

    • 顶层的图层上,还是可以添加触摸的变化效果,即手指触碰到该控件时,控件背景色变化

      <item
            android:right="2dp"
            android:bottom="6dp">
            <selector>
                <item android:state_focused="false" android:state_pressed="true" >
                    <shape android:shape="rectangle" >
                        <solid android:color="@color/E5"/>
                        <corners android:radius="10dp" />
                    </shape>
                </item>
                <item>
                    <shape android:shape="rectangle" >
                        <solid android:color="@color/white"/>
                        <corners android:radius="10dp" />
                    </shape>
                </item>
            </selector>
        </item>
    • 使用:android:background=”@drawable/你的阴影xml文件”
      这里写图片描述

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="50dp"
          android:background="@drawable/vcam_entry_border"
          android:gravity="center"
          android:orientation="vertical">
      
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:paddingRight="@dimen/common_measure_10dp"
              android:textColor="@color/black_100"
              android:text="啦啦啦啦,我有阴影"/>
      
      </LinearLayout>

附 : 完整的阴影xml 代码

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

    <!-- 阴影部分 最下面一层 -->
    <item >
        <shape android:shape="rectangle" >

            <gradient
                android:angle="90"
                android:endColor="#777777"
                android:startColor="#C5C5C5" />

            <corners android:radius="10dp" />
        </shape>
    </item>

    <!-- 背景部分 -->
    <!-- 形象的表达:bottom left ... 类似于设置 margin -->
    <item
        android:right="2dp"
        android:bottom="6dp">
        <selector>
            <item android:state_focused="false" android:state_pressed="true" >
                <shape android:shape="rectangle" >
                    <solid android:color="@color/E5"/>
                    <corners android:radius="10dp" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle" >
                    <solid android:color="@color/white"/>
                    <corners android:radius="10dp" />
                </shape>
            </item>
        </selector>
    </item>
</layer-list>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/I_do_can/article/details/77967690

Android给布局、控件加阴影效果

还可以参考我写的这篇帖子,是5.0之后更简易的实现阴影和view裁剪。 Android5.0以后,materialDesign风格的加阴影和裁剪效果 http://blog.csdn.net/j...
  • jakezhang1990
  • jakezhang1990
  • 2017-03-22 15:52:31
  • 27515

Android 给图片、文字、控件、布局添加阴影效果(悬浮效果)

本文只用来做技术收藏具体内容请访问github: https://github.com/DevLight-Mobile-Agency/ShadowLayoutgit效果 我的demo效果 代...
  • qq_28934205
  • qq_28934205
  • 2016-05-06 10:30:21
  • 5428

Android图片添加阴影效果的两种方式

给图片添加阴影效果,这是很常见的需求。第一种方法是自定义drawable,使用layer-list定义两个图片,代码如下:show_view.xml: ...
  • u011421608
  • u011421608
  • 2016-07-16 12:36:37
  • 14811

Android - shape(二):背景切换、添加阴影

button或者textview( 需设置android:clickable=”true”)的点击后背景切换,常用到selector 、shape、layer-list 。 selector常用于点...
  • sinat_31057219
  • sinat_31057219
  • 2017-08-04 10:10:53
  • 1093

Android工具库记:shadowlayout轻松实现阴影

前段时间,ui设计上有几个控件需要加阴影~因此笔者搜索了一下Android给控件加阴影的方法~搜索出来的结果并不多~介绍给控件加阴影的只有几篇文章~ 无非就是自己定义一个drawable的xml然后...
  • javy_codercoder
  • javy_codercoder
  • 2016-01-06 20:21:45
  • 5231

在控件下方添加阴影

在控件下方添加阴影最近在开发过程中,想要实现一种效果,效果如图(图来源stackoverflow):在tablayout下添加一道阴影,由于一些特殊的原因不能使用elevation属性来实现相应的阴影...
  • gu18168
  • gu18168
  • 2017-02-11 18:51:02
  • 1568

Android给控件自定义边框和阴影

所谓添加阴影,就是两个画布从重叠,上方的画布小于下方的画布,阴影颜色为下方的画布的颜色。 item 中shape 的属性 (rectangle:矩形;line:线性;oval:椭圆;ring:环...
  • u014155882
  • u014155882
  • 2015-12-27 16:25:42
  • 7581

Android 空间的阴影第三方库,ShadowViewHelper的使用

github 地址:https://github.com/wangjiegulu/ShadowViewHelper 0:首先添加库: compile 'com.github.wangjie...
  • Rodulf
  • Rodulf
  • 2016-10-17 17:46:39
  • 1764

Android 给控件设置带阴影背景

最简单的方法就是用背景图片了,哈哈,不过这里说下用xml实现,主要用到标签,看例子: ...
  • msn465780
  • msn465780
  • 2017-06-27 16:09:11
  • 911

自定义控件三部曲之绘图篇(十六)——给控件添加阴影效果与发光效果

前言:要么出击,要么出局,命运女神总会眷顾拼劲全力的一方原本打算用MarkDown来编辑这篇文章,可一直报文章不能为空……明明已经写好了好吗……上传图片不响应也就算了……这么明显的bug都没测出来吗,...
  • harvic880925
  • harvic880925
  • 2016-07-04 09:21:30
  • 14594
收藏助手
不良信息举报
您举报文章:Android之设置控件的阴影
举报原因:
原因补充:

(最多只允许输入30个字)