@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第2回】 #aadesigns に行ってきました

event android

Android App Designs〜デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第2回】 on Zusaar
デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第2回】 - Togetterまとめ
次回、第3回も申し込みが始まったようです。 → デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第3回】 on Zusaar
申し込んだときはかなり出遅れていたので、行けないかと思いましたが、100番目にギリギリ滑りこむことが出来ました。10分位遅れて行ったので、オープニングトークはあんまり聞けてませんが、メモったことなどを書き残しておきます。

オープニングトーク

GMOインターネットの方がHTML5とPhoneGapについて話していたようです。Node.jsのLTでも出ていたHooleganのスマートフォンブラウザアプリでHTML5を使っていた話ですね。

本編 9patchとXMLでデザインする話

デザイナーが頑張ったデザインが、実装後に残念なことにならないために

  • XMLだけで可能な表現が結構あります
    • Webデザイナ的には、CSSでデザインするイメージで、XMLを書くことで色々と表現出来るようになります。
  • 9patch
    • button_bg.pngを9patchかけて、button_bg.9.pngの名前で保存します
    • XMLから指定する場合は、android:background="button_bg"と指定します
  • 基本編
    • 文字はTextViewタグで表現、画像はImageViewで表現します。
    • android:textSize で文字の大きさを指定
    • android:textColor で文字の色を指定
    • android:background で背景色を指定
      • 背景に単色ではなくて、画像を使いたい場合は、@drawable/button_bg などと指定
    • android:padding で内側の余白を指定
  • XMLで背景などのデザインをする
    • タグ
      • コードでグラフィックを指定するためのものです。CSSみたいなイメージと思ってください。
      • android:shape="xxxx"で形を指定する。４種類
      • rectangle : 長方形（角丸をつけたりも出来る）
      • oval : 円形（ローディングに使える）
      • line : 線（あんまり使いどころがわからない、rectangleでも良くないかな？）
      • ring : 輪っか（これをくるくるさせるとローディングに良い）
      • shapeタグの中で色々とデザインにまつわる要素を入れる
    • タグ : 大きさを指定する
    • タグ : 塗り色を指定する
    • タグ : 境界線を指定する
    • タグ : 角丸を指定する
    • タグ : グラデーションを指定する
      • startColor, endColor, centerColot, angleで、開始色、終了色、中間の色、角度などを指定する
      • 角度はPhotoShopの指定と同じ角度だと思ってください
      • typeでグラデーション方法を指定する。円形のグラデーションは、radialを指定する。gradientRadialを50に設定すると、中心から50%の割合でグラデーションする
      • centerXとcenterYで中心位置を0〜1の範囲の割合で移動させる
    • タグ : 内側の余白を指定する
    • 注意
      • 2重線のようなstrokeは指定することが出来ません、9patchなどを利用しましょう
      • 上下左右個別のstrokeは指定することが出来ません
    • 補足
      • 色を指定する場合のカラーコードは、#cccとか、#123456の様に指定します
      • Androidでは、透過の指定も可能で、#とカラーコードの間に入れます。16進の1桁または2桁です。
      • #3cccとは、#aa123456とか
    • タグ：画像等をリピートさせたり出来ます
      • tileMode="repeat"を指定するとリピートします
      • 他に、アンチエイリアスやフィルターなども設定出来ます
      • 1px四方の画像を、gravity="buttom|fill_horizontal"と指定することで、下のみのstrokeを表現出来る
      • 点線は表現出来ない*1
  • 重ねあわせ
    • タグを使うことで重ねあわせをすることが出来ます。
      • タグの中に複数列挙すると、重ねあわせられます。XMLの下に書いた方が上になります。
      • 9patchの画像とかも重ねられます
  • テキストの影
    • TextViewタグのshadowColor, shadowDx, shadowDy, radiusなどを指定します
      • 単位はつけないですが、dpだと思われます
      • 応用すると、エンボスをかけたイメージに出来ます
      • CSSをかける人はなんとなくわかるかと思います
  • まとめ
    • コードでかけるものはコードで書こう
    • 重ねあわせ技を使おう
      • 重ね合わせの位置も指定できる

この内容は、Android 開発ガイド - ソフトウェア技術ドキュメントを勝手に翻訳に書かれています

小ネタ１ デザイン確認の話

  • デザインの確認
    • 作ったデザインを確認してくださいと渡すと、PCで見てしまって色々と突っ込んでくる人がいます
    • かならず、サポートする端末で確認するように伝えておくように
    • その時、必ずwi-fi経由で見て、3G回線は使わないようにしてもらった方が良いです
      • たぶん、キャリアのプロキシ経由でデザインした画像が圧縮やらなんやらかけられてしまうから

小ネタ２ AndroidのChromeを使ったHTML5デバッグの話

  • ブラウザで動くHTML5アプリの開発を楽にする
  • Android 4.0以降で使えるChromeを使う
    • アクションバーのメニューから、設定を選択する
    • 設定画面から、デベロッパーツールを選択する
    • USB ウェブデバッグを有効化にチェックを入れておく
    • adbのコマンドを叩いて、PCのブラウザで、localhost:指定したポートを開く
    • PC側のブラウザのChrome開発ツールがそのまま使える

詳細はこちら→Remote Debugging on Android with Chrome - Google Chrome

追記

layout-listで沢山重ねすぎるとパフォーマンス的に問題があるかもしれません。と公演中に話題になっていました。
これを検証してくださった方が居ましたので、そのブログを紹介しておきます。
layoutのinflateパフォーマンス測定 - Hacking My Way 〜 itogのhack日記

end

レイアウト関係はこちらの本も参考になるよね

Android Layout Cookbook アプリの価値を高める開発テクニック

Android Layout Cookbook アプリの価値を高める開発テクニック

Android UI Cookbook for 4.0 ICS（Ice Cream Sandwich）アプリ開発術

Android UI Cookbook for 4.0 ICS（Ice Cream Sandwich）アプリ開発術

*1:色が付いたものと、透過したものをつけた画像を繰り返せば出来るような気がします