Android开发

Android 实现圆角按钮 ( selector状态选择器)

2020-05-15  本文已影响0人  W会痛的石头

不知道说什么,直接进入正题吧。开整

selector

<!--注意 android:background="@drawable/btn_selector"-->

    <Button

        android:id="@+id/Button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:background="@drawable/btn_selector"

        android:text="@string/hello_world" />

btn_selector是一个自定义的xml文件,继续看这个文件。在drawable目录下新建一个selector文件,btn_selector.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- Button正常状态下的背景 -->

    <item android:drawable="@drawable/btn_bg_normal" android:state_pressed="false"/>

    <!-- Button按下时的背景 -->

    <item android:drawable="@drawable/btn_bg_pressed" android:state_pressed="true"/>

</selector>

btn_selector.xml文件中大家又发现了btn_bg_normalbtn_bg_pressed,这两个文件也是在res/drawable目录下的定义的。

btn_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- 按钮正常的时候的背景 -->

<!-- shape的默认形状是rectangle,还有oval(椭圆),line(线),ring(圆环)-->

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

    <!-- 矩形的圆角弧度 -->

    <corners android:radius="10dp" />

    <!-- 矩形的填充色 -->

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

    <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->

    <stroke

        android:width="1dp"

        android:dashWidth="8dp"

        android:dashGap="4dp"

        android:color="#4eb621" />

</shape>

btn_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- 矩形的圆角弧度 -->

    <corners android:radius="10dp" />

    <!-- 矩形的填充色 -->

    <solid android:color="#3F51B5" />

    <!-- 矩形的边框的宽度,每段虚线的长度,和两段虚线之间的颜色和颜色 -->

    <stroke

        android:width="1dp"

        android:color="#4eb621"

        android:dashGap="4dp"

        android:dashWidth="8dp" />

</shape>

gradient 渐变背景色

<gradient

  android:angle="integer"

  android:centerX="Float"

  android:centerY="Float"

  android:centerColor="integer"

  android:startColor="color"

  android:endColor="color"

  android:gradientRadius="integer"

  android:type=["linear"|"radial"|"sweep"]

  android:usesLevel=["true"|"false"]

  />

angle:角度,当 android:type=“linear”时有效 ,角度数应该是45度的倍数,逆时针方向旋转

centerX:Float。渐变色中心的 X 相对位置( 0-1.0 )。当 android:type=“linear”时无效

centerY:Float。渐变色中心的 Y 相对位置( 0-1.0 )。当 android:type=“linear”时无效

centerColor:color。可选的颜色,出现在 start 和 end 颜色之间。

gradientRadius:Float。渐变色的半径。当 android:type=“radial” 时有效。

startcolor:开始的颜色

endcolor:结束的颜色

type:渐变色的样式。有效值为:

“linear”:线性渐变,默认值

“radial”:环形渐变。 start 颜色是处于中间的颜色

“sweep”:扇形渐变

useLevel:Boolean。“ true ”表示可以当作 LevelListDrawable 使用

两种创建方式:

以Xml方式写出状态选择器,然后将我们写好的selector状态器存在放res - drawable res - color 文件夹下,较为常用

在代码中动态创建selector,实现不如前者简单,但胜在灵活,一般用在选择器状态改变频繁的情况下

注意(请格外注意):

设置 bankgrpud的时候,我们的selector状态选择器存放在res - drawable 下!!!

设置TextColor属性的时候,我们的selector状态选择器存放在res - color 下!!!

状态设置类型:

常用类型

//设置是否按压状态,一般在true时设置该属性,表示已按压状态,默认为false

android:state_pressed

//设置是否选中状态,true表示已选中,false表示未选中

android:state_selected

//设置是否勾选状态,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选

android:state_checked

//设置勾选是否可用状态,类似state_enabled,只是state_enabled会影响触摸或点击事件,state_checkable影响勾选事件

android:state_checkable

//设置是否获得焦点状态,true表示获得焦点,默认为false,表示未获得焦点

android:state_focused

//设置触摸或点击事件是否可用状态,一般只在false时设置该属性,表示不可用状态

android:state_enabled

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

常用类型示例:

*样式一:点击改变字体颜色 - android:state_pressed(按压状态) **

selector状态选择器(bg_btn_one (存放 res - color))

<?xml version="1.0" encoding="utf-8"?>

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

    <item android:color="@color/colorPrimary" android:state_pressed="true"/>

    <item android:color="@color/colorAccent" />

</selector>

使用处:

    <Button

        android:textColor="@color/bg_btn_one"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:text="样式一:点击改变字体颜色"

        android:gravity="center"

        />

样式二:点击改变背景颜色

selector状态选择器(bg_btn_two (存放 res - drawable))

<?xml version="1.0" encoding="utf-8"?>

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

    <item android:drawable="@color/colorAccent" android:state_pressed="true"/>

    <item android:drawable="@color/colorPrimary" />

</selector>

使用处:

  <Button

        android:background="@drawable/bg_btn_two"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:text="样式二:点击改变背景颜色"

        android:gravity="center"

        />

样式三:改变背景色同时改变字体色

selector状态选择器(bg_btn_one (存放 res - color))

<?xml version="1.0" encoding="utf-8"?>

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

    <item android:color="@color/colorPrimary" android:state_pressed="true"/>

    <item android:color="@color/colorAccent" />

</selector>

selector状态选择器(bg_btn_two (存放 res - drawable))

<?xml version="1.0" encoding="utf-8"?>

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

    <item android:drawable="@color/colorAccent" android:state_pressed="true"/>

    <item android:drawable="@color/colorPrimary" />

</selector>

使用处:

<Button

        android:background="@drawable/bg_btn_two"

        android:textColor="@color/bg_btn_one"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:text="样式三:改变背景色同时改变字体色"

        android:gravity="center"

        />

样式四: android:state_checked (勾选状态)

selector状态选择器(bg_check_three(存放 res - drawable))

<?xml version="1.0" encoding="utf-8"?>

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

    <item android:drawable="@color/colorPrimary" android:state_checked="true"/>

    <item android:drawable="@color/colorAccent" />

</selector>

使用处:

  <CheckBox

        android:layout_marginTop="20dp"

        android:id="@+id/btn"

        android:background="@drawable/bg_check_three"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:text="Checked:点击后背景状态长存"

        android:gravity="center"

        />

样式五:android:state_focused (焦点状态)

selector状态选择器(bg_check_three(存放 res - color))

<?xml version="1.0" encoding="utf-8"?>

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

    <item android:color="@color/colorPrimary" android:state_focused="true"/>

    <item android:color="@color/colorAccent" />

</selector>

<EditText

        android:textColor="@color/bg_edittext_one"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:text="焦点样式:改变背景色同时改变字体色"

        android:gravity="center"

        />

 读到最后的福利,这才是重点啊。哈哈哈哈哈哈

上一篇 下一篇

猜你喜欢

热点阅读