Android--shape、selector、layer-list

 Android开发:shape和selector和layer-list

<shape><selector>Android UI设计中经常用到。比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape><selector>
可以这样说,<shape><selector>在美化控件中的作用是至关重要。

在看这篇文章之前,可以看下这个小例子:镂空按钮的实现

 Shape

一、概述

作用XML中定义的几何形状

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

我们在android开发中经常要用到图片,而一些简单的图片我们完全可以用shape形状drawable资源代替,使用shape有一个好处就是可以减小我们apk的大小,因为同样的效果,shape比图片更节省空间.

二,shape初识

shape是android drawable资源中的一个重要的角色,drawable资源覆盖面广,它不仅代表图片,它可以是一个颜色,一个形状,因为shape其简单实用,下面我们来看一下shape形状的分类:

rectangle:

rectangle代表者矩形,它是shape默认的形状类型,即如果我们不在shape的android:shape属性指定其类型时,默认是矩形,用它我们可以画一个矩形,圆角矩形,具体在下面会说道

oval:

ovel,椭圆,用它可以画椭圆,圆

line:

水平线,在使用该形状的时候,我们得给它指定stroke元素指定其宽度,不然在使用该形状的时候会报空指针异常

ring:

环形

属性

stroke:

该标签元素用于设置描边,它有4个属性

width:设置描边的宽度

color:设置描边的颜色

dashWidth:设置破折线的宽度

dashGap:设置破折线之间的空隙的宽度

该标签的一些注意事项: 
dashWidth和dashGap必须同时使用才能生效,如果没有设置其中的任意一个或者其中任意一个属性的值为0,那么描边都将是实线而达不到描边是虚线的效果,该标签在shape为line时必须设置,否则使用的时候报空指针异常

corners :

该标签元素用于设置圆角,它有5个属性:

radius

topLeftRadius

topRightRadius

bottomLeftRadius

bottomRightRadius

分别是设置全部的圆角,左上角圆角,右上角圆角,左下角圆角,右下角圆角的大小,如果我们要的是上图中的椭圆,那么我们只要设置radius的值即可,如果我们要的是单边圆角,那么我们可以设置radius为15dp,然后分别设置topRightRadius=‘0dp’bottomRightRadius='0dp'即可,其他根据自己的需要进行控制

gradient:

该标签元素用于设置渐变填充色,它有9个属性:

  startColor:渐变开始颜色,如果渐变类型为径向渐变,那么启始颜色在中间

· centerColor:渐变中间颜色

· endColor:渐变结束颜色

· useLevel:boolean值 [“true” | “false”] 如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色

· angle: 整型 渐变角度 
(PS:当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)

· 

type: [“linear” | “radial” | “sweep”] 渐变类型(取值:linear、radial、sweep) 
1. linear 线性渐变,这是默认设置 
2. radial 径向渐变 
3. sweep 角度渐变

centerX:整型 渐变中心X点坐标的相对位置

centerY: 整型 渐变中心Y点坐标的相对位置

gradientRadius:整型 渐变色半径.当 android:type=”radial” 时才使用。单独使用 android:type=”radial”无任何效果。

上面的有一些属性不是很常用,在使用该标签的时候,有个要注意的问题,就是上面说的当在使用gradientRadius属性的时候要注意的问题

ovel形状和矩形形状同理,但是我这里要说明一下corners标签对椭圆形状无效,原因用大脚趾都想得到,嘿嘿

ring:

ring,圆环,用于绘制圆环,大家看了上面的第四行的形状了感觉和ovel有点像,又不是很像,对于上面的13和16可以用相同的形状画出来,大家有没注意到shape形状的根标签标签有好多属性,但上面我们矩形和椭圆只用到了shape属性,这是因为 
下面的属性只有在android:shape=”ring时可用:

 android:innerRadius 尺寸,内环的半径。

 android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,例如,如果android:innerRadiusRatio,表示内环半径等于环的宽度除以5,这个值是可以被覆盖的,默认为9,上图中的20就用到了innerRadiusRatio属性

android:尺寸,环的厚度

android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,例如,如果android:thicknessRatio=”2”, 那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的,默认值是3.

我们要想绘制一个圆环,那么我们这样确定了内圆的半径和外圆的半径和中心点就可以了,或者我们知道内圆的半径和圆环的厚度及中心点也同样可以绘制圆环,因为内圆半径加厚度就可以得到外园半径了嘛,但是android官网是通过让我吗设置内圆半径innerRadius和厚度thickness和圆环的高度尺寸的方式让我们绘制圆,当我们画圆环的时候,我们要主要设置标签的height大于0,否则将什么都看不到,当height的尺寸大于圆环外圆半径的尺寸的时候,注意是外圆半径哦,这样才能显示一个完整的圆环

