画像をタイル状に設置するにあたってまず思いつくのはxmlで定義してしまうことだろう。
例えばこのように定義し
レイアウトエディタでこのように定義する。
これを実行するとこのようになる。

では、横だけ繰り返したい場合はどうすればいいのか。
これから見ていこう。
例えばこのように定義し
レイアウトエディタでこのように定義する。
これを実行するとこのようになる。

では、横だけ繰り返したい場合はどうすればいいのか。
これから見ていこう。
横だけの繰り返し
まずよこだけの繰り返しに適した画像を準備する。

横幅が1pxしかないのでちょっとわかりづらいが、上から下にかけてのグラデーション画像だ。
(グラデーションならshapeで定義すればいいのだが、ここではタイルのサンプルとしてわかりやすくするためにあえて画像を使用する。)
これを先ほどと同じようにxmlで定義してみる。
実行するとこのようになる。

一見すると大丈夫のように見えるが、Viewの高さを変えてみるとこのようになる。


縦のサイズがあっていないので、おかしなことになっている。
gradient_tile.xmlでtileModeX="repeat"を指定すればこのように縦の繰り返しはなくなる。

しかし、tileModeXはAPIレベル21からだし、縦はViewの高さにぴったり合わせたい。
そうなるともう独自クラスを作るしか無い。
タイル用クラスを作成する
ではタイル用のクラスを作成しよう。
Viewのサブクラスとしてこのようにする。
1.繰り返し用の画像をコンストラクタで読み込んでおく。
2.Viewの縦横サイズを所持しておく。
3.Viewの縦にピタリと収まる様にしつつ、横いっぱいに描画を行う。
これをレイアウトに組み込んでみる。
これを実行するとこのようになる。


Viewの縦サイズを変えても問題なく表示された。
まずよこだけの繰り返しに適した画像を準備する。

横幅が1pxしかないのでちょっとわかりづらいが、上から下にかけてのグラデーション画像だ。
(グラデーションならshapeで定義すればいいのだが、ここではタイルのサンプルとしてわかりやすくするためにあえて画像を使用する。)
これを先ほどと同じようにxmlで定義してみる。
実行するとこのようになる。

一見すると大丈夫のように見えるが、Viewの高さを変えてみるとこのようになる。


縦のサイズがあっていないので、おかしなことになっている。
gradient_tile.xmlでtileModeX="repeat"を指定すればこのように縦の繰り返しはなくなる。

しかし、tileModeXはAPIレベル21からだし、縦はViewの高さにぴったり合わせたい。
そうなるともう独自クラスを作るしか無い。
タイル用クラスを作成する
ではタイル用のクラスを作成しよう。
Viewのサブクラスとしてこのようにする。
1.繰り返し用の画像をコンストラクタで読み込んでおく。
2.Viewの縦横サイズを所持しておく。
3.Viewの縦にピタリと収まる様にしつつ、横いっぱいに描画を行う。
これをレイアウトに組み込んでみる。
これを実行するとこのようになる。


Viewの縦サイズを変えても問題なく表示された。
コメント