Android性能：XML Drawable vs CSS3 vs 图像

Question

我正在尝试在我的Android应用程序中创建一些自定义切换按钮，并希望它们看起来像下面的图片所示。

在这张图片中，数字75、39和A-Z处于“关闭”状态，而数字37处于“打开”状态。

那么我的问题是：

哪种方式是在Android中生成这些按钮的最佳方式：

1. 使用带边框、背景和边框半径的XML可绘制对象 2. 为每个形状、状态和屏幕密度使用一组9-patch图像，或者 3. 使用WebView并使用CSS3？

- chrislondon

---

您可以参考此问题，了解可能的轻量级解决方案：http://stackoverflow.com/questions/13771299/buttons-spacing/13772037#13772037 - sromku

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>

- chrislondon