Android Performance XML Drawable vs CSS3 vs Bilder

Question

Ich versuche, einige benutzerdefinierte Umschaltflächen in meiner Android App zu erstellen. Und ich möchte, dass sie wie folgt aussehen:

In diesem Bild 75, 39 und A-Z sind im "Aus" -Zustand und 37 ist in dem Zustand "Ein".

Also meine Frage ist:

Welches ist die beste Art und Weise ist die in Android zu generieren:

1. XML Drawables mit Rahmen, Hintergründe, Grenzradien

2. Ein Bündel von 9- patch Bilder für jede Form, Zustand und Bildschirmdichte, oder

3. Verwenden Sie ein WebView und verwenden Sie CSS3?

Answer 1

In Ordnung. Ich bin mit dem XML Drawable gegangen. Hier ist meine Lösung:

<?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>