Android:shape和selector和layer-list的(详细说明)

Android:shape和selector和layer-list的(详细说明),第1张

概述<shape>和<selector>在Android UI设计中经常用到。比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape>和<selector>。可以这样说,<shape>和<selector>在美化控件中的作用是至关重要。先来看一个例子:通过xml文件实现自定义圆角镂空按...

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

先来看一个例子:

通过xml文件实现自定义圆角镂空按钮,以及点击效果

  <button androID:layout_wIDth="78dp" androID:layout_height="32dp"            androID:ID="@+ID/corner_btn"            androID:textSize="15sp"             androID:textcolor="@color/score_point"            androID:text="button1"            androID:layout_marginRight="17dp"            androID:layout_marginleft="17dp"            androID:layout_gravity="center_vertical"            androID:background="@drawable/circle_corner_button_selector"            />  

1.在drawable中创建按钮背景selector器

circle_corner_button_selector.xml

<?xml version="1.0" enCoding="utf-8"?> <selector xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item androID:drawable="@drawable/circle_corner_button_pressed" androID:state_pressed="true"/>    <item androID:drawable="@drawable/circle_corner_button"/></selector>

2.分别定义不同选择 *** 作下的效果

首先:circle_corner_button.xml文件

<?xml version="1.0" enCoding="utf-8"?> <!-- 带圆角 白色背景 黄色色边框  长方体 --><@R_827_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item>        <shape>            <solID androID:color="#FFFFFF" />            <corners androID:topLefTradius="5dp" androID:topRighTradius="5dp"                     androID:bottomrighTradius="5dp" androID:bottomLefTradius="5dp" />            <stroke androID:wIDth="1dp" androID:color="#F58939" />            <padding                    androID:left="5dp"                    androID:top="5dp"                    androID:right="5dp"                    androID:bottom="5dp"                    />        </shape>    </item></@R_827_3419@>

和circle_corner_button_pressed.xml文件

<?xml version="1.0" enCoding="utf-8"?><!-- 带圆角 白色背景 灰色边框 长方体 --><@R_827_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item>        <shape>            <solID androID:color="#FFFFFF"/>            <corners androID:topLefTradius="5dp" androID:topRighTradius="5dp"                     androID:bottomrighTradius="5dp" androID:bottomLefTradius="5dp"/>            <stroke androID:wIDth="1dp" androID:color="#dbdbdb"/>            <padding                    androID:left="5dp"                    androID:top="5dp"                    androID:right="5dp"                    androID:bottom="5dp"                    />        </shape>    </item> </@R_827_3419@>

最后的按钮效果应该是这样的:

正常情况下:

点击后的样式:

1.Shape

简介

作用:XML中定义的几何形状位置:res/drawable/文件的名称.xml

使用的方法:

Java代码中:R.drawable.文件的名称XML中:AndroID:background="@drawable/文件的名称"

属性:

<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/文件的名称.xml

使用的方法:

Java代码中:R.drawable.文件的名称XML中:AndroID:background="@drawable/文件的名称"
<?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. @R_827_3419@ 是啥?有啥作用?

点击查看 安卓官方开发指南中关于layerlsit的说明

(1). @R_827_3419@ 是啥?

简单理解,layer 是层,List 是列表,那么 @R_827_3419@ 就是层列表的意思。但是,是什么层列表呢?? 其实 @R_827_3419@ 是用来创建 LayerDrawable 的,LayerDrawable 是 DrawableResource 的一种, 所以,@R_827_3419@ 创建出来的是 图层列表,也就是一个drawable 图形。

(2). @R_827_3419@ 有啥作用?

上面已经说过,@R_827_3419@ 是用来创建 图层列表的,通过它能创建出一些特殊的 drawable, 比如:
 

下图 AlertDialog 中,我们只需要设置 button 的 顶部边线,以及 左侧button的右边线(或者右侧button的左边线),这种时候我们就无法直接使用 shape 了,因为直接使用 shape 绘制出来的是四个边框; 如果让美工切图也可以,但那样的话灵活度就差了很多,而且会增加app的体积;这种情况下,使用 @R_827_3419@ 就是最佳选择。当然,@R_827_3419@ 的用途还有很多,这里只是举一个例子,具体的使用请继续往下看。

 

2. @R_827_3419@ 的大致原理

@R_827_3419@ 的大致原理类似 relativeLayout(或者FrameLayout) ,也是一层层的叠加 ,后添加的会覆盖先添加的。在 @R_827_3419@ 中可以通过 控制后添加图层距离最底部图层的 左上右下的四个边距等属性,得到不同的显示效果。

