選択 モバイル版に入る | PC版を継続
Android開発に助かるApkSchool版主募集中DISCUZ!X3.1 Japanese Version提供
表示: 4897|返信: 0

shapeを使ってボタン、テキスト等の背景を描く

[リンクをコピー]
发表于 2013-11-5 16:57:10 | 显示全部楼层 |阅读模式
webhostingpad
shapeタグの使用により、グラデーションや枠線、角丸などの効果を持った背景形状を定義できます。
これでボタン等の背景をわざわざ画像にしなくても見た目を工夫したAPPを簡単に作成できるようになります。
単純なグラデーションでも画像だとファイルサイズが大きくなってしまいがちですが、
shapeタグを使うことでこの問題を解決することができます。


定義した形状は、backgroundで指定して使用します。

では、下記のものを作成しました。

■完成イメージ




■XMLの実装

main.xml
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:background="@drawable/phonetitlebar_bg" >

  5.     <EditText
  6.         android:id="@+id/search_kana"
  7.         android:layout_width="0dip"
  8.         android:layout_height="wrap_content"
  9.         android:layout_gravity="center_vertical"
  10.         android:layout_marginLeft="5dip"
  11.         android:layout_marginRight="5dip"
  12.         android:layout_weight="1"
  13.         android:background="@drawable/input_text_background"
  14.         android:drawableLeft="@drawable/edittext_search_image"
  15.         android:hint="@string/search_hit1"
  16.         android:paddingLeft="5dip"
  17.         android:textSize="14sp" >
  18.     </EditText>
  19.    
  20.     <EditText
  21.         android:id="@+id/search_telno"
  22.         android:layout_width="0dip"
  23.         android:layout_height="wrap_content"
  24.         android:layout_gravity="center_vertical"
  25.         android:layout_marginLeft="5dip"
  26.         android:layout_marginRight="5dip"
  27.         android:layout_weight="1"
  28.         android:background="@drawable/input_text_background"
  29.         android:drawableLeft="@drawable/edittext_search_image"
  30.         android:hint="@string/search_hit2"
  31.         android:paddingLeft="5dip"
  32.         android:textSize="14sp" >
  33.     </EditText>

  34.     <Button
  35.         android:layout_width="wrap_content"
  36.         android:layout_height="30dip"
  37.         android:layout_marginRight="5dip"
  38.         android:layout_gravity="center_vertical"
  39.         android:background="@drawable/button_background"
  40.         android:textColor="@android:color/white"
  41.         android:text="@string/search_text" />

  42. </LinearLayout>
コードコピー
input_text_background.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">

  3.     <item android:drawable="@drawable/input_text_background_press" android:state_pressed="true"/>
  4.     <item android:drawable="@drawable/input_text_background_press" android:state_focused="true"/>
  5.     <item android:drawable="@drawable/input_text_background_normal" android:state_focused="false" android:state_pressed="false"/>
  6.     <item android:drawable="@drawable/input_text_background_normal" android:state_focused="false"/>

  7. </selector>
コードコピー
input_text_background_press.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  3.     <item>
  4.         <shape android:shape="rectangle" >
  5.             <solid android:color="@color/whitesmoke" />

  6.             <corners android:radius="5dp" />
  7.             <!-- 枠線 -->
  8.             <stroke
  9.                 android:width="1dp"
  10.                 android:color="@color/seagreen" />

  11.             <size
  12.                 android:height="30dp"
  13.                 android:width="50dp" />
  14.         </shape>
  15.     </item>

  16. </layer-list>
コードコピー
input_text_background_normal.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  3.     <item>
  4.         <shape android:shape="rectangle" >
  5.             <solid android:color="@color/whitesmoke" />

  6.             <corners android:radius="5dp" />
  7.             <!-- 枠線 -->
  8.             <stroke
  9.                 android:width="1dp"
  10.                 android:color="@color/white" />

  11.             <size
  12.                 android:height="30dp"
  13.                 android:width="50dp" />
  14.         </shape>
  15.     </item>

  16. </layer-list>
コードコピー
button_background.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">

  3.     <item android:drawable="@drawable/button_background_press" android:state_pressed="true"/>
  4.     <item android:drawable="@drawable/button_background_normal" android:state_focused="false" android:state_pressed="false"/>
  5.     <item android:drawable="@drawable/button_background_normal" android:state_focused="true"/>
  6.     <item android:drawable="@drawable/button_background_normal" android:state_focused="false"/>

  7. </selector>
コードコピー
button_background_press.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  3.     <item>
  4.         <shape android:shape="rectangle" >
  5.             <corners android:radius="4dp" />

  6.             <gradient
  7.                 android:angle="270"
  8.                 android:endColor="#9499AA"
  9.                 android:startColor="#294275"
  10.                 android:type="linear" />

  11.             <stroke
  12.                 android:width="2dp"
  13.                 android:color="#000000" />
  14.         </shape>
  15.     </item>

  16. </layer-list>
コードコピー
button_background_normal.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  3.     <item>
  4.         <shape android:shape="rectangle" >
  5.             <corners android:radius="4dp" />

  6.             <gradient
  7.                 android:angle="270"
  8.                 android:endColor="#294275"
  9.                 android:startColor="#9499AA"
  10.                 android:type="linear" />

  11.             <stroke
  12.                 android:width="0.5dip"
  13.                 android:color="#000000" />
  14.         </shape>
  15.     </item>

  16. </layer-list>
コードコピー
プロジェクトソースは、

をDLしてください。



shapeの使い方、と、
shapeタグを使ってボタンの背景色をグラデーションにする方法は、下記をご参照ください。


http://techbooster.org/android/ui/14993/

この記事に更なる添付があります

貴方は ログイン 後、ダウンロード・閲覧が可能となる,アカウントない?直ぐ登録

x
返信

道具使用 レポート

返信は先にログインが必要 ログイン | 直ぐ登録

フォーラム点数規則

フリーランス

モバイル版|APK School Net  

GMT+8, 2017-12-12 06:32 , Processed in 0.131960 second(s), 25 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速返信 トップへ リストへ