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>