美文网首页
Android中Shape、Layer、Selector的使用

Android中Shape、Layer、Selector的使用

作者: 疯子一般的勇士 | 来源:发表于2017-05-22 12:26 被阅读0次

    1.Shape
    通过Shape可以在xml中绘制各种形状
    在res/drawable文件夹下,新建一个文件:shape.xml

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

    Shape文件根元素是<shape>,可以根据shape属性指定基本形状,允许的值有:rectangle(矩形),oval(椭圆),line(线条), ring(环)。

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

    仅当形状定义为ring时,下列属性才可用:
    innerRadius //内环半径,可覆盖innerRadiusRatio
    innerRadiusRatio //内环的厚度比,即环的宽度比表示内环半径
    thickness //环的厚度,可覆盖thicknessRatio
    thicknessRatio //环的厚度比,即环的宽度比表示环的厚度

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="ring"
     android:innerRadius="integer"          
     android:innerRadiusRatio="float"      
     android:thickness="integer"             
     android:thicknessRatio="float"    
        >
    </shape>
    

    shape有corners、gradient、padding、size、solid、stroke这几个子标签

    corners圆角
    当android:shape="rectangle"时使用
    radius="integer" // 圆角半径,该值设置时下面四个属性失效
    bottomLeftRadius="integer" // 左下角圆角半径
    bottomRightRadius="integer" // 右下角圆角半径
    topLeftRadius="integer" // 左上角圆角半径
    topRightRadius="integer" // 右上角圆角半径

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
        <corners 
            android:radius="integer"    
            android:bottomLeftRadius="integer"
            android:bottomRightRadius="integer"
            android:topLeftRadius="integer"
            android:topRightRadius="integer"/>
    </shape>
    

    gradient渐变
    type="linear|radial|sweep" // 分别为线性、放射性、扫描性渐变,默认为线性渐变linear
    angle="integer" // 渐变角度,当上面type为线性渐变linear时有效。角度为45的倍数,0度时从左往右渐变,角度方向逆时针
    centerColor="color" // 渐变中间位置颜色
    startColor="color" // 渐变开始位置颜色
    endColor="color" // 渐变结束位置颜色
    centerX="float" // type为放射性渐变radial时有效,设置渐变中心的X坐标,取值区间[0,1],默认为0.5,即中心位置
    centerY="float" // type为放射性渐变radial时有效,设置渐变中心的Y坐标,取值区间[0,1],默认为0.5,即中心位置
    gradientRadius="integer" // type为放射性渐变radial时有效,渐变的半径

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient  
            android:type="linear|radial|sweep" 
            android:angle="integer"            
            android:centerColor="color"     
            android:startColor="color"         
            android:endColor="color"       
            android:centerX="float"           
            android:centerY="float"        
            android:gradientRadius="integer"/>
    </shape>
    

    padding内边距
    bottom="integer" // 设置底部边距
    left="integer" // 左边边距
    right="integer" // 右边
    top="integer" // 顶部

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <padding
            android:left="20dp"
            android:right="20dp"
            android:top="20dp"
            android:bottom="20dp"/>
    </shape>
    

    size尺寸
    height="integer" // 宽度
    width="integer" // 高度

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

    solid填充
    color="color" // shape的填充色

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

    stroke描边
    color="color" // 描边的颜色
    width="integer" // 描边的宽度
    dashGap="integer" // 虚线间隔
    dashWidth="integer" // 虚线宽度

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:color="color"
            android:width="integer"
            android:dashGap="integer"
            android:dashWidth="integer"/>
    </shape>
    

    2.Layer
    layer-list可以将多个图片按照顺序层叠起来,让其看起来像一个图一样
    在res/drawable文件夹下,新建一个文件:layer.xml

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

    Layer文件根元素是<layer-list>,layer-list只有item一个子标签

    item
    width="integer" //宽高
    height="integer" //高
    left="integer" //marginleft
    right="integer" //marginright
    top="integer" //margintop
    bottom="integer" //类似marginbottom
    drawable="@drawable/drawable" //设置图片
    gravity="center|center_horizontal|center_vertical"

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:width="integer"
            android:height="integer"
            android:left="integer"
            android:right="integer"
            android:top="integer"
            android:bottom="integer"
            android:drawable="@drawable/drawable" 
            android:gravity="center|center_horizontal|center_vertical"/>
    </layer-list>
    

    3.Selector
    selector多个item子标签,而相应的状态是在item标签中定义的。selector可以作为两种资源使用:drawable和color。作为drawable资源使用时,放于drawable目录下,item必须指定android:drawable属性;作为color资源使用时,则放于color目录下,item必须指定android:color属性。
    在res/drawable文件夹下,新建一个文件:selector.xml

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

    android:state_enabled: 设置触摸或点击事件是否可用状态,一般只在false时设置该属性,表示不可用状态
    android:state_pressed: 设置是否按压状态,一般在true时设置该属性,表示已按压状态,默认为false
    android:state_selected: 设置是否选中状态,true表示已选中,false表示未选中
    android:state_checked: 设置是否勾选状态,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选
    android:state_checkable: 设置勾选是否可用状态,类似state_enabled,只是state_enabled会影响触摸或点击事件,而state_checkable影响勾选事件
    android:state_focused: 设置是否获得焦点状态,true表示获得焦点,默认为false,表示未获得焦点
    android:state_window_focused: 设置当前窗口是否获得焦点状态,true表示获得焦点,false表示未获得焦点,例如拉下通知栏或弹出对话框时,当前界面就会失去焦点;另外,ListView的ListItem获得焦点时也会触发true状态,可以理解为当前窗口就是ListItem本身
    android:state_activated: 设置是否被激活状态,true表示被激活,false表示未激活,API Level 11及以上才支持,可通过代码调用控件的setActivated(boolean)方法设置是否激活该控件
    android:state_hovered: 设置是否鼠标在上面滑动的状态,true表示鼠标在上面滑动,默认为false,API Level 14及以上才支持

    引用资源为图片时

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 当前窗口失去焦点时 -->
        <item android:drawable="@drawable/d1" android:state_window_focused="false" />
        <!-- 不可用时 -->
        <item android:drawable="@drawable/d2" android:state_enabled="false" />
        <!-- 按压时 -->
        <item android:drawable="@drawable/d3" android:state_pressed="true" />
        <!-- 被选中时 -->
        <item android:drawable="@drawable/d4" android:state_selected="true" />
        <!-- 被激活时 -->
        <item android:drawable="@drawable/d5" android:state_activated="true" />
        <!-- 默认时 -->
        <item android:drawable="@drawable/d6" />
    </selector>
    

    引用资源为颜色时

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 当前窗口失去焦点时 -->
        <item 
          android:color="@android:color/black"      
          android:state_window_focused="false" />
        <!-- 不可用时 -->
        <item 
           android:color="@android:color/background_light" 
           android:state_enabled="false" />
        <!-- 按压时 -->
        <item 
          android:color="@android:color/holo_blue_light" 
          android:state_pressed="true" />
        <!-- 被选中时 -->
        <item 
          android:color="@android:color/holo_green_dark" 
          android:state_selected="true" />
        <!-- 被激活时 -->
        <item 
          android:color="@android:color/holo_green_light" 
          android:state_activated="true" />
        <!-- 默认时 -->
        <item 
          android:color="@android:color/white" />
    </selector>
    

    另外Selector的item中可以使用Layer和Shape,Layer的item中也可以使用Selector和Shape
    可以通过不同的组合来实现一些有意思的东西。

    PS.东西不难,但不用真的容易忘

    相关文章

      网友评论

          本文标题:Android中Shape、Layer、Selector的使用

          本文链接:https://www.haomeiwen.com/subject/zjvuxxtx.html