Android 性能 XML Drawable vs CSS3 vs Images

Question

我正在尝试在我的 Android 应用程序中创建一些自定义切换按钮。我希望它们看起来像下面这样:

在此图像中，75、39 和 A-Z 处于“关闭”状态，37 处于“打开”状态。

所以我的问题是:

哪个是在 Android 中生成这些内容的最佳方式:

1. 带有边框、背景、边框半径的 XML 可绘制对象

2. 每种形状、状态和屏幕密度的一组 9 block 图像，或

3. 使用 WebView 并使用 CSS3？

Answer 1

好的。我使用了 XML Drawable。这是我的解决方案:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
            <item 
                android:top="0dp" 
                android:bottom="2dp" 
                android:left="0dp" 
                android:right="0dp">

                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_border_dark" />
                    <corners 
                        android:topLeftRadius="20dp"
                        android:topRightRadius="20dp"
                        android:bottomRightRadius="30dp"
                        android:bottomLeftRadius="30dp" />
                </shape>
            </item>

            <item 
                android:top="2dp" 
                android:bottom="0dp" 
                android:left="0dp" 
                android:right="0dp">

                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_border_light" />
                    <corners 
                        android:topLeftRadius="30dp"
                        android:topRightRadius="30dp"
                        android:bottomRightRadius="20dp"
                        android:bottomLeftRadius="20dp" />
                </shape>
            </item>

            <item 
                android:top="1dp" 
                android:right="1dp" 
                android:left="1dp" 
                android:bottom="1dp">

                <shape android:shape="rectangle" >
                    <solid android:color="@color/toggle_bg_on" />
                    <corners 
                        android:topLeftRadius="20dp"
                        android:topRightRadius="20dp"
                        android:bottomRightRadius="20dp"
                        android:bottomLeftRadius="20dp" />
                </shape>
            </item>   
        </layer-list>
    </item> 
    <item>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
            <item 
                android:top="0dp" 
                android:bottom="2dp" 
                android:left="0dp" 
                android:right="0dp">

                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_border_light" />
                    <corners 
                        android:topLeftRadius="20dp"
                        android:topRightRadius="20dp"
                        android:bottomRightRadius="30dp"
                        android:bottomLeftRadius="30dp" />
                </shape>
            </item>

            <item 
                android:top="2dp" 
                android:bottom="0dp" 
                android:left="0dp" 
                android:right="0dp">

                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_border_dark" />
                    <corners 
                        android:topLeftRadius="30dp"
                        android:topRightRadius="30dp"
                        android:bottomRightRadius="20dp"
                        android:bottomLeftRadius="20dp" />
                </shape>
            </item>

            <item 
                android:top="1dp" 
                android:right="1dp" 
                android:left="1dp" 
                android:bottom="1dp">

                <shape android:shape="rectangle" >
                    <solid android:color="@color/toggle_bg_off" />
                    <corners 
                        android:topLeftRadius="20dp"
                        android:topRightRadius="20dp"
                        android:bottomRightRadius="20dp"
                        android:bottomLeftRadius="20dp" />
                </shape>
            </item>   
        </layer-list>
    </item>  
</selector>