タグ「shape」 の検索結果(1/1)

2010年9月 7日

XMLなDrawableを使ってみよう

AndroidのDrawableにはPNGとかJPGとか直接放り込んだり、あるいは押したり離したり選択されたりとか言った、状態付きButtonをXMLで...ぐらいがよく使われるトコロですが、意外なモノがDrawableの範疇にあったりします。

Drawable Resources
http://developer.android.com/guide/topics/resources/drawable-resource.html

で、このうち最後のShape Drawableというものが、塗りとか線とかがかけます。

shapeとかgradientとかみてもさっぱりだと思うので、実例を以下に。

たとえば、グラデーション背景+小物みたいな以下の画像があったとします。

car.png

これを普通にImageViewではっつけると、こうなります。

car_cap1.png

で、背景部分だけサイズ可変にしたいとか、そもそも画面解像度が上がってくると、この様な単純なグラデーションPNGやJPGでも、ファイルサイズが意外とバカにできません。

そんな際には、XMLでDrawableを書いてしまいます。

drawable/blueback.xml


<?xml version="1.0" encoding="utf-8"?>
<!-- blue-naname-grade -->
<shape
	xmlns:android="http://schemas.android.com/apk/res/android">
	<gradient
			android:startColor="#55AAFF"
			android:endColor="#0022FF"
			android:angle="135"
	/>
</shape>

layout/main.xml


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:background="@drawable/blueback">
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="@drawable/pat_tiled">

		<ImageView
			android:src="@drawable/car1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_gravity="center"
			android:layout_weight="1"
			android:scaleType="center" />
		<ImageView
			android:src="@drawable/car2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_gravity="center"
			android:layout_weight="1"
			android:scaleType="center" />
	</LinearLayout>
</FrameLayout>

背景を除いた小物部分は別途ちまちまと張ってください。

car_cap2.png

するとこうなります。

drawableはどこまでも可変ですから、横にしてもグラデーションは問題ありません。

car_cap3.png

※小物が変なのは突っ込んじゃいけません><

XMLなdrawableと、tiledなXML drawableを組み合わせると...。

pat1.png

car_cap4.png

こんなことにもなります。

どこまで実画像でやって、どこまでXMLでやって、どこまでコードでやるかはセンスの問題だと思いますが、個人的には慣れれば慣れるほど小物XMLがdrawable、include、inflate用に増えていく気がします。広義のオブジェクト指向というか...。

P.S. SyntaxHighlighterがおかしいらしく、XMLが変です。自己閉じ型が勝手に変な変換される...。