文档章节
Jenly的个人空间 工作日志
正文

Android之用layer-list，shape，selector画各种背景
转

Jenly
 Jenly 发布于 2016/09/18 15:37
字数 1211
阅读 340
收藏 0
评论 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理)>>>

1.Shape

 

简介

作用：XML中定义的几何形状

位置：res/drawable/文件的名称.xml

使用的方法：

 

Java代码中：R.drawable.fileName

XML中：android:background="@drawable/fileName" 

或：android:src="@drawable/fileName"

 

属性

<shape>  android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形，oval椭圆，line水平直线，ring环形

<shape>中子节点的常用属性：

<gradient>  渐变

android:startColor  

起始颜色

android:endColor  

结束颜色             

android:angle  

渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0；

android:type  

渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid >  填充

android:color  

填充的颜色

<stroke >描边

android:width 

描边的宽度

android:color 

描边的颜色

android:dashWidth

表示'-'横线的宽度

android:dashGap 

表示'-'横线之间的距离

<corners >圆角

android:radius  

圆角的半径 值越大角越圆

android:topRightRadius  

右上圆角半径

android:bottomLeftRadius 

右下圆角角半径

android:topLeftRadius 

左上圆角半径

android:bottomRightRadius 

左下圆角半径

<padding >填充

android:bottom="1.0dip" 

底部填充

android:left="1.0dip" 

左边填充

android:right="1.0dip" 

右边填充

android:top="0.0dip" 

上面填充

 

2.Selector

 

简介

根据不同的选定状态来定义不同的现实效果

分为四大属性：

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

android:state_enabled 是设置是否响应事件,指所有事件

另：

android:state_window_focused 默认时的背景图片

引用位置：res/drawable/fileName

使用的方法：

 

Java代码中：R.drawable.fileName

XML中：android:background="@drawable/fileName" 

或：android:src="@drawable/fileName"

 

3.layer-list

 

简介

作用：将多个item叠层

 

Java代码中：R.drawable.fileName

XML中：android:background="@drawable/fileName" 

或：android:src="@drawable/fileName"


说完了它们的基本用简介和属性，下面来直接列几个例子:

white_bg_solid.xml  画的是一个叠层后显示为：四个圆角的一张背景图

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!--第一层  连框颜色值 -->
    <item>
        <shape>
            <solid android:color="#B2B2B2" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
        </shape>
    </item>
    <!-- 第二层  主体背景颜色值 -->
    <item android:bottom="1dp">
        <shape>
            <solid android:color="@color/white" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
            <padding
                android:bottom="6dp"
                android:left="6dp"
                android:right="6dp"
                android:top="6dp" />
        </shape>
    </item>

</layer-list>


white_bg_solid_pressed.xml 跟上面的一样，只不过颜色变了，用来做点击色 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 连框颜色值 -->
    <item>
        <shape>
            <solid android:color="#B2B2B2" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item android:bottom="1dp">
        <shape>
            <solid android:color="#DCDCDC" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
            <padding
                android:bottom="6dp"
                android:left="6dp"
                android:right="6dp"
                android:top="6dp" />
        </shape>
    </item>

</layer-list>


white_bg_top_solid.xml 画的是叠层后显示为：上面两个角为圆角，下面两个直角的一张背景图 ，细节第三层的 android:bottom="0.7dp"(底边立体效果) 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


    <!-- 第一层 -->
    <item>
        <shape>
            <solid android:color="@color/white" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
        </shape>
    </item>
    <!-- 第二层 -->
    <item android:top="13dp">
        <shape>
            <solid android:color="@color/space_bg" />
        </shape>
    </item>
    <!-- 第三层 -->
    <item android:top="12dp"
        android:bottom="0.7dp">
        <shape>
            <solid android:color="@color/white" />
            <padding 
                android:left="6dp"
                android:top="6dp"
                android:right="6dp"
                android:bottom="6dp"/>
        </shape>
    </item>

</layer-list>


white_bg_bottom_solid.xml 画的是叠层后显示为：上面两个角为直角，下面为两个圆角的一张背景图 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 第一层 -->
    <item>
        <shape>
            <solid android:color="#B2B2B2" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
        </shape>
    </item>
    <!-- 第二层 -->
    <item android:bottom="12dp">
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>
    <!-- 第三层 主体背景颜色值 -->
    <item android:bottom="1dp">
        <shape>
            <solid android:color="@color/white" />
            <corners
                android:bottomLeftRadius="6dp"
                android:bottomRightRadius="6dp"
                android:topLeftRadius="6dp"
                android:topRightRadius="6dp" />
            <padding
                android:bottom="6dp"
                android:left="6dp"
                android:right="6dp"
                android:top="6dp" />
        </shape>
    </item>

</layer-list>

