最近某个模块的UI,设计想要卡片式阴影效果。之前查阅过资料,用传统的xml方式作为布局的background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 阴影图片,android:left表示阴影图片左边到背景图片左边的距离
android:top表示阴影图片上边到背景图片上边的距离-->
<item android:left="5dp"
android:top="5dp">
<shape>
<corners android:radius="25dp"/>
<solid android:color="#60000000"/>
</shape>
</item>
<!-- 背景图片,android:right表示阴影图片右边到背景图片右边的距离
android:bottom表示阴影图片下边到背景图片下边的距离-->
<item android:bottom="5dp"
android:right="5dp">
<shape>
<corners android:radius="25dp"/>
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>

  但是这样有一个缺陷,细看就会发现这个阴影是实边的,没有虚化的效果,影响用户体验,非设计师想要的UI效果。

所以换第二种方法,改用MaterialDesign设计理念的CardView实现。CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包。

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/v_margin_top"
app:cardCornerRadius="4dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<---你的布局---> </android.support.v7.widget.CardView>

 以下是CardView的一些常用属性:

> 1、android:cardCornerRadius 在xml文件中设置card圆角的大小 

> 2、CardView.setRadius在代码中设置card圆角的大小 

> 3、android:cardBackgroundColor 在xml文件中设置card背景颜色

> 4、card_view:cardElevation在xml文件中设置阴影的大小 

> 5、card_view:cardMaxElevation 在xml文件中设置阴影最大高度

> 6、card_view:cardCornerRadius 在xml文件中设置卡片的圆角大小

> 7、card_view:contentPadding 在xml文件中设置卡片内容于边距的间隔

> 8、card_view:contentPaddingBottom 在xml文件中设置卡片内容于下边距的间隔

> 9、card_view:contentPaddingTop 在xml文件中设置卡片内容于上边距的间隔

> 10、card_view:contentPaddingLeft 在xml文件中设置卡片内容于左边距的间隔

> 11、card_view:contentPaddingRight 在xml文件中设置卡片内容于右边距的间隔

> 12、card_view:contentPaddingStart 在xml文件中设置卡片内容于边距的间隔起始

> 13、card_view:contentPaddingEnd 在xml文件中设置卡片内容于边距的间隔终止

> 14、card_view:cardUseCompatPadding 在xml文件中设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式

> 15、card_view:cardPreventCornerOverlap 在xml文件中设置内边距,在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠
 

  需要注意的是cardElevation设置好阴影后相当于为布局上下左右增加了margin,所以写一些列表式布局时要注意修改列表间距。

By  LiYing



Android布局实现阴影效果的更多相关文章

  1. 【转】在Android布局中使用include和merge标签

    内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...

  2. Android成长日记-Android布局优化

    Android常用布局 1. LinearLayout(线性布局) 2. RelativeLayout(相对布局) 3. TableLayout(表格布局) 4. AbsoluteLayou(绝对布局 ...

  3. 【转】Android布局优化之ViewStub

    ViewStub是Android布局优化中一个很不错的标签/控件,直接继承自View.虽然Android开发人员基本上都听说过,但是真正用的可能不多. ViewStub可以理解成一个非常轻量级的Vie ...

  4. Android 布局之LinearLayout

    Android 布局之LinearLayout 1 LinearLayout简介 LinearLayout是线程布局.它包括2个方向(android:orientation):“水平”(horizon ...

  5. Android 布局之RelativeLayout

    Android 布局之RelativeLayout 1 RelativeLayout简介 RelativeLayout是相对布局. RelativeLayout布局属性 1.1 与parent相对的属 ...

  6. Android 布局之TableLayout

    Android 布局之TableLayout 1 TableLayout简介 TableLayout是表格布局.TableLayout 可设置的属性包括全局属性及单元格属性. 1.1 全局属性 有以下 ...

  7. Android 布局之FrameLayout

    Android 布局之FrameLayout 1 FrameLayout简介 对于FrameLayout,官方介绍是:FrameLayout is designed to block out an a ...

  8. Android 布局之GridLayout

    Android 布局之GridLayout 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件. GridLayout的继承关系如下:java.la ...

  9. Xamarin Android布局文件没有智能提示

    Xamarin Android布局文件没有智能提示 在Visual Studio 2015中,Android项目的Main.axml文件没有智能提示,不便于布局文件的编写.解决办法:(1)从Xamar ...

随机推荐

  1. 684. Redundant Connection

    https://leetcode.com/problems/redundant-connection/description/ Use map to do Union Find. class Solu ...

  2. Leetcode 515. 在每个树行中找最大值

    题目链接 https://leetcode-cn.com/problems/find-largest-value-in-each-tree-row/description/ 题目描述 您需要在二叉树的 ...

  3. [原]sencha touch之表单(login demo)

    现在来说说sencha touch中的表单,举个简单的login的例子,相关的说明我都放在了注释中,看下面代码 Ext.application({ id:'itKingApp', launch:fun ...

  4. 4 Template层-CSRF

    1.csrf 全称Cross Site Request Forgery,跨站请求伪造 某些恶意网站上包含链接.表单按钮或者JavaScript,它们会利用登录过的用户在浏览器中的认证信息试图在你的网站 ...

  5. 3 View视图 URLconf

    1.视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: 2 准 ...

  6. 谈一谈Tomcat中webSocket,Jetty WebSocket 和Spring WebSocket以及github中Java-WebSocket.jar分别对Socket协议的角色定位以及效果的不同点;

    开局先上一张图:(http://tomcat.apache.org/tomcat-7.0-doc/web-socket-howto.html)   当前截图来自于apache的tomcat官网(问:为 ...

  7. vue-router2.0组件复用

    在使用vue-router1.x时我们知道对于路由 a/b/c  和  a/b/d ,  组件a和组件b将会复用 .具体可以参考:https://github.com/vuejs/vue-router ...

  8. 深入浅出Hyper-V网络虚拟化(序)

    服务器虚拟化已经越来越普及,很多企业也都在尝试着将现有业务转换成虚拟化的方式来运行,即在一个物理服务器上虚拟出多个实例,而每个实例彼此隔离,就好像在使用一台真实主机一样:网络虚拟化也同样如此,在同一条 ...

  9. python - 接口自动化测试 - ReadConfig - 读取配置文件封装

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: read_config.py @ide: PyCharm ...

  10. NodeJs爬虫抓取古代典籍,共计16000个页面心得体会总结及项目分享

    项目技术细节 项目大量用到了 ES7 的async 函数, 更直观的反应程序了的流程.为了方便,在对数据遍历的过程中直接使用了著名的async这个库,所以不可避免的还是用到了回调promise ,因为 ...