2013-04-17 6 views
9

Android 앱에 맞춤 토글 버튼을 만들려고합니다. 이 이미지 75, 39Android 성능 XML 드로어 블 대 CSS3 대 이미지

Custom toggle buttons

및 A-Z는 "꺼짐"상태에 있고 (37)는 "온"상태에 : 그리고 나는 그들에게 다음과 같이하고자합니다.

그래서 제 질문은 :

안드로이드에서 그 생성하는 가장 좋은 방법입니다

: 테두리, 배경을 가진

  1. XML의 드로어 블을, 국경 반경

  2. 9의 무리 각 모양, 상태 및 화면 밀도에 대한 패치 이미지 또는

  3. WebView를 사용하고 CSS3를 사용합니까?

+0

: http://stackoverflow.com/questions/13771299/buttons-spacing/13772037#13772037 – sromku

답변

5

좋아요. 필자는 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> 
당신은 가능한 경량의 솔루션이 질문을 참조 할 수 있습니다