AndroidパフォーマンスXML Drawable対CSS3画像

Question

私は自分のAndroidアプリケーションでいくつかのカスタムトグルボタンを作成しようとしています。この画像75、39で

、および-Zは「オフ」の状態にあり、37が「オン」の状態にある。そして、私は彼らが次のようになりたいです。

だから私の質問は以下のとおりです。

アンドロイドのものを生成するための最良の方法です：ボーダー、背景、境界線の半径

と

1. XMLのドロワブル9-束各形状、状態、画面密度のパッチ画像、または

2. 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> 

あなたは可能軽量なソリューションのためにこの質問を参照することができ