Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱
MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com

layer-list shape drawable 层叠背景 MD

目录

layer-list 简介

参考

layer-list 是啥

简单理解，layer 是层，list 是列表，那么 layer-list 就是层列表的意思。但是，是什么层列表呢？ 其实 layer-list 是用来创建 LayerDrawable 的，LayerDrawable 是 DrawableResource 的一种， 所以，layer-list 创建出来的图层列表，也就是一个 drawable 图形。

因 layer-list 创建出来的也是 drawable 资源，所以，同 shape selector 一样，都是定义在 res 中的 drawable 文件夹中，也是一个 xml 文件。使用的时候，同shape selector , 布局文件中使用 @drawable/ xxx 引用, 代码中使用 R.drawable.xxx 引用。

layer-list 的大致原理

layer-list 的大致原理类似RelativeLayout或者FrameLayout ，也是一层层的叠加 ，后添加的会覆盖先添加的。在 layer-list 中可以通过控制后添加图层距离最底部图层的上下左右的四个边距、旋转等属性，得到不同的显示效果。

案例1

单一边线效果

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape>

            <solid android:color="#f00"/>

        </shape>

    </item>

    <item android:top="1dp">

        <shape>

            <solid android:color="#fff"/>

        </shape>

    </item>

</layer-list>

双边线效果

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape>

            <solid android:color="#f00"/>

        </shape>

    </item>

    <item

        android:bottom="1dp"

        android:top="1dp">

        <shape>

            <solid android:color="#fff"/>

        </shape>

    </item>

</layer-list>

阴影效果

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:left="3dp"

        android:top="6dp">

        <shape>

            <solid android:color="#b4b5b6"/>

        </shape>

    </item>

    <item

        android:bottom="6dp"

        android:right="3dp">

        <shape>

            <solid android:color="#fff"/>

        </shape>

    </item>

</layer-list>

选择器效果

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">

        <layer-list>

            <item>

                <color android:color="#f00"/>

            </item>

            <item android:bottom="2dp">

                <color android:color="#fff"/>

            </item>

        </layer-list>

    </item>

    <item>

        <layer-list>

            <item>

                <color android:color="#f00"/>

            </item>

            <item android:bottom="1dp">

                <color android:color="#fff"/>

            </item>

        </layer-list>

    </item>

</selector>

案例2

圆环效果

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape

            android:dither="true"

            android:shape="oval">

            <solid android:color="#00f"/>

            <stroke

                android:width="1dp"

                android:color="#fff"/>

        </shape>

    </item>

    <item

        android:bottom="10dp"

        android:left="10dp"

        android:right="10dp"

        android:top="10dp">

        <shape

            android:shape="oval">

            <solid android:color="#0f0"/>

            <size

                android:width="30dp"

                android:height="30dp"/>

            <stroke

                android:width="1dp"

                android:color="#fff"/>

        </shape>

    </item>

    <item

        android:bottom="20dp"

        android:left="20dp"

        android:right="20dp"

        android:top="20dp">

        <shape

            android:shape="oval">

            <solid android:color="#f00"/>

            <size

                android:width="30dp"

                android:height="30dp"/>

            <stroke

                android:width="1dp"

                android:color="#fff"/>

        </shape>

    </item>

</layer-list>

层叠效果

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:left="20dp"

        android:right="20dp">

        <shape android:shape="rectangle">

            <solid android:color="#ff0"/>

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp"/>

        </shape>

    </item>

    <item

        android:left="10dp"

        android:right="10dp"

        android:top="10dp">

        <shape android:shape="rectangle">

            <solid android:color="#0ff"/>

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp"/>

        </shape>

    </item>

    <item android:top="20dp">

        <shape android:shape="rectangle">

            <solid android:color="#f00"/>

            <corners

                android:bottomLeftRadius="5dp"

                android:bottomRightRadius="5dp"

                android:topLeftRadius="5dp"

                android:topRightRadius="5dp"/>

        </shape>

    </item>

</layer-list>

案例3

最后一个bitmap

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--不设置 gravity=center 时会自动缩放-->

    <item>

        <shape>

            <solid android:color="#1000"/>

        </shape>

    </item>

    <item android:gravity="center">

        <bitmap android:src="@drawable/icon5"/>

    </item>

    <item android:gravity="left|top">

        <bitmap android:src="@drawable/icon1"/>

    </item>

    <item android:gravity="right|top">

        <bitmap android:src="@drawable/icon2"/>

    </item>

    <item android:gravity="right|bottom">

        <bitmap android:src="@drawable/icon3"/>

    </item>

    <item android:gravity="left|bottom">

        <bitmap android:src="@drawable/icon4"/>

    </item>

</layer-list>