edit_text._layer.xml 画的是带有带有钩子的文本输入框背景图，类似于微信输入框的效果 

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <item>  
        <shape android:shape="rectangle" >  
            <solid android:color="@color/green" />  
        </shape>  
    </item>  
  
    <item android:bottom="6dp">  
        <shape android:shape="rectangle" >  
            <solid android:color="@color/white" />  
        </shape>  
    </item>  
  <!-- 第三层 通过叠层 左下右间距 画钩子 -->
    <item  
        android:bottom="1dp"  
        android:left="1dp"  
        android:right="1dp">  
        <shape android:shape="rectangle" >  
            <solid android:color="@color/white" />  
        </shape>  
    </item>  
  
</layer-list>


white_bg_solid_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true"	android:drawable="@drawable/white_bg_solid_pressed"/>
	<item android:drawable="@drawable/white_bg_solid"/>
</selector>


最终测试布局

test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/space_bg" >
    
    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/white_bg_solid_selector">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/edit_text_layer"
            android:hint="@null"
            android:padding="4dp"/>
    </LinearLayout>
    <View 
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/white_bg_top_solid"/> 
    <View 
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/white_bg_bottom_solid"/>
</LinearLayout>


好了，例子说完了，想要画什么样的背景图，我们都通过layer-list叠层来拼成背景图，就可以实现我们想要的背景图了。

说了这么半天，来看下效果图：



 

本文转载自：http://blog.csdn.net/jenly121/article/details/50319005

收藏 (0)
打印 举报
上一篇： sax解析
下一篇： 杨辉三角的变形
Jenly

Jenly

粉丝 6
博文 35
码字总数 0
作品 28
深圳
私信 提问
相关文章 最新文章
android res资源 drawable自定义背景 values格式

res anim 动画目录 leftin.xml scale.xml drawable 自定义动画目录 redbuttonbg.xml circlebuttonbg.xml drawable-xhdpi 放资源文件图片 layout 放布局文件图片 raw 音频、数据库等资源文件 ...

cicue
2014/09/25
227
0
Android开发：用Drawable XML绘制带阴影效果的圆形按钮

众所周知，在Android开发里，为了优化在各种分辨率设备上的显示效果，同一份图片素材往往要提供mdpi、hdpi、xhdpi三种（以前还有ldpi），尤其是按钮类的素材，考虑到normal、pressed、focus...

新年
2015/05/08
993
0
使用Selector对UI控件美化问题请教

今天看了一个例程，在Selector中设计了控件带阴影的效果(两层)，xml文件配置如下，想请教下各位，以下红色字体的作用是什么？是层的偏移值吗？

lwm1368
2014/10/30
70
2
Android样式的开发系列

最近花了比较长的时间总结了样式开发的系列文章，从最简单的自定义形状Shape，到selector的用法，以及layer-list的使用，drawable资源的汇总，还有动画的编写，到最后style的整合。 [Android...

Keegan小钢
2015/11/03
1K
10
Android XML 绘图

最近在看自定义View 的相关内容, 在 上看到Android XML 绘图相关的内容,遂摘抄下来记录之 http://keeganlee.me/post/android/20150830 XMl在Android中可不仅仅是一个布局文件、配置列表。它甚...

YoungerDev
2017/11/12
0
0

没有更多内容

加载失败，请刷新页面

加载更多

Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中，可以自定义和扩展Java应用程序，自JDK1.6被引入，基于Rhino引擎，JDK1.8后使用Nashorn引擎，支持ECMAScript 5，但后期还可能会换...

阿提说说
42分钟前
5
0
05.深入浅出索引（下）

在下面这个表T中，如果我们执行select * from T where k between 3 and 5,需要执行几次树的搜索操作，会扫描多少行？ mysql> create table T ( id int primary key, k int not null default...

scgaopan
昨天
6
0
设计模式-中介者模式

设计模式-中介者模式 定义 用一个中介对象封装一系列的对象交互，中介者使各对象不需要显示地相互作用，从而使其耦合松散，而且可以独立地改变它们之间的交互 UML 组成部分主要包含 Mediat...

木本本
昨天
5
0
Python 周刊第 418 期

新闻 PyCon US 2020 开始接受财务赞助！ https://pycon.blogspot.com/2019/10/financial-aid-launches-for-pycon-us-2020.html2020年 Python 美国开发者大会，tips: 中国也有，可以赞助国内的...

iCodeBugs
昨天
5
0
ThreadLocal源码阅读

首先，从set方法入手， // ThreadLocalpublic void set(T value) { Thread t = Thread.currentThread(); ThreadLocalMap map = getMap(t);//这里可以看出，从Threa......

小海bug
昨天
5
0

没有更多内容

加载失败，请刷新页面

加载更多

返回顶部
顶部