Android图层妙用之layer-list的基本使用介绍(1)

最新推荐文章于 2024-06-17 09:47:08 发布

2401_84519907

最新推荐文章于 2024-06-17 09:47:08 发布

阅读量253

点赞数 3

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84519907/article/details/138309546

版权

程序员专栏收录该内容

187 篇文章 0 订阅

订阅专栏

使用 layer-list 图，设置为textView的背景


<TextView

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_marginTop="10dp"

        android:background="@drawable/doubleline"

        android:gravity="center"

        android:text="双边线效果"/>

3.3 效果3：阴影

效果图：

这里写图片描述

具体代码：

创建 layer-list


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

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



    <!--底层的左边距离上层左边3dp, 底层的顶部，距离上层的顶部6dp,如果不做这个控制，底层和上层的左侧和上侧会重合在一起-->

    <item android:left="3dp"

          android:top="6dp">

        <shape>

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

        </shape>

    </item>



    <!--上层的右边距离底层的右边3dp, 上层的底部距离底层的底部6dp-->

    <item android:bottom="6dp"

          android:right="3dp">

        <shape>

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

        </shape>

    </item>

</layer-list>

使用 layer-list 图


 <TextView

        android:layout_width="match_parent"

        android:layout_height="70dp"

        android:layout_marginTop="10dp"

        android:background="@drawable/shadow"

        android:gravity="center"

        android:text="阴影效果"/>

3.4 效果4 : 图片层叠

图片层叠的时候，有两种效果，一种是缩放后层叠，一种是不缩放的层叠。默认是缩放效果。具体效果以及实现代码如下：

效果图 1) : 带有缩放效果的

这里写图片描述

具体代码 1)：

创建 layer-list


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

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

    <!--默认缩放-->

    <item>

        <bitmap

            android:src="@drawable/ic_launcher"/>

    </item>



    <item android:left="35dp"

          android:top="35dp">

        <bitmap

            android:src="@drawable/ic_launcher"/>

    </item>



    <item android:left="70dp"

          android:top="70dp">

        <bitmap

            android:src="@drawable/ic_launcher"/>

    </item>

</layer-list>

或者也可以使用如下代码，实现缩放的叠加图：


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

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

    <!--这种方式拿到的是带有缩放的效果，即便给item 设置了gravity 并且从模拟器上看到的效果是不缩放的，但是真机上依旧是缩放的效果-->

    <item android:drawable="@drawable/ic_launcher">

    </item>

    <item android:drawable="@drawable/ic_launcher"

          android:left="45dp"

          android:top="45dp">

    </item>

    <item android:drawable="@drawable/ic_launcher"

          android:left="90dp"

          android:top="90dp">

    </item>

</layer-list>

使用 layer-list 图


  <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/overlay"

    />

效果图 2)：不带缩放效果的


注意： 

A. 不缩放的时候，必须在 item 节点中使用 bitmap 节点，并给 bitmap 设置 gravity=center ;

B. 虽然在实现缩放效果的时候，可以直接使用 item 中的 drawable属性，但实现不缩放的效果时，如果还用drawable 属性，即便给item 设置了gravity =center ，在真机上的效果依旧是缩放的。（但模拟器是不缩放的）

这里写图片描述

具体代码 2)：

创建 layer-list


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

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

    <!--不缩放-->

    <item>

        <bitmap

            android:gravity="center"

            android:src="@drawable/ic_launcher"/>

    </item>



    <item android:left="35dp"

          android:top="35dp">

        <bitmap android:gravity="center"

                android:src="@drawable/ic_launcher"/>

    </item>



    <item android:left="70dp"

          android:top="70dp">

        <bitmap android:gravity="center"

                android:src="@drawable/ic_launcher"/>

    </item>



</layer-list>

使用 layer-list 图


 <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/overlay"

    />

3.5 效果5 ：叠加旋转

效果图：

这里写图片描述

具体代码：

创建 layer-list


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

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



    <item>

        <rotate android:fromDegrees="-10" android:pivotX="0"

                android:pivotY="0">

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

        </rotate>

    </item>

    <item>

        <rotate android:fromDegrees="10" android:pivotX="0"

                android:pivotY="0">

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

        </rotate>

    </item>

    <item>

        <rotate android:fromDegrees="30" android:pivotX="0"

                android:pivotY="0">

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

        </rotate>

    </item>



</layer-list>

旋转的时候，只需要给出起始的角度（ fromdegress ）即可。

使用 layer-list 图


    <!--图片叠加并带旋转效果-->

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/rotate"/>

4. layer-list 的扩展使用

4.1.实现选择器的效果

主要使用组件：RadioGroup Selector layer-list

1). 效果图：

这里写图片描述

2). 具体代码

定义 selector 选择器

selector 的 item 节点中，直接嵌套 layer-list

当然也可以先写好layer-list ，然后再去引用


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

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

    <!--被选中时是4dp的底部边线-->

    <item android:state_checked="true">

        <layer-list>

            <item>

                <shape>

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

                </shape>

            </item>

            <item android:bottom="4dp">

                <shape>

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

                </shape>

            </item>

        </layer-list>

    </item>



    <!--未被选中的是2dp的底部边线-->

    <item>

        <layer-list>

            <item>

                <shape>

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

                </shape>

            </item>

            <item android:bottom="2dp">

                <shape>

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

                </shape>

            </item>

        </layer-list>

    </item>

</selector>

注意：

在上面的代码中，由于并没有具体的shape ，所以可以省略shape , 直接用 color , 简化后的代码如下：


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

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



    <!--被选中时是4dp的底部边线-->

    <item android:state_checked="true">

        <layer-list>

            <item>

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

            </item>

            <item android:bottom="5dp">

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

            </item>


#### **如何做好面试突击，规划学习方向？**

面试题集可以帮助你查漏补缺，有方向有针对性的学习，为之后进大厂做准备。但是如果你仅仅是看一遍，而不去学习和深究。那么这份面试题对你的帮助会很有限。最终还是要靠资深技术水平说话。

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。建议先制定学习计划，根据学习计划把知识点关联起来，形成一个系统化的知识体系。

学习方向很容易规划，但是如果只通过碎片化的学习，对自己的提升是很慢的。

同时我还搜集整理2020年字节跳动，以及腾讯，阿里，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含**知识脉络 + 分支细节**。

![image](https://img-blog.csdnimg.cn/img_convert/49103c13e5f98d42d234372324535cdd.webp?x-oss-process=image/format,png) 

在搭建这些技术框架的时候，还整理了系统的高级进阶教程，会比自己碎片化学习效果强太多。

![image](https://img-blog.csdnimg.cn/img_convert/9283ac306d2dbcba440b5df6b92bfe24.webp?x-oss-process=image/format,png) 

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

理2020年字节跳动，以及腾讯，阿里，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含**知识脉络 + 分支细节**。

[外链图片转存中...(img-gB9JMHz0-1714367380868)] 

在搭建这些技术框架的时候，还整理了系统的高级进阶教程，会比自己碎片化学习效果强太多。

[外链图片转存中...(img-6gtnS0GK-1714367380869)] 

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84519907

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android图层妙用之layer-list的基本使用介绍(1)

图片层叠的时候，有两种效果，一种是缩放后层叠，一种是不缩放的层叠。主要使用组件：RadioGroup Selector layer-list。旋转的时候，只需要给出起始的角度（ fromdegress ）即可。selector 的 item 节点中，直接嵌套 layer-list。当然也可以先写好layer-list ，然后再去引用。定义 selector 选择器。
复制链接

扫一扫