Android中设计开关效果的UI

最终效果如下:

具体来说就是实现了checkbox自定义选中和为选择样式,菜单项根据不同位置设置不同背景.

先上整体布局文件代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DFE1E0"
android:orientation="vertical">
    <LinearLayout        style="@style/SettingItemTop"
        android:background="@drawable/setting_list_top"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:orientation="horizontal">
         <TextView
            style="@style/MySettingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开启通知"             />
        <CheckBox
             style="@style/MyCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
        <LinearLayout
        style="@style/SettingItemMiddle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:orientation="horizontal">
        <TextView
            style="@style/MySettingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开启铃声"             />
        <CheckBox
            style="@style/MyCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
        <LinearLayout
        style="@style/SettingItemBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:orientation="horizontal">
         <TextView
            style="@style/MySettingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开启震动"             />
        <CheckBox
             style="@style/MyCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

注意到:

查看本栏目更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

style="@style/MySettingText"

这一句,这里用了style.xml这个文件来控制样式.Android实际开发中,会有很多时候一些部件的属性是要重复出现的,如果每个控件都要单独的 把这些属性单独的输入一次,那样会很没有效率.可以将重复的代码添加到style.xml中,设置成一种样式,在用到这些属性是引用这个样式即 可.style="@style/MySettingText"这个是设置文字的属性,代码如下:

<style name="MySettingText">
        <item name="android:layout_margin">10dp</item>
        <item name="android:layout_weight">6</item>
</style>

这里仅用了两个属性.开发中可以根据实际需要自行修改.以后每个设置项的文字不需要再把这些属性再添加一边,引用一下这个style即可.

CheckBox样式自定义用到了selector.

style="@style/MyCheckBox"

此句对应的代码:

<style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/check</item>
        <item name="android:layout_margin">10dp</item>
        <item name="android:layout_weight">1</item>
</style>

注意到此句:

<item name="android:button">@drawable/check</item>

这里就用了selector自定义样式.

在res/drawable下建立一名为check(自定)的xml文件,代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/on" />
  <item android:state_checked="false" android:drawable="@drawable/off" />
</selector>

其中

@drawable/on为选择时checkbox的图像,@drawable/off反之.

还注意到菜单中第一项上方为圆角,中间项为四角都为方,最后一项为下部圆角,这个就是通过设置不同的背景图片实现的了,具体不细表.

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索圆角
， 样式
， 代码
， 属性
， drawable
， android 样式
， style
， 样式控件android
， 自定义开关
， Style.xml
， Style.xml应用
， Style.xml实例应用
， android自定义样式
Android圆角效果
android ui效果、android ui效果大全、android ui界面设计、android ui设计规范、android ui设计工具，以便于您获取更多的相关知识。