Android Performance XML Drawable vs CSS3 vs Images

Question

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

在该图像中,75,39和AZ处于"关闭"状态,37处于"开"状态.

所以我的问题是:

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

1. 带有边框,背景,边框半径的XML drawable

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>