`
tiancheng
  • 浏览: 7044 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

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

阅读更多
shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。
可以这样说,shape和selector在美化控件中的作用是至关重要的。
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.layer-list 

简介:

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

<?xml version="1.0" encoding="UTF-8"?>  
 <layer-list  
   xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!--图片1-->
     <item android:id="@+id/user_faceback_drawable"
           android:drawable="@drawable/faceback" />  
    <!--图片2-->
     <item android:id="@+id/user_face_drawable" 
           android:drawable="@drawable/h001"   
           android:left="10.0dip" 
           android:top="18.0dip" 
           android:right="25.0dip" 
           android:bottom="35.0dip" />  
 </layer-list> 
<!--2个图片的叠加-->




以上三个标签可以揉合到一块儿来使用,所要实现的效果就是上面三种简介的说明,比如下面这个例子:

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

    <item android:state_pressed="true"><layer-list>
            <item android:bottom="8.0dip"><shape>
                    <solid android:color="#ffaaaaaa" />
                </shape></item>
            <item><shape>
                    <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />

                    <solid android:color="#ffaaaaaa" />

                    <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />
                </shape></item>
            <item><shape>
                    <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />

                    <solid android:color="@color/setting_item_bgcolor_press" />
                </shape></item>
        </layer-list></item>
    <item><layer-list>
            <item android:bottom="8.0dip"><shape>
                    <solid android:color="#ffaaaaaa" />
                </shape></item>
            <item><shape>
                    <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />

                    <solid android:color="#ffaaaaaa" />

                    <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />
                </shape></item>
            <item><shape>
                    <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />

                    <solid android:color="@color/setting_item_bgcolor" />
                </shape></item>
        </layer-list></item>

</selector>

分享到:
评论

相关推荐

    shape、selector和layer-list的使用

    详见http://blog.csdn.net/huaxun66/article/details/52335677

    关于XML绘图(bitmap ,shape ,layer-list ,selector ,animation)的demo

    关于XML绘图(bitmap ,shape ,layer-list ,selector ,animation)的demo

    layer-list-shadow-demo

    第一个和第二个控件是用来展示layer-list实现阴影效果的基本款,而第三个控件是综合上述两个控件效果,再集合selector实现的。 默认状态: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;layer-list xmlns:...

    闪屏页ShapeDemo

    使用Shape,Selector,layer_list等属性实现实线,虚线,渐变线条,方角按钮,圆角按钮,渐变按钮,叠加图片等一些常见的效果。并且实现闪屏页秒开无白屏效果和分屏过渡动画。

    Android ShapeDemo

    自定义控件的背景有很多种方式,今天讲下使用在XML中自定义背景,主要使用到&lt;shape&gt;&lt;layer-list&gt;&lt;selector&gt;等标签。这里是一个简单的ShapeDemo。

    Android代码-SupperShape

    通过封装GradientDrawable、StateListDrawable 、LayerDrawable ...支持Layer-list How to: Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:

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

    本文实例讲述了Android编程使用自定义shape实现shadow阴影效果的方法。分享给大家供大家参考,具体如下: 直接上xml文件, 并且...layer-list&gt; &lt;!-- 相当于padding --&gt; &lt;item android:left=4dp android

    Android样式的编写

    在android的开发中,我们的按钮样式,如数框的样式,一般情况下,都是有UI前端的图片开改变的,其实,在android的开发中,我们和...&lt;shape&gt;、&lt;selector&gt;、&lt;layer-list&gt;等,本文介绍的就是android的样式的属性,希望能帮助大家

    Android中一种巧妙的drawable.xml替代方案分享

    在开发中我们经常要使用图片或者drawable文件夹下的xml,来实现一些效果,Drawable的用法都和xml相关,我们可以使用shape、layer-list等标签绘制一些背景,还可以通过selector标签定义View的状态的效果等。...

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

    android使用xml实现一些常用的背景图,常见的按钮样式,文本编辑框布局等

    android群雄传

    12.5 Tinting和Clipping 265 12.5.1 Tinting(着色) 265 12.5.2 Clipping(裁剪) 267 12.6 列表与卡片 269 12.6.1 Recycler View 269 12.6.2 Card View 275 12.7 Activity过渡动画 276 12.8 Material ...

Global site tag (gtag.js) - Google Analytics