<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， 比如：
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@> <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@> <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@> <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@> <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@> <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"/>(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><?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> 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@ >最典型的就是同心圆:
<?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的（详细说明）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）