android shape的使用

shape用于设定形状,可以在selectorlayout等里面使用,有6个子标签,各属性如下:

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

    <!-- 圆角 -->

    <corners

        android:radius="9dp"

        android:topLeftRadius="2dp"

        android:topRightRadius="2dp"

        android:bottomLeftRadius="2dp"

        android:bottomRightRadius="2dp"/><!-- 设置圆角半径 -->

    <!-- 渐变 -->

    <gradient

      android:startColor="@android:color/white"

        android:centerColor="@android:color/black"

        android:endColor="@android:color/black"

        android:useLevel="true"

        android:angle="45"

        android:type="radial"

        android:centerX="0"

        android:centerY="0"

        android:gradientRadius="90"/>

    <!-- 间隔 -->

    <padding

        android:left="2dp"

        android:top="2dp"

        android:right="2dp"

        android:bottom="2dp"/><!-- 各方向的间隔 -->

    <!-- 大小 -->

    <size

        android:width="50dp"

        android:height="50dp"/><!-- 宽度和高度 -->

    <!-- 填充 -->

    <solid

 android:color="@android:color/white"/><!-- 填充的颜色 -->

    <!-- 描边 -->

    <stroke

        android:width="2dp"

        android:color="@android:color/black"

        android:dashWidth="1dp"

        android:dashGap="2dp"/>

    </shape>

填充:设置填充的颜色

间隔:设置四个方向上的间隔

大小:设置大小

圆角:同时设置五个属性,则Radius属性无效

android:Radius="20dp"                           设置四个角的半径

android:topLeftRadius="20dp"              设置左上角的半径 
android:topRightRadius="20dp"           设置右上角的半径 
android:bottomLeftRadius="20dp"      设置右下角的半径 
android:bottomRightRadius="20dp"    设置左下角的半径

描边:dashWidthdashGap属性,只要其中一个设置为0dp,则边框为实现边框

android:width="20dp"                               设置边边的宽度 
android:color="@android:color/black"  设置边边的颜色 
android:dashWidth="2dp"                         设置虚线的宽度 
android:dashGap="20dp"                          设置虚线的间隔宽度

渐变:当设置填充颜色后,无渐变效果。angle的值必须是45的倍数(包括0),仅在type="linear"有效,不然会报错。android:useLevel 这个属性不知道有什么用。

angle对应值的起点如图:

                            

Selector
简介

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

分为四大属性:

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

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

另:

android:state_window_focused 默认时的背景图片

引用位置:res/drawable/文件的名称.xml

使用的方法:

Java代码中:R.drawable.文件的名称

XML中:Android:background="@drawable/文件的名称"

[html] view plain copy 

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

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

<!-- 默认时的背景图片-->      

<item Android:drawable="@drawable/pic1" />        

<!-- 没有焦点时的背景图片 -->      

<item   

   Android:state_window_focused="false"        

   android:drawable="@drawable/pic_blue"   

   />       

<!-- 非触摸模式下获得焦点并单击时的背景图片 -->      

<item   

   Android:state_focused="true"   

   android:state_pressed="true"     

   android:drawable"@drawable/pic_red"   

   />     

<!-- 触摸模式下单击时的背景图片-->      

<item   

   Android:state_focused="false"   

   Android:state_pressed="true"     

   Android:drawable="@drawable/pic_pink"   

   />      

<!--选中时的图片背景-->      

<item   

   Android:state_selected="true"   

   android:drawable="@drawable/pic_orange"   

   />       

<!--获得焦点时的图片背景-->      

<item   

   Android:state_focused="true"   

   Android:drawable="@drawable/pic_green"   

   />       

</selector>   

 

3.layer-list   
简介:

将多个图片或上面两种效果按照顺序层叠起来

例子:

[html] view plain copy 

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

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

    <item>  

      <bitmap android:src="@drawable/android_red"  

        android:gravity="center" />  

    </item>  

    <item android:top="10dp" android:left="10dp">  

      <bitmap android:src="@drawable/android_green"  

        android:gravity="center" />  

    </item>  

    <item android:top="20dp" android:left="20dp">  

      <bitmap android:src="@drawable/android_blue"  

        android:gravity="center" />  

    </item>  

</layer-list>  

[

<ImageView  

    android:layout_height="wrap_content"  

    android:layout_width="wrap_content"  

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

item表示项,表示一项内容,仅是一个标记作用.

4.最后:以上三个标签可以揉合到一块儿来使用,

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhwadezh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值