Android样式的开发:layer-list篇

上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景。但是,如果只提供一张图,会怎么样呢?比如,中间的Tab背景红色底线的像素高度为4px,那么,在mdpi设备上显示会符合预期,在hdpi设备上显示时会细了一点点,在xhdpi设备上显示时会再细一点,在xxhdpi上显示时又细了,在xxxhdpi上显示时则更细了。因为在xxxhdpi上,1dp=4px,所以,4px的图,在xxxhdpi设备上显示时,就只剩下1dp了。所以,为了适配好各种分辨率,必须提供相应的多套图片。如果去查看android的res源码资源,也会发现,像这种Tab的背景点九图,也根据不同分辨率尺寸提供了不同尺寸的点九图片。

但是,在这个demo里,都没有用到任何实际的图片资源,都是用shape、selector,以及本篇要讲解的layer-list完成的。

使用layer-list可以将多个drawable按照顺序层叠在一起显示,像上图中的Tab,是由一个红色的层加一个白色的层叠在一起显示的结果,阴影的圆角矩形则是由一个灰色的圆角矩形叠加上一个白色的圆角矩形。先看下代码吧,以下是Tab背景的代码:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一种加载方式 -->
    <!--<item android:drawable="@drawable/bg_tab_selected" android:state_checked="true" />-->
    <!-- 第二种加载方式 -->
    <item android:state_checked="true">
        <layer-list>
            <!-- 红色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- 红色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="1dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
</selector>

以下是带阴影的圆角矩形:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 灰色阴影 -->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 白色前景 -->
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

从上面的示例代码可以看到,layer-list可以作为根节点,也可以作为selector中item的子节点。layer-list可以添加多个item子节点,每个item子节点对应一个drawable资源,按照item从上到下的顺序叠加在一起,再通过设置每个item的偏移量就可以看到阴影等效果了。layer-list的item可以通过下面四个属性设置偏移量:

  • android:top 顶部的偏移量
  • android:bottom 底部的偏移量
  • android:left 左边的偏移量
  • android:right 右边的偏移量

这四个偏移量和控件的margin设置差不多,都是外间距的效果。如何不设置偏移量,前面的图层就完全挡住了后面的图层,从而也看不到后面的图层效果了。比如上面的例子,Tab背景中的白色背景设置了android:bottom之后才能看到一点红色背景。那么如果偏移量设为负值会怎么样呢?经过验证,偏移超出的部分会被截掉而看不到,不信可以自己试一下。有时候这很有用,比如当我想显示一个半圆的时候。

另外,关于item的用法,也做下总结:

  1. 根节点不同时,可设置的属性是会不同的,比如selector下,可以设置一些状态属性,而在layer-list下,可以设置偏移量;
  2. 就算父节点同样是selector,放在drawable目录和放在color目录下可用的属性也会不同,比如drawable目录下可用的属性为android:drawable,在color目录下可用的属性为android:color;
  3. item的子节点可以为任何类型的drawable类标签,除了上面例子中的shape、color、layer-list,也可以是selector,还有其他没讲过的bitmap、clip、scale、inset、transition、rotate、animated-rotate、lever-list等等。

结尾

layer-list篇就讲到这里了,示例代码也已经更新放上github,地址:
https://github.com/keeganlee/kstyle.git

时间: 2024-10-09 01:52:12

Android样式的开发:layer-list篇的相关文章

[转]Android样式的开发:shape篇

转载自Keegan小钢原文链接:http://keeganlee.me/post/android/20150830 Android样式的开发:shape篇Android样式的开发:selector篇Android样式的开发:layer-list篇Android样式的开发:drawable汇总篇Android样式的开发:View Animation篇Android样式的开发:Property Animation篇Android样式的开发:Style篇 一个应用,应该保持一套统一的样式,包括Butt

Android样式的开发:shape篇

转载请注明:转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/android/20150830微信订阅号:keeganlee_me写于2015-08-30 Android样式的开发:shape篇Android样式的开发:selector篇Android样式的开发:layer-list篇Android样式的开发:drawable汇总篇Android样式的开发:View Animation篇Android样式的开发:Property Animation篇Andr

Android样式的开发

Android样式的开发:shape篇 Android样式的开发:selector篇 Android样式的开发:layer-list篇 Android样式的开发:drawable汇总篇 Android样式的开发:View Animation篇 Android样式的开发:Property Animation篇 Android样式的开发:Style篇   原文地址:https://www.cnblogs.com/vera-bhp/p/8336219.html

Android样式的开发:Style篇

前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式.哪些该定义成统一的样式呢?举几个例子吧: 每个页面标题栏的标题基本会有一样的字体大小.颜色.对齐方式.内间距.外间距等,这就可以定义成样式: 很多按钮也都使用一致的背景.内间距.文字颜色.文字大小.文字的对齐方式等,这也可以定义成样式: 网络加载的进度条基本也都是一样的,同样可以定义成样式: 不喜欢系统的弹出框样式,那也可以自定义样式. 样式的定义 Android的样式一般定义在res/values/styles.xml文

Android样式的开发:selector篇

上一篇详细讲了shape的用法,讲解了怎么用shape自定义矩形.圆形.线形和环形,以及有哪些需要注意的地方.不过,shape只能定义单一的形状,而实际应用中,很多地方比如按钮.Tab.ListItem等都是不同状态有不同的展示形状.举个例子,一个按钮的背景,默认时是一个形状,按下时是一个形状,不可操作时又是另一个形状.有时候,不同状态下改变的不只是背景.图片等,文字颜色也会相应改变.而要处理这些不同状态下展示什么的问题,就要用selector来实现了. selector标签,可以添加一个或多个

Android设计和开发系列第一篇:Notifications通知(Develop)

Develop篇 Building a Notification PREVIOUSNEXT THIS LESSON TEACHES YOU TO Create a Notification Builder Define the Notification's Action Set the Notification's Click Behavior Issue the Notification YOU SHOULD ALSO READ Notifications API Guide Intents

Android设计和开发系列第一篇:Notifications通知(Design)

Design篇 Notifications DEVELOPER DOCS Notifying the User NOTIFICATIONS IN ANDROID 4.4 AND LOWER VIDEO DevBytes: Notifications in the Android L Developer Preview The notification system allows users to keep informed about relevant and timely events in

Android设计和开发系列第二篇:Action Bar(Develop—Training)

Adding the Action Bar GET STARTED DEPENDENCIES AND PREREQUISITES Android 2.1 or higher YOU SHOULD ALSO READ Action Bar Implementing Effective Navigation DESIGN GUIDE Action Bar The action bar is one of the most important design elements you can imple

Android设计和开发系列第二篇:Action Bar(Design)

Action Bar The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app. It provides several key functions: Makes important actions prominent and accessible in a predictable way (such as