デザイナーがこだわるAndroidアプリのデザインをXMLコーディングで実現する連載の4回目。前回は、グラデーションや影の部分を、実際の光と影に基づいて考えることを紹介しました。この考え方はどんなデザインのときにもついてまわりますので、頭に入れておきましょう。

 今回は引き続き、デザインの細部にこだわった表現を考えていきます。

タイトル部分に背景をつけ、影やボーダーをつけよう

 まず、「あなたの友猫」といったタイトル部分を見ていきましょう。

 ここでのデザインの特徴を整理しておきます。

図1●タイトル部分のデザインの特徴
[画像のクリックで拡大表示]

(A)テクスチャの使用
(B)【上側】影の描写(エリア全体にかかるもの)
(C)【下側】1pxのライン

 もしあなたにCSSの知識があるなら、(B)上側の影は、上の要素である検索ボックスにbox-shadowというプロパティを使って表現し、(C)下側の1pxのラインはborder-bottomというプロパティで表現したい、と思うでしょう。そうすることで、(B)(C)については画像を使わなくともコードのみで表現できるからです。

 しかし、AndroidレイアウトのXMLのパラメーターにはそういったものが存在しませんので、すべて画像にしなければなりません。

図2●CSSの場合とXMLの場合の組み方の違い
[画像のクリックで拡大表示]

 XMLレイアウトの場合、画像の軽量化などを考えると上図のように3つの画像に分けるのが妥当です。3つとも、繰り返しの最小単位は非常に小さな画像になりますので、これを繰り返しながら、重ねて配置していくことになります。

#今回(A)の背景画像については、テクスチャをかけている分を自然に見せるために、少し大きめの画像にしています。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら