記録・分析ノート 9-patch(ナインパッチ)ボタンを作る

一つ前の記事ではデザイン反映をさせないみたいなことを書きましたが・・・

やれるところまでやってみようかと思いました。

というわけで、デザイン案からボタン画像を作成します。

デザイン案

ここからボタン画像を切り出します。

PixcelMator を使ってます

ボタンは何もしていない状態と、押された状態、フォーカスされた状態、押せない状態・・・あともうひとつあった気がするけど忘れました。これらの状態ごとの画像を用意します。多くの携帯電話はトラックボールのようなものはなく、「何もしてない状態」と「押された状態」の2つの画像を用意すればなんとかなります。できることなら Enable-false の画像もあるといいかもしれませんが、それは必要に応じて・・・あ!このアプリでは必要でした(T_T 作ります。

まずは画像の切り出しをしました。このままでも使えるのですが、REGISTER ボタンとしてしか使えません。上の画像ではボタンの外側の範囲と文字を乗せる範囲を水色の線で指定しています。ボタン画像としては文字はあとから乗せるということで REGISTER という文字は消してしまいます。最終的に他のサイズでも使用できるように 9-patch 画像にしたいと思います。


文字を消しました。これで、他のボタン背景としても使用できるようになります。
文字レイヤーを非表示にしただけなんですけどね・・・


背景を消しました。これも背景レイヤーを非表示にしただけです。

この状態を png で出力すればボタンとして使用できます。ただし、このサイズのボタンとしてしか使用できません。


このサイズのボタン背景として指定した場合は問題がないのですが、違うサイズのボタン背景に指定した場合、青い四角いやつが変形してしまって他のボタンと統一感がなくなります。ユーザーからは初心者ですねぇなんて言われてしまいます。
ボタンのサイズごとに画像を作るという人もいますが、それは開発者から見ると初心者ですねぇ・・・と言いたくなってしまいますw仕事ではボタンごとに画像が届くことがよくありますが、9-patchの説明をしてるほど時間がないので、受け取った素材をそのまま使うか、勝手に9-patchにしてしまってます。(勝手ではないですね、口頭では伝えてるし)


この領域が横に繰り返されているだけでなので消してしまいたいです。画面に描画するときに、この部分を繰り返し描画、引き伸ばしをすればいいですよね。よくみると縦方向もですね。


赤枠の部分は縦も横も繰り返し描画すればいいいですね。


角だけスライスしてみました。スライスじゃなくていいんですけど・・・


角を集めて小さくしてみました。このままボタンの背景に指定すると・・・・気持ち悪いことになります。そこで、9-patchですね


引き伸ばしたい場所は2箇所、縦方向に引き伸ばしたい範囲を指定するには画像の左側、1ピクセル幅の領域を引き伸ばしたい範囲だけ黒くします。横方向は画像の上です。文字を載せる範囲をしてするのは右と下。


引き伸ばしをしていい範囲を描画しました。実際は黒で描画します。キャプチャしたら見えにくかったので赤で書いてしまいました。黒(#000)にしないと9-patchとして扱われません。エラーになります。


赤い範囲が縦方向にびよ〜〜んと引き伸ばされます。
画像左の線が範囲を指定しています。

赤い領域が横方向に引き伸ばされます。画像の上の線が範囲を指定しています。



文字が乗っかる領域が赤枠の中です。縦にびよ〜〜ん、横にびよ〜〜んって引き伸ばされるので、文字の領域が狭いように見えますが問題ありません。

赤い線を黒に修正します。#F000 です。 #A000 とかダメです。黒です。グラデーションが混ざったりしてもダメです。
画像を作成したら1ピクセル分だけキャンバスを拡大して、元画像を中央に配置します。そうすれば何もゴミがない1ピクセルの余白ができあがります。
画像全体を領域指定して1ピクセル縮小、領域反転で黒でベタ塗りします。次に不要な部分を範囲指定して削除していくという方法で描画しています。
よくやる失敗はグラデーションが混ざる・・・・


重要なのは保存するときのファイル名、今回は button_off という名前にしたいので

button_off.9.png として保存しました。

button_off ドット ナイン ドット ピング

太字のところが重要です。このファイル名にしたいと普通の画像として扱われてしまって黒線が画面上に出てきてしまいます。

というわけで、実際にアプリに配置してみました。今回は「何もしていない状態」の画像だけなのでボタンの背景画像として button_off を直接指定しました。状態によって画像を変えたい場合は画像2つとxmlが必要です。今回はパス

スクリーンショットを見てください。2種類の大きさのボタンが画面上にありますが問題なく左の青い四角が表示されてますね。同じ幅でということで


ボタン画像を差し替えただけなので文字は元のままです。

0 件のコメント:

コメントを投稿