上面示例图中,AlertDialog 底部的 ok按钮 的背景就是用@R_827_3419@实现的。该@R_827_3419@ 中,底层使用一个填充色为蓝色 的shape,上层使用一个填充色为白色的shape ,然后控制上层距离最底层的顶部边距为1dp,这样在视觉上就形成了一个 具有蓝色顶部边线的白色背景。具体代码继续往下看。
 3.1. @R_827_3419@ 基本使用示例:

因 @R_827_3419@ 创建出来的也是 drawable 资源,所以,同 shape selector 一样,都是定义在 res 中的 drawable 文件夹中,也是一个 xml 文件。使用的时候,同shape selector,布局文件中使用 @drawable/ xxx 引用,代码中使用 R.drawable.xxx 引用。

@R_827_3419@ 中不同的图层使用 item 节点来定义。

(1). 效果1 :单一边线

效果图:

图中,TextVIEw 只有一个顶部边线

具体代码:

创建带有蓝色顶部边线的 @R_827_3419@ 图

在 res 目录中的 drawable 目录下,创建名称为 singleline.xml 的xml 文件,然后编辑 @R_827_3419@ 的详细代码,如下:

<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <!--底层使用蓝色填充色-->    <item>        <shape>            <solID androID:color="#02a0ef"/>        </shape>    </item>    <!--上面一层距离底层的顶部1dp,类似margintop,填充色为白色,这样就形成了一个带有蓝色顶部边线的白色背景的图-->    <item androID:top="1dp">        <shape>            <solID androID:color="#fff"/>        </shape>    </item></@R_827_3419@>
使用 @R_827_3419@ 图,设置为textVIEw的背景
 <TextVIEw        androID:layout_wIDth="match_parent"        androID:layout_height="40dp"        androID:background="@drawable/singleline"        androID:gravity="center"        androID:text="单一边线效果"/>

(2). 效果2 :双边线

效果图:

图中,TextVIEw 具有上下边线 

具体代码:

创建带有蓝色顶部和底部边线的 @R_827_3419@ 图
<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <!--底层使用蓝色填充色-->    <item>        <shape>            <solID androID:color="#02a0ef"/>        </shape>    </item>    <!--上面一层距离底层的顶部1dp,距离底部1dp,填充色为白色,这样就形成了一个带有蓝色顶部边线和底部边线的白色背景的图-->    <item androID:bottom="1dp"          androID:top="1dp">        <shape>            <solID androID:color="#fff"/>        </shape>    </item></@R_827_3419@>
使用 @R_827_3419@ 图,设置为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 :阴影

效果图:

具体代码:

创建 @R_827_3419@
<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ 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></@R_827_3419@>
使用 @R_827_3419@ 图,
  <TextVIEw        androID:layout_wIDth="match_parent"        androID:layout_height="70dp"        androID:layout_margintop="10dp"        androID:background="@drawable/shadow"        androID:gravity="center"        androID:text="阴影效果"/> 

 

(4). 效果4 : 图片层叠

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

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

<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ 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></@R_827_3419@>

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

<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ 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></@R_827_3419@>
使用 @R_827_3419@ 图,
   <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 ,在真机上的效果依旧是缩放的。(但模拟器是不缩放的)
 

<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ 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></@R_827_3419@>
使用 @R_827_3419@ 图,
 <ImageVIEw        androID:layout_wIDth="wrap_content"        androID:layout_height="wrap_content"        androID:background="@drawable/overlay"    />

(5). 效果5 :叠加旋转

效果图:

具体代码:

创建 @R_827_3419@
<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ 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></@R_827_3419@>

旋转的时候,只需要给出 起始的角度( fromdegress )即可。

使用 @R_827_3419@ 图,
     <!--图片叠加并带旋转效果-->    <ImageVIEw        androID:layout_wIDth="wrap_content"        androID:layout_height="wrap_content"        androID:background="@drawable/rotate"/>
3.2. @R_827_3419@ 的扩展使用

(1).实现选择器的效果

主要使用组件:RadioGroup Selector @R_827_3419@

1). 效果图:

2). 具体代码

定义 selector 选择器 

selector 的 item 节点中,直接嵌套 @R_827_3419@ 
当然也可以先写好@R_827_3419@ ,然后再去引用

