<三>定义阴影与裁剪视图_android:elevation="24dp-程序员宅基地

技术标签： material-d  剪裁视图  Material Design学习笔记  Android  阴影  

http://developer.android.com/intl/zh-cn/training/material/shadows-clipping.html

Material Design为 UI 元素引入高度。视图的高度将帮助用户更好的了解元素间的层次关系，而阴影效果正是高度这一属性(View的 Z 属性)在视觉上的表现。

指定视图高度

视图的 Z 值包含两个部分：

  • Elevation：静态属性。
  • Translation：用于动画的动态属性。

Z = elevation + translationZ
这里写图片描述
图 1 - 不同视图高度的阴影。

  1. 设置视图的高度

    使用 android:elevation属性，或者在代码使用 View.setElevation() 方法。如果要设置视图Translation，可以使用使用 View.setTranslationZ() 方法。

  2. 设置视图阴影变化的动画

    全新的 ViewPropertyAnimator.z() 与 ViewPropertyAnimator.translationZ() 方法让您能够轻松地为视图高度添加动画。 详情: ViewPropertyAnimator。
    也可使用 StateListAnimator 设置动画。详情： Animate View State Changes.

  3. Z 值以 dp（密度独立像素）为单位度量。

定制视图阴影与轮廓

视图的背景图片的边界将决定其阴影的默认形状。（轮廓代表图形对象的外形并定义触摸反馈的波纹区域。）

  1. xml文件中定义示例：
<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

背景图片定义成一个圆角矩形(res/drawable/myrect.xml)：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

视图将投射一个带有圆角的阴影，因为背景图片形状（圆角矩形）决定了视图（TextView）的轮廓。
2. 如果要在代码中的自定义视图轮廓，则可以通过以下几个步骤：

        1. 继承 ViewOutlineProvider 类。
        2. 复写 getOutline() 方法。
        3. 利用 View.setOutlineProvider() 方法为视图指定新的轮廓。
        4. （通常需要配合剪裁视图一起使用，具体见下面的介绍）

可以使用 Outline 类别中的方法创建带有圆角的椭圆形或矩形轮廓。视图的默认轮廓为其背景轮廓。 如果要防止视图投射阴影，请将其outline provider设置为 null。
3. 代码示例：

public class MainActivity extends Activity {
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout. activity_main);

        TextView texView2 = (TextView)findViewById(R.id. myview2);

        //设置阴影轮廓
        texView2.setOutlineProvider( new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
               //圆形轮廓
                outline.setOval(0,0 ,view.getMeasuredWidth(), view.getMeasuredHeight());
            }
        });
        //将视图按照Outline（轮廓）剪裁
        texView2.setClipToOutline( true);
    }
}

Demo截图：
这里写图片描述
TextView1: 未经过处理（用于效果对比，视图阴影效果皆为：android:elevation=”24dp”）
TextView2: 参照以上方法在xml中设置轮廓效果（由demo中看，xml中设置的阴影效果似乎存在问题）
TextView3: 使用示例代码进行设置轮廓及剪裁视图后的效果。（这里一定要对视图进行剪裁（texView2.setClipToOutline(true );），否则只有阴影轮廓是圆形而TextView仍为正方形）

裁剪视图

裁剪视图即可以改变视图形状。可以通过 View.setClipToOutline()方法或 android:clipToOutline 属性将视图裁剪至其轮廓的形状。但是据Outline.canClip()方法可知，仅有矩形、圆形和圆角矩形轮廓支持如此裁剪。
（Note：裁剪视图是一个成本高昂的操作，因此尽量避免为剪裁的视图添加动画效果。 如果真有这种需求，可以参照Reveal Effect。）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cai_iac/article/details/50412758

智能推荐

代理（Proxy）_servletrequest servlet = (servletrequest)proxy.new-程序员宅基地

