背景色 グラデーション&タイル

| コメント(0)
レイアウトやテキストを配置した時、単色では面白くない。 Background に画像を指定する方法が最も簡単ですが、たとえば画面全体に854x480ドットの画像を読み込むとかなり重くなります。
こんな時は、HTML の Background のようにグラデーションやタイルを使いたい。

グラデーション
bmp22.bmp  
startColor から endColor へ 角度指定でグラデーションをする。
  1. 下記のコードを xxxx.xml としてフォルダ drawable に保存する。(Ctrl+S)で保管を忘れないように!
  2. LinearLayout、TextView、Button などの Background に先ほどの xxxx.xml を指定する。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FFFFFFFF"
android:endColor="#FF000000"
android:angle="270" />
</shape>


●色の指定は、start と end を指定できます。上2桁は透明度、下6桁は色(16進数)

android:startColor="#FFFFFFFF"
android:endColor="#FF000000"

●角度は、45°単位で指定可能。※45°以外にすると描画がされない。

android:angle="270"

タイル

やり方は上記のグラデーションと同じ、指定の画像を上下、左右に同じ画像をタイル状に描画する。

  1. まず、1枚の画像を drawable に用意する。(下記では tile.png)
  2. 下記のコードを yyyy.xml  としてフォルダ drawable  に保存する。
  3. LinearLayout、TextView、Button などの Background に先ほどの yyyy.xml を指定する。

<?xml version="1.0" encoding="utf-8"?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/tile"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="fill_horizontal|top"
android:tileMode="mirror" />


繰り返しの設定

android:tileMode

  • disabled  ビットマップをタイル化しません。これがデフォルトの値です。
  • clamp     オリジナルの境界を超えて描画された場合に端の色で反復します。
  • repeat    イメージを水平と垂直に繰り返します。
  • mirror    イメージを水平と垂直に繰り返し、隣り合うイメージが常に繋ぎ合うように鏡像に替えます。
●配置の設定 (全ての説明は無理なので、実際に色々試してみてください)

android:gravity

  • top                      オブジェクトをコンテナの上端に置き、そのサイズは変更しません。
  • bottom               オブジェクトをコンテナの下端に置き、そのサイズは変更しません。
  • left                      オブジェクトをコンテナの左端に置き、そのサイズは変更しません。
  • right                   オブジェクトをコンテナの右端に置き、そのサイズは変更しません。
  • center_vertical オブジェクトをコンテナの垂直方向の中心に配置し、そのサイズは変更しません。
  • fill_vertical         オブジェクトのサイズが必要に応じ垂直方向に増えることで、そのコンテナを埋め尽くします。
  • center_horizontal オブジェクトをコンテナの水平方向の中心に配置し、そのサイズは変更しません。
  • fill_horizontal    オブジェクトのサイズが必要に応じ水平方向に増えることで、そのコンテナを埋め尽くします。
  • center                オブジェクトをコンテナの垂直軸と方向軸両方の中心に配置し、そのサイズは変更しません。
  • fill                       オブジェクトのサイズが必要に応じ水平方向と垂直方向に増えることで、コンテナを埋め尽くします。これがデフォルトです。
  • clip_vertical      追加のオプションで、子の要素の上端かつ ( または ) 下端がそのコンテナの境界で切り抜かれるように設定することができます。切り抜きは垂直方向の gravity に基づいて行われます。つまり、gravity が top では下端が切り抜かれ、gravity が bottom では上端が切り抜かれ、どちらでもなければ上下両端が切り抜かれます。
  • clip_horizontal  追加のオプションで、子の要素の左端かつ ( または ) 左端がそのコンテナの境界で切り抜かれるように設定することができます。切り抜きは水平方向の gravity に基づいて行われます。つまり、gravity が left では右端が切り抜かれ、gravity が right であれば左端が切り抜かれ、どちらでもなければ左右両端が切り抜かれます。
 
サンプルはこちらで。Test.lzh 



コメントする