Android Monzo 风格切换按钮设计

如何解决Android Monzo 风格切换按钮设计

我正在尝试在我的 Android 应用程序中创建 Monzo (Android) 样式开关。我设法通过 Thumb 和 Track 的自定义 drawable 非常接近地创建它，但仍然不一样。

仍然缺少的东西：

1. 我给了顶部和底部填充，但仍然没有显示填充。 Thumb and Track drawable 中没有 Margin 选项。
2. 在 Monzo 应用程序中，两个名称都显示，但在我的情况下，名称仅基于打开/关闭显示

我附上了两个截图 - 来自 Monzo 应用程序和我的测试应用程序。我还附上了我的 Thumb & Track 可绘制代码。

有人可以建议我如何实现相同的设计。如果 Switch 不是正确的组件，那么我可以使用哪个其他组件。

蒙佐：

我的应用：

拇指可绘制代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <size android:width="160dp"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <size android:width="160dp"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
</selector>

跟踪可绘制代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/darker_gray"/>
            <size android:height="40dp"/>
            <corners android:radius="20dp"/>
            <padding android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"
                android:left="10dp"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/darker_gray"/>
            <size android:height="40dp"/>
            <corners android:radius="20dp"/>
            <padding android:top="10dp"
                    android:right="10dp"
                    android:bottom="10dp"
                    android:left="10dp"/>
        </shape>
    </item>
</selector>

解决方法

试试下面的代码：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:orientation="horizontal"
    android:background="@drawable/bg_track">
    <LinearLayout
        android:id="@+id/llFeed"
        android:layout_weight=".5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_thumb"
        android:orientation="horizontal"
        android:gravity="center"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">
        <TextView
            android:id="@+id/tvFeed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Feed"
            android:textSize="14sp"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/llManage"
        android:layout_weight=".5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">
        <TextView
            android:id="@+id/tvManage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Manage"
            android:textSize="14sp"
            android:textColor="@color/white"/>
    </LinearLayout>
</LinearLayout>

以上输出：

,

实际上，我可以通过为与“Track”颜色相同的“Thumb”设置“Stroke”来解决这个问题。下一个问题是它没有在轨道侧显示文本......意味着当开关关闭时，另一侧没有文本。 我解决这个问题的方法是创建 2 个标签并将它们限制在 Switch 之上，并且我将 Switch On Off 文本保留为空“”。

拇指代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <size android:width="160dp"/>
            <corners android:radius="20dp"/>
            <stroke android:color="@color/lightGray"
                android:width="5dp"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <size android:width="160dp"/>
            <corners android:radius="20dp"/>
            <stroke android:color="@color/lightGray"
                android:width="5dp"/>
        </shape>
    </item>
</selector>