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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 给控件添加边框阴影

位置:res/drawable/bg_shadow.xml
  • qq_30552993
  • qq_30552993
  • 2015年11月26日 11:57
  • 16536

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

增加阴影效果,让控件或者布局看起来有立体的效果,总的来说有两种解决方案。1,直接使用属性: android:elevation="4dp"这样一句代码,就实现了效果,elevation表示海拔,就是布...
  • jakezhang1990
  • jakezhang1990
  • 2017年03月22日 15:52
  • 16903

Android Studio中设置阴影效果

1、效果图: 2、代码: package demo.cd.com.reflectionimageactivity; import android.content.Context;...
  • Pillar1066527881
  • Pillar1066527881
  • 2016年03月30日 14:31
  • 1920

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

增加阴影效果,让控件或者布局看起来有立体的效果,总的来说有两种解决方案。1,直接使用属性: android:elevation="4dp"这样一句代码,就实现了效果,elevation表示海拔,就是布...
  • caonidayeheixiu8
  • caonidayeheixiu8
  • 2018年01月19日 11:09
  • 10

在控件下方添加阴影

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

使用FrameLayout应该注意的地方

先来看官方文档的定义:FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象 — 比如,一张你要发布的图片。所有的子元素将会固定在屏幕的左...
  • xjbclz
  • xjbclz
  • 2016年08月16日 22:53
  • 568

android控件的边框设置

xml version="1.0" encoding="utf-8"?> shape xmlns:android="http://schemas.android.com/apk/res/android...
  • shuaicike
  • shuaicike
  • 2015年02月15日 15:30
  • 15777

android文字阴影效果设置

原文地址:http://blog.csdn.net/jdsjlzx/article/details/7609095
  • lovewaterman
  • lovewaterman
  • 2014年10月13日 16:26
  • 745

View 添加阴影效果

View 添加阴影效果就是一句代码的事.
  • u014608640
  • u014608640
  • 2016年10月28日 09:20
  • 1899

Android--添加阴影效果--CardView的使用

Android5.0中向我们介绍了一个全新的控件–CardView,从本质上看,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果。请注意:CardView被包装为一种布...
  • copy_yuan
  • copy_yuan
  • 2016年07月11日 16:41
  • 18364
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android之设置控件的阴影
举报原因:
原因补充:

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