`
jenly
  • 浏览: 18181 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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叠层来拼成背景图，就可以实现我们想要的背景图了。

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



分享到：
| Android之检测文本内容是否为空时左右摆动 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    关于XML绘图（bitmap ,shape ,layer-list ,selector ,animation）的demo

    这个“关于XML绘图（bitmap, shape, layer-list, selector, animation）的demo”是Android开发中的一个实例，展示了如何利用XML来创建和控制各种图形元素。下面将详细解释这些概念。 1. **Bitmap**: 在Android中，...

    shape、selector和layer-list的使用

    在Android开发中，Shape、Selector和Layer-List是三种非常重要的图形绘制元素，它们主要用于定义View的背景或者自定义按钮、列表项等组件的样式。接下来，我们将详细探讨这三个概念及其应用。 首先，Shape是Android...

    Android中layer-list基本使用详解

    在实际应用中，`layer-list` 可以与其它 `Drawable` 类型结合使用，如 `selector` (选择器) 或 `inset` (内嵌)，以创建更复杂的视图效果。此外，还可以通过设置 `android:drawable` 属性引用其他资源，实现更灵活的...

    Android中使用Shape自定义形状

    在Android开发中，Shape是XML布局文件中的一种元素，它允许开发者自定义各种图形，如矩形、椭圆、线和梯形等，用于创建丰富多彩的背景或按钮样式。本教程将深入探讨如何在Android中使用Shape来实现自定义形状。 1. ...

    Android样式的开发:layer-list实例详解

    `layer-list`允许开发者将多个Drawable对象按层次堆叠，从而实现如背景、边框、阴影等各种视觉效果，而无需依赖于特定分辨率的图像资源。 首先，我们来看`layer-list`如何用于实现Tab的背景效果。在示例中，Tab背景...

    layer-list-shadow-demo

    本文的思路是多个drawable叠在一起，但是不额外使用View，通过layer-list可以将多个item按照顺序层叠在一起显示。首先来看效果图： 第一个和第二个控件是用来展示layer-list实现阴影效果的基本款，而第三个控件是...

    应用源码之Layer-listSample.zip

    `Layer-list`可以与Android的其他drawable资源，如`selector`（状态选择器）和`shape`（形状）等配合使用，以实现更复杂的动态效果。 6. **性能考虑**： 虽然`Layer-list`提供了一种方便的方式来组合图形，但过多...

    Android应用源码之Layer-listSample_listSample.zip

    `Layer-list`还可以与其他`Drawable`类型结合使用，比如`selector`（状态选择器）或者`inset`（内嵌），以实现更复杂的行为。 6. **适配不同屏幕尺寸**： 在`res/drawable`目录下为不同屏幕密度创建相应的`Layer-...

    android使用xml实现一些常用的背景图

    通过使用属性，我们可以为这些组件设置Shape、Selector或Layer-List作为背景。例如，将上面定义的Shape作为按钮的背景： ```xml android:id="@+id/myButton" android:layout_width="wrap_content" android:...

    闪屏页ShapeDemo

    在Android开发中，"闪屏页ShapeDemo"是一个典型的项目，它主要展示了如何利用各种图形元素和动画技术来创建引人注目的启动界面。在这个项目中，开发者将学习到几个关键知识点，包括Shape、Selector、layer_list以及...

    Android ShapeDemo

    总结起来，Android的XML背景定义提供了强大的灵活性，通过`&lt;shape&gt;`、`&lt;layer-list&gt;`和`&lt;selector&gt;`，我们可以创建出各种复杂的背景样式，适应不同的应用场景。在`ShapeDemo`中，你将有机会看到这些技术的实际运用，...

    Android编程使用自定义shape实现shadow阴影效果的方法

    首先，我们需要理解Android中的`&lt;shape&gt;`和`&lt;layer-list&gt;`标签。 `&lt;shape&gt;`标签用于创建各种几何形状，如矩形、椭圆等，并能为其填充颜色、设置边框等。在这个实例中，我们用它来创建带有圆角的矩形，以模拟阴影和...

    android中shape的使用

    在Android开发中，Shape是XML布局资源的一种，用于创建各种图形，如矩形、椭圆、线和梯形等，通常用作自定义View的背景或者Drawable对象。它提供了丰富的属性来实现颜色填充、边框样式以及渐变效果，极大地增强了...

    Android_shape

    `shape`资源也可以作为其他图形的基础，通过`layer-list`或者`selector`进行组合和选择，实现更复杂的布局效果。 ### 9. `kstyle-master`项目 `kstyle-master`可能是一个包含多个`shape`样式的开源项目，用于展示和...

    Android背景图片

    XML资源文件通常位于res/drawable目录下，可以使用shape、selector或layer-list等元素来定义复杂的背景样式。 1. **Shape Drawable**：Shape drawable允许我们创建简单的几何形状作为背景，例如矩形、圆形、线等，...

    Android控件美化之Shape的使用[汇编].pdf

    Shape是Android中一个非常实用的元素，它允许开发者定义自定义的图形样式，包括填充颜色、渐变、描边、圆角以及内部间距等属性，从而实现各种复杂的控件外观。本篇将深入探讨Shape的使用及其在不同场景下的应用。 ...

    Android样式的编写

    不同于Web开发中常用的CSS，Android通过一系列特有的资源文件来实现样式定义，其中主要包括`&lt;shape&gt;`、`&lt;selector&gt;`、`&lt;layer-list&gt;`等标签。本文将详细介绍这些概念，并提供具体的使用示例。 #### 一、`&lt;shape&gt;`：...

    android Shape介绍

    同时，还可以使用`&lt;layer-list&gt;`来组合多个形状，实现更复杂的效果。 提供的demo程序和文档将帮助你更好地理解这些概念，并通过实践掌握如何在项目中应用。通过尝试修改不同属性，你可以创造出各种各样的形状和渐变...

    androidbutton背景随心搭配借鉴.pdf

    主要涉及的技术点包括使用Selector、Layer-List以及Shape等XML资源文件。 首先，我们来看`button_ctrl.xml`，这是一个Selector资源文件，用于定义Button在不同状态下的背景。Selector是Android中的一个Drawable类型...

    Android shape 属性

    在实际应用中，还可以结合selector来实现点击状态变化的效果，或者使用layer-list来组合多个形状，实现更丰富的视觉效果。 总之，Android的Shape属性是构建自定义UI的重要工具，熟练掌握其用法能帮助开发者创造出...

Magicbox
Global site tag (gtag.js) - Google Analytics