最近某个模块的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. Qt中修改QtoolTip的样式

    Qt中的QtoolTip有几个需要注意的: 1.不能直在堆或栈中生成QToolTip对象.因为其构造函数为私有.2.从widget获取的tooltip不是tooltip对象,而是tooltip中的文本 ...

  2. (HTML)A标签伪元素选择器的继承关系

    ①如果a:link{}也存在,那么不管a{}放到哪里,a{}和a:link{}冲突的属性都会采用a:link{}的,不冲突的属性若存在a{}中,会被a:link{}. a:visited{} .a:h ...

  3. 4 Template层 -模板继承

    1.模板继承 模板继承可以减少页面内容的重复定义,实现页面内容的重用 典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板 ...

  4. 3224: Tyvj 1728 普通平衡树(finger tree)

    3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 19122  Solved: 8359[Submit][St ...

  5. Python中str、list、numpy分片操作

    在Python里,像字符串(str).列表(list).元组(tupple)和这类序列类型都支持切片操作 对对象切片,s是一个字符串,可以通过类似数组索引的方式获取字符串中的字符,同时也可以用s[a: ...

  6. 【Jump Game II 】cpp

    题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...

  7. Beamer模板

    普通模板: \documentclass[UTF-8]{beamer} \usepackage{ctex} \usetheme{CambridgeUS} \begin{document} \secti ...

  8. ArrayList以及Map小练

    ArrayList常用方法 public static void main(String[] args) { List list = new ArrayList(); List list1 = new ...

  9. MongoDB用PCRE正则表达式

    介绍 下面说明 PCRE 所支持的正则表达式的语法和语义.Perl 文档和很多其它书中也解说了正则表达式,有的书中有很多例子.Jeffrey Friedl 写的“Mastering Regular E ...

  10. 性能测试工具—Jmeter

    Jmeter视频教程: 在我要自学网搜索:关键字即可