<?xml version="1.0" enCoding="utf-8"?><selector xmlns:androID="http://schemas.androID.com/apk/res/androID">    <!--被选中时是4dp的底部边线-->    <item androID:state_checked="true">        <@R_827_3419@>            <item>                <shape>                    <solID androID:color="#f00"/>                </shape>            </item>            <item androID:bottom="4dp">                <shape>                    <solID androID:color="#fff"/>                </shape>            </item>        </@R_827_3419@>    </item>    <!--未被选中的是2dp的底部边线-->    <item>        <@R_827_3419@>            <item>                <shape>                    <solID androID:color="#f00"/>                </shape>            </item>            <item androID:bottom="2dp">                <shape>                    <solID androID:color="#fff"/>                </shape>            </item>        </@R_827_3419@>    </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">        <@R_827_3419@>            <item>                <color androID:color="#f00"/>            </item>            <item androID:bottom="5dp">                <color androID:color="#fff"/>            </item>        </@R_827_3419@>    </item>    <!--未被选中的是2dp的底部边线-->    <item>        <@R_827_3419@>            <item>                <color androID:color="#f00"/>            </item>            <item androID:bottom="2dp">                <color androID:color="#fff"/>            </item>        </@R_827_3419@>    </item></selector>
 
<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"              androID:layout_wIDth="match_parent"              androID:layout_height="match_parent"              androID:orIEntation="vertical"              androID:padding="15dp">    <RadioGroup        androID:ID="@+ID/rg"        androID:layout_wIDth="match_parent"        androID:layout_height="wrap_content"        androID:orIEntation="horizontal">        <Radiobutton            androID:ID="@+ID/rb1"            androID:layout_wIDth="0dp"            androID:layout_height="wrap_content"            androID:layout_weight="1"            androID:background="@drawable/selector_bk_rb"            androID:button="@null"            androID:checked="true"            androID:gravity="center"            androID:padding="10dp"            androID:text="第1 个button"/>        <Radiobutton            androID:layout_wIDth="0dp"            androID:layout_height="wrap_content"            androID:layout_weight="1"            androID:background="@drawable/selector_bk_rb"            androID:button="@null"            androID:gravity="center"            androID:padding="10dp"            androID:text="第2 个button"/>        <Radiobutton            androID:layout_wIDth="0dp"            androID:layout_height="wrap_content"            androID:layout_weight="1"            androID:background="@drawable/selector_bk_rb"            androID:button="@null"            androID:gravity="center"            androID:padding="10dp"            androID:text="第3 个button"/>    </RadioGroup></linearLayout>    
注意: 在 RadioGroup 中,是通过 Radiobutton 的 ID 来控制是否选中。 所以,如果需要设置某一个 Radiobutton 为默认选中,就必须给该 Radiobutton 设置 ID ; 如果不设置 ID ,导致的结果就是该 Radiobutton 会一直处于选中状态!!!
 3.3单一边线的样式

就像上面这个图形很简单,左右两边各一个button,如果用单一的drawable中的shape绘制,就是左边背景是白色边线灰色背景左边两个圆角,右边背景是白色边线蓝色背景右边两个圆角,出来的实际效果是下图:

中间明显一条白线明显比较粗,这是因为左右两边作为背景的drawable图都有边线.这时候如果用@R_827_3419@,就可以将其中一侧(左边或右边)的背景定义为某一边无边线的样式:

实现起来也很简单,第一层item正常绘制,第二层绘制一个不带边框的同背景色的形状,如果某一边是无边界线,那么除了这个边,其它边都给一个偏移量(item节点里面的bottom等),偏移量取决于第一层的边线宽度

<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item >        <shape androID:shape="rectangle" >            <solID androID:color="@color/text_gray" />            <stroke                androID:wIDth="2dp"                androID:color="@color/white" />            <corners                androID:bottomLefTradius="5dp"                androID:topLefTradius="5dp" />        </shape >    </item >    <item        androID:bottom="2dp"        androID:left="2dp"        androID:top="2dp" >        <shape androID:shape="rectangle" >            <solID androID:color="@color/text_gray" />            <corners                androID:bottomLefTradius="5dp"                androID:topLefTradius="5dp" />        </shape >    </item ></@R_827_3419@ >
3.4套环类样式

最典型的就是同心圆:

<?xml version="1.0" enCoding="utf-8"?><@R_827_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID" >    <item>        <shape androID:dither="true"            androID:shape="oval">            <solID androID:color="@color/white" />            <stroke                androID:color="@color/blue"                androID:wIDth="1dp" />        </shape>    </item>    <item        androID:bottom="20dp"        androID:left="20dp"        androID:right="20dp"        androID:top="20dp" >        <shape            androID:shape="oval" >            <solID androID:color="@color/blue" />            <size                androID:wIDth="30dp"                androID:height="30dp" />        </shape >    </item ></@R_827_3419@ >

 

最近自己写了一个小程序,大家可以关注一下,附带源码

搬砖之余看个电影放松,扫码关注,最新,最全的各种影视资源,省去各种VIP,直接观看

@H_419_582@

 

总结

以上是内存溢出为你收集整理的Android:shape和selector和layer-list的(详细说明)全部内容,希望文章能够帮你解决Android:shape和selector和layer-list的(详细说明)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1089527.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存