Android控件圆角和背景选择器的使用

发表于   |     |   阅读次数

    在Android开发中为了美观或是和ios风格统一，控件往往设置成圆角，为了使控件有一个点击的效果我们会使用选择器来实现，这里简单介绍一下实现步骤。

1、给控件设置圆角

给控件设置圆角一般可以使用shape标签来实现,这里罗列一些shape的基本属性
有一个在线的shape编辑工具地址可以在线完成你想要的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//round_bg.xml 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <!--实心   就是填充的意思 color填充的颜色-->
    <solid android:color="#ff0033"/>
    <!--渐变  android:startColor和android:endColor分别为起始和结束颜色，
            android:angle是渐变角度，必须为45的整数倍。
            另外渐变默认的模式为android:type="linear"，即线性渐变，
            可以指定渐变为径向渐变，android:type="radial"，
            径向渐变需要指定半径android:gradientRadius="50"。-->
    <gradient android:startColor="#ffffff"
              android:endColor="#000000"
              android:angle="90"
        />
        <!--描边  android:width="2dp"
        描边的宽度，android:color 描边的颜色。
        我们还可以把描边弄成虚线的形式，设置方式为：
        android:dashWidth="5dp"
        android:dashGap="3dp"
       其中android:dashWidth表示'-'这样一个横线的宽度，
       android:dashGap表示之间隔开的距离。-->
    <stroke android:width="2dp"
            android:color="#ff9966"/>
    <!--圆角-->
    <!--android:radius为角的弧度，值越大角越圆。
        我们还可以把四个角设定成不同的角度，方法为：
    <corners
            android:topRightRadius="20dp"    右上角
            android:bottomLeftRadius="20dp"  右下角
            android:topLeftRadius="20dp"     左上角
            android:bottomRightRadius="20dp" 左下角
     />-->
    <corners android:radius="5dp"/>
    <!--padding 这个就不用多说了，XML布局文件中经常用到-->
    <padding
        android:left="1dp"
        android:right="2dp"
        android:top="3dp"
        android:bottom="4dp"
        />
</shape>

使用圆角，直接给TextView、Button、ImageView或其他控件加上background

1
android:background="@drawable/round_bg"

就可以实现了，根据自己的需求添加相应的属性就可以。

2、背景选择器

背景选择器我们会使用selector标签来实现，基本属性和使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//background_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 没有焦点时的背景图片 -->
    <item android:state_enabled="true" android:state_window_focused="false" android:drawable="@drawable/round_bg" />
    <!-- 获得焦点时的图片背景 -->
    <item android:state_focused="true" android:drawable="@drawable/round_bg4" />

    <!-- 触摸模式按下时的背景图片 -->
    <item  android:state_pressed="true" android:drawable="@drawable/round_bg2"  />
    <item android:state_focused="true" android:state_enabled="true"  android:drawable="@drawable/round_bg3" />
    <item android:state_enabled="true"  android:drawable="@drawable/round_bg4" />
    <!--
    android:state_selected是选中
    android:state_focused是获得焦点
    android:state_pressed是点击
    android:state_enabled是设置是否响应事件,指所有事件
    -->
</selector>

使用背景选择器也很简单，只需要在你要使用的控件加上background

1
android:background="@drawable/background_selector"

也就是把你刚才写的背景选择器作为背景属性使用就可以了。