Android布局实现阴影效果
最近某个模块的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布局实现阴影效果的更多相关文章
- 【转】在Android布局中使用include和merge标签
内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...
- Android成长日记-Android布局优化
Android常用布局 1. LinearLayout(线性布局) 2. RelativeLayout(相对布局) 3. TableLayout(表格布局) 4. AbsoluteLayou(绝对布局 ...
- 【转】Android布局优化之ViewStub
ViewStub是Android布局优化中一个很不错的标签/控件,直接继承自View.虽然Android开发人员基本上都听说过,但是真正用的可能不多. ViewStub可以理解成一个非常轻量级的Vie ...
- Android 布局之LinearLayout
Android 布局之LinearLayout 1 LinearLayout简介 LinearLayout是线程布局.它包括2个方向(android:orientation):“水平”(horizon ...
- Android 布局之RelativeLayout
Android 布局之RelativeLayout 1 RelativeLayout简介 RelativeLayout是相对布局. RelativeLayout布局属性 1.1 与parent相对的属 ...
- Android 布局之TableLayout
Android 布局之TableLayout 1 TableLayout简介 TableLayout是表格布局.TableLayout 可设置的属性包括全局属性及单元格属性. 1.1 全局属性 有以下 ...
- Android 布局之FrameLayout
Android 布局之FrameLayout 1 FrameLayout简介 对于FrameLayout,官方介绍是:FrameLayout is designed to block out an a ...
- Android 布局之GridLayout
Android 布局之GridLayout 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件. GridLayout的继承关系如下:java.la ...
- Xamarin Android布局文件没有智能提示
Xamarin Android布局文件没有智能提示 在Visual Studio 2015中,Android项目的Main.axml文件没有智能提示,不便于布局文件的编写.解决办法:(1)从Xamar ...
随机推荐
- 684. Redundant Connection
https://leetcode.com/problems/redundant-connection/description/ Use map to do Union Find. class Solu ...
- Leetcode 515. 在每个树行中找最大值
题目链接 https://leetcode-cn.com/problems/find-largest-value-in-each-tree-row/description/ 题目描述 您需要在二叉树的 ...
- [原]sencha touch之表单(login demo)
现在来说说sencha touch中的表单,举个简单的login的例子,相关的说明我都放在了注释中,看下面代码 Ext.application({ id:'itKingApp', launch:fun ...
- 4 Template层-CSRF
1.csrf 全称Cross Site Request Forgery,跨站请求伪造 某些恶意网站上包含链接.表单按钮或者JavaScript,它们会利用登录过的用户在浏览器中的认证信息试图在你的网站 ...
- 3 View视图 URLconf
1.视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: 2 准 ...
- 谈一谈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官网(问:为 ...
- vue-router2.0组件复用
在使用vue-router1.x时我们知道对于路由 a/b/c 和 a/b/d , 组件a和组件b将会复用 .具体可以参考:https://github.com/vuejs/vue-router ...
- 深入浅出Hyper-V网络虚拟化(序)
服务器虚拟化已经越来越普及,很多企业也都在尝试着将现有业务转换成虚拟化的方式来运行,即在一个物理服务器上虚拟出多个实例,而每个实例彼此隔离,就好像在使用一台真实主机一样:网络虚拟化也同样如此,在同一条 ...
- python - 接口自动化测试 - ReadConfig - 读取配置文件封装
# -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: read_config.py @ide: PyCharm ...
- NodeJs爬虫抓取古代典籍,共计16000个页面心得体会总结及项目分享
项目技术细节 项目大量用到了 ES7 的async 函数, 更直观的反应程序了的流程.为了方便,在对数据遍历的过程中直接使用了著名的async这个库,所以不可避免的还是用到了回调promise ,因为 ...