Android Performance XML Drawable vs CSS3 vs Images

Question

我正在尝试在Android应用中创建一些自定义切换按钮。我希望它们看起来如下：

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

所以我的问题是：

在Android中生成这些内容的最佳方式是：

1. 带有边框，背景，边框半径的XML绘图

2. 每个形状，状态和屏幕密度的一堆9补丁图像，或

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>