文章浏览阅读659次。代理（Proxy） 对指定接口的某一个方法进行功能扩展，可以使用代理代理API|--java.lang.reflect.Proxy static Object newProxyInstance( ClassLoader loader, 当前使用的类加载器 Class[] interfaces, 目标对象实现的接口类型 Inv_servletrequest servlet = (servletrequest)proxy.newproxyinstance

layui 模板引擎的使用_layui模板引擎怎么用-程序员宅基地

文章浏览阅读994次。1，创建视图容器<divid="view"></div>2，建立试图模板<scriptid="demo"type="text/html"><divclass="page"><divclass="col-md-2">..._layui模板引擎怎么用

jetty部署war包-程序员宅基地

文章浏览阅读2.4k次。与tomcat类似，直接拷贝war到webapps目录即可，不同的是解压文件不会存放到webapps下。需要做一些额外配置，才能找到正确解压目录参考资料：http://dev.eclipse.org/mhonarc/lists/jetty-users/msg01998.htmlQ: How to change the extracted directory?A: You ha..._jetty 外部文件放入war包

移花接木大法：新型“白利用”华晨远控木马分析-程序员宅基地

文章浏览阅读310次。360安全卫士 · 2015/05/28 5:110x00 前言“白利用”是木马对抗主动防御类软件的一种常用手法。国内较早一批“白利用”木马是通过系统文件rundll32.exe启动一个木马dll文件，之后又发展出劫持合法软件的dll组件来加载木马dll的攻击方式。随着安全软件对“白利用”的防御机制日益完善，木马也在花样翻新。近期，360QVM引擎团队发现“华晨同步专家”远控木马家族采用了比较另类..._白利用

WebSocket 与 Socket.IO-程序员宅基地

文章浏览阅读309次。WebSocket 与 Socket.IO最近小组在做一个智慧交通的项目，其中有个 “分享屏幕” 的功能，即一个 client 能够将自己当前的页面分享到另外一个 client，针对这个需求，我们利用了 WebSocket 技术，具体说是 Socket.IO。1. 什么是 WebSocket提到 WebSocket，我首先会想到 “..._websocket 与 socket.io 发送 handshake.auth

Mybatis学习笔记1_避免了几乎所有的 **jdbc 代码和手动设置参数**以及获取-程序员宅基地

文章浏览阅读661次。1.Mybatis定义：MyBatis 是一款优秀的 持久层框架MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集的过程MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 实体类 【Plain Old，Java Objects,普通的 Java对象】映射成数据库中的记录。mybatis – MyBatis 3 | 简介http://www.mybatis.org/mybatis-3/zh/index.html2.持久化持久_避免了几乎所有的 **jdbc 代码和手动设置参数**以及获取

随便推点

Exchange Server 2013安装部署初体验-程序员宅基地

文章浏览阅读72次。继上一次完成了Exchange 2013的先觉条件准备后，下面来完成在单台服务器上的安装部署，Exchange 2013的安装过程更为简化，可在图形界面操作，也可通过命令行来执行安装，过程都非常简单，下面来看看安装过程。一、安装部署Exchange Server 20131.检查更新，我们这是在测试环境中，为了节省时间就不进行更新检查了。2.开始..._exchange2019全球通讯簿分组

mp4v2封装函数H264中 MP4WriteSample参数问题_mp4v2中mp4writesample是异步的的吗-程序员宅基地

文章浏览阅读6.3k次，点赞4次，收藏3次。Ottavio Campana “question about MP4AddH264VideoTrack。What's the meaning of the profile_compat and sampleLenFieldSizeMinusOne fields?”Jeremy Noring"Usually an NALU is prefixed by the start_mp4v2中mp4writesample是异步的的吗

计算机跨考学校排名,全国33所计算机名校跨考难度系数排名-程序员宅基地

文章浏览阅读2.2k次。计算机专业作为每年研究生入学考试中的热门专业，其报考难度相对较大，但是在不同的高校难度却也有很大的差异，高校间报名录取比甚至有几十个百分点的差距！为帮助广大考生避开竞争激烈的热门高校，结合自身实力、专业排名、高校综合实力排名、最低分数线等因素综合考虑后能够更科学地确定自己所要报考的高校，希望对2014年将来报考计算机专业的同学有所帮助！关于计算机专业考研学校选择的问题一、下面的资料是来自一个博客计..._跨考计算机通过率高的学校

如何用python画一个五角星-程序员宅基地

文章浏览阅读542次。你可以用Python中的Turtle模块来画一个五角星：1. 导入Turtle模块： import turtle2. 初始化Turtle： myTurtle = turtle.Turtle()3. 设置画笔颜色： myTurtle.color("red")4. 设置画笔粗细： myTurtle.width(2)5. 画出五角星： myTurtle.forward(100) ..._python画五角星坑货2

java jmenu 监听_JAVA Swing 如何监听JMenuItem下拉菜单，实现相应功能？-程序员宅基地

文章浏览阅读288次。JAVASwing如何监听JMenuItem下拉菜单，实现相应功能？0我正在做一个学生信息管理系统，这是其中的一个菜单代码：public class MainGUI extends JFrame implements ActionListener{public MainGUI(){super("学生信息管理系统");JMenu backMenu = new JMenu("返回主界面(B)");..._swing可以监控到jmenu被点开吗

pon网络_pon网络的通信终端-程序员宅基地

文章浏览阅读2.1k次。pon网络（pon是一种点到多点结构的无源光网络）pon网络注组成光线路终端 olt光分配网络 odn光网络单元/终端 onu/ont1，电信应用场景 FTTx FTTMFTTx 解决方案覆盖FTTH,FTTB,FTTc, FTTo等建设场景，还能提供基站专线接入在内的高宽带，高可靠，高安全的全业务接入。FTTx解决方案针对不同的场景提供多业务接入服务，主要提供高带宽IPTv业务，配合业务批发模式下的open access network接入，高速上网业务既基站，企业专线接入，企_pon网络的通信终端

推荐文章

热门文章

相关标签