时间戳

首页 > 解决方案 > 如图所示的开关列表

java - 如图所示的开关列表

问题描述

我正在开发一个安卓软件，我在设置部分需要这个完全相同的设计。我已经定制了一个开关，但我无法达到相同的结果。

这是我的代码：

设置_活动：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center">

    <Switch
        android:id="@+id/switch2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Econet Mode"
        android:track="@drawable/switch_track"
        android:thumb="@drawable/swithc_thumb"
        />

</LinearLayout>

开关拇指：

<stroke android:width="4dp" android:color="@android:color/transparent"/>

开关轨道：

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


<shape android:shape="rectangle">
    <corners android:radius="20dp"></corners>
    <solid android:color="@color/colorPrimary"></solid>
</shape>


<item android:state_checked="false">

    <shape android:shape="rectangle">
        <corners android:radius="20dp"></corners>
        <solid android:color="@color/colorGrey"></solid>
    </shape>
</item>

这是我想看到的最终结果：

预期结果

标签： javaandroidandroid-layout

解决方案

创建可绘制的 thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="#ffffff" />
            <corners android:radius="100dp" />
            <size android:width="24dp" android:height="25dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
</selector>

创建可绘制的 track_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="@color/text_pink" />
            <corners android:radius="25dp" />
            <size android:width="2dp" android:height="18dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">

            <corners android:radius="25dp" />
            <size android:width="2dp" android:height="18dp" />
            <stroke
                android:width="2dp"
                android:color="@color/white" />
        </shape>
    </item>
</selector>

像这样使用它

<android.support.v7.widget.SwitchCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:padding="5dp"
                    android:thumb="@drawable/thumb_selector"
                    app:track="@drawable/track_selector" />

推荐阅读