2014年4月8日火曜日

Android InsetDrawableを活用する

タグ等、デザイン的に大きくしたくないけれど、タップに反応させるコンポーネントは、実際にタップできる領域を見た目より大きくとるのが鉄則です。



これを実現する方法が3つあります。

1. Viewの階層で実現する

すぐ思いつく方法ですが、Viewが増えるので初心者っぽいです。

  1. <!-- 透明の領域用 -->  
  2. <FrameLayout  
  3.     ...  
  4.     android:padding="8dp"  
  5.     android:background="@android:color/transparent" >  
  6.   
  7.     <!-- タグ部分 -->  
  8.     <TextView  
  9.         ...  
  10.         android:paddingTop="2dp"  
  11.         android:paddingLeft="8dp"  
  12.         android:paddingRight="8dp"  
  13.         android:paddingBottom="2dp"  
  14.         android:background="@color/tag_bg" />  
  15.   
  16. </FrameLayout>  
*@color/tag_bgはColorStateListです。   



2. 9patch画像で実現する

透明の領域とタグの背景部分をあわせた9patch画像を用意します。Viewが増えないので中級者です。
ただ、各解像度用の画像を用意するのは結構面倒です。おまけにタップしたときの画像も用意しないといけません。



  1. <TextView  
  2.     ...  
  3.     android:background="@drawable/tag_bg" />  




3. InsetDrawableで実現する

InsetDrawableを使えばViewも増えないし、画像もいりません。上級者ですね。

res/drawable/tag_bg_normal.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:insetTop="8dp"  
  4.     android:insetRight="8dp"  
  5.     android:insetBottom="8dp"  
  6.     android:insetLeft="8dp">  
  7.     <shape>  
  8.         <solid android:color="@color/green" />  
  9.         <padding android:top="2dp" android:left="8dp"   
  10.                  android:right="8dp" android:bottom="2dp" />  
  11.     </shape>  
  12. </inset>  
res/drawable/tag_bg_pressed.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:insetTop="8dp"  
  4.     android:insetRight="8dp"  
  5.     android:insetBottom="8dp"  
  6.     android:insetLeft="8dp">  
  7.     <shape>  
  8.         <solid android:color="@color/orange" />  
  9.         <padding android:top="2dp" android:left="8dp"   
  10.                  android:right="8dp" android:bottom="2dp" />  
  11.     </shape>  
  12. </inset>  
res/drawable/tag_bg.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.       
  4.     <item android:state_pressed="true"  
  5.           android:drawable="@drawable/tag_bg_pressed" />  
  6.     <item android:drawable="@drawable/tag_bg_normal" />  
  7.   
  8. </selector>  


  1. <TextView  
  2.     ...  
  3.     android:background="@drawable/tag_bg" />  
* 残念ながらinsetのなかのshapeのsolidでColorStateListを指定しても適用されませんでした。





0 件のコメント:

コメントを投稿