最后一个 drawable

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--不设置 gravity=center 时会自动缩放-->

    <item>

        <shape>

            <solid android:color="#1000"></solid>

        </shape>

    </item>

    <item

        android:bottom="15sp"

        android:drawable="@drawable/icon5"

        android:gravity="center"

        android:left="15sp"

        android:right="15sp"

        android:top="15sp"></item>

    <item

        android:bottom="30dp"

        android:drawable="@drawable/icon1"

        android:gravity="center"

        android:right="30dp"></item>

    <item

        android:bottom="30dp"

        android:drawable="@drawable/icon2"

        android:gravity="center"

        android:left="30dp"></item>

    <item

        android:drawable="@drawable/icon3"

        android:gravity="center"

        android:left="30dp"

        android:top="30dp"></item>

    <item

        android:drawable="@drawable/icon4"

        android:gravity="center"

        android:right="30dp"

        android:top="30dp"></item>

</layer-list>

2018-8-8

附件列表

layer-list shape drawable 层叠背景 MD的更多相关文章

  1. ANDROID SHAPE画圆形背景_ANDROID实现角标布局

    ANDROID SHAPE画圆形背景_ANDROID实现角标布局 <?xml version="1.0" encoding="UTF-8"?> &l ...

  2. Android Drawable - Shape Drawable使用详解（附图）

    TIPS shape图形 –简单介绍 shape图形 –如何画? shape图形 –参数详细解析 shape图形 –如何用? shape图形 –实际开发应用场景 shape图形简单介绍 用xml实现一 ...

  3. Shape Drawable Resources

    1,示例 它们的代码如下: shape_oval.xml <?xml version="1.0" encoding="utf-8"?> <sh ...

  4. Android Drawable系列（1）：自定义背景以及注意事项

    0. Shape自身属性 android:shape=["rectangle" | "oval" | "line" | "ring ...

  5. Android - Resource 之 Drawable小结

    本篇直接选择性地翻译官方开发指南 ============================= Drawable有十种类型,如下 (1) - Bitmap file:这个简单,也可以用xml来更详细的定 ...

  6. [转]android中drawable资源的解释及例子

    原文链接:         http://blog.csdn.net/wode_dream/article/details/38584693 文章中的内容参考Dev Guide中的Drawable R ...

  7. 安卓权威编程指南-笔记（第21章 XML drawable）

    在Andorid的世界里,凡事要在屏幕上绘制的东西都可以叫drawable,比如抽象图形,Drawable的子类,位图图形等,我们之前用来封装图片的BitmapDrawable就是一种drawable ...

  8. Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角，渐变实现)

    Android GradientDrawable使用优势: 1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环) 2. 快速实现一些圆角,渐变,阴影等效果 3. 代替图片设置为View的背景 4. ...

  9. Android 中shape的使用(圆角矩形)

    一.在res/drawable文件夹下创建一个名为gradient_box的xml文件: <?xml version="1.0" encoding="utf-8&q ...

随机推荐

  1. 在JavaScript中什么时候使用==是正确的？

    在JavaScript中什么情况下使用==是正确的?简而言之:没有.这篇文章来看五种情况下总是使用===,并且解释为什么不用==. JavaScript有两种操作符用来比较两个值是否相等 [1]: 严 ...

  2. 【10.31校内测试】【组合数学】【记忆化搜索/DP】【多起点多终点二进制拆位Spfa】

    Solution 注意取模!!! Code #include<bits/stdc++.h> #define mod 1000000007 #define LL long long usin ...

  3. Codeforces Round #258 (Div. 2) E. Devu and Flowers 容斥

    E. Devu and Flowers 题目连接: http://codeforces.com/contest/451/problem/E Description Devu wants to deco ...

  4. input文字颜色、光标颜色

    <input type="text" placeholder="输入框"> input{ color: red;/*输入文字.光标颜色*/ -web ...

  5. 阻止新的csproj工程的dll引用继承

    VisualStudio传统的csproj工程中,引用是没有继承功能的.例如,对于如下一个引用关系 App引用Assembly 1 Assembly 1引用Assembly 2 程序App在没有添加A ...

  6. MDK5 and STM32Cube

    D:\Workspace\........\RTE\Device>STM32CubeMX.exe -s project.script -tpl_path C:\Keil5\ARM\Pack\Ke ...

  7. java之jvm学习笔记十三(jvm基本结构) 通俗易懂的JVM 文件，没有之一

    http://blog.csdn.net/yfqnihao/article/details/8289363

  8. Android笔记之 网络http通信

    0.在认识HTTP前先认识URL 在我们认识HTTP之前,有必要先弄清楚URL的组成,比如: http://www.******.com/china/index.htm 它的含义例如以下: 1. ht ...

  9. 教程：如何手动安装Xamarin与Xamarin for VisualStudio

    [2016/4/17更新:如果你下载后发现仍然需要付费才能编译Android/iOS APP,请到文章最下面更新Xamarin for VS和Xamarin Studio到最新的版本.Build201 ...

  10. 在ASP.NET MVC下实现树形导航菜单

    在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...