読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

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

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

android event

ちゃんと間に合ったもんね!

オープニングトーク

  • HTML5の話
    • まだ時期ではなかった by ザッカーバーグ
    • IE6はレガシー過ぎて問題になっている。でも、新しすぎるのも問題である。
    • ブラウザや端末によってばらばら
      • 傾きセンサー、加速度センサー
      • オーディオAPI
      • バイブレーション
  • 宣伝

本編

資料→【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

  • 前回の復習
  • 今回はレイアウトについて
    • よく使うレウアウト
    • 単位と余白
    • フォトショとファイヤーワークスでの3箇条
  • 領域について
    • HTMLとの比較
      • インライン要素:wrap_content
      • ブロック要素:fill_parent or match_parent
      • 画像とか:サイズを指定する(48dpなど)
      • HTMLでは要素によってデフォルトでインライン要素か、ブロック要素か決まっていたが、Androidでは設定しなくてはならない。
      • 設定を記述しなくてはならない反面、自由が効く。
  • LinearLayout
    • 横並びに配置するのか、縦並びに配置するのかを指定する
    • タイムラインのレイアウトをLinearLayoutで指定する場合
      • LinearLayoutを入れ子にする必要があるので、階層が深くなって複雑になる
    • 良い点
      • layout_weight="1", layout_width="0dp"を指定することで残りの余ったスペースを埋めてくれる
      • 1対1に等分したい場合もlayout_weight="1"をそれぞれ指定することで対応可能 →OKとCancelボタンの横並びなど。
      • ネガティブなボタン(Cancel)を小さく、ポジティブなボタン(OK)を大きくするようなことも、layout_weightを1:2にすれば良い。
    • まとめ
      • 等分にしたり、割合で指定するのが得意。
      • 使わないスペースを最大限伸ばせる
  • RelativeLayout
    • 親になる要素を決める
    • 次の要素Aは親の隣とかを指定する
    • さらに次の要素はAの下とかを設定する
      • layout_toRightOf, layout_toLeftOf
      • layout_alignParentLeft, layout_alignParentRight
      • layout_above, layout_below
    • 良い点
      • 階層が浅くてシンプルになる
      • レイアウトとパフォーマンスを見ながら修正をしよう
  • FrameLayout
    • 重ね合わせる時に使用する。斜め上から見下ろす感じだとわかりやすい。(スライド参照)
    • 写真の上に透過した黒いグラデーションを置き、その上に白いテキストを乗せるようなもので使う。
      • 写真を全画面で見せたかったり、テキストのスペースを取りたい時とか
  • スクロールしたい場合
    • ScrollViewを使う。
      • ただし、子要素は一つだけしか指定出来ないので、子要素にはLayoutを入れる。
      • 横スクロールさせるには、HorizontalScrollViewを利用する。
  • 単位と余白
    • dpとsp、わかりにくいよね。
  • dp
    • Androidは端末ごとにサイズが違う、dpiも異なる。
    • pxを同じサイズ単位で扱えたらいいよね。それが、dpです。
    • mdpi, hdpi, xhdpi の比は1 : 1.5 : 2になっている。
      • xhdipに合わせるのが良い。mdpiは最近あんまり使われていない。
  • sp
    • フォントスケール
  • デザイナはdpとspを意識しましょう。
    • ドキュメントもViewのサイズはdp, フォントのサイズはspで書いてあります。
  • ハンドセットの場合
    • 320dp * 533dp か 360dp * 640dp
    • 320dpがhdip, 360dpがxhdip
    • hdpiは1dpに1.5px, xhdpiは1pdに2px
    • 公式のデザインサイトにあるのは、mdpi用なので、xhdpiにしたい場合は縦横倍にすれば良い。
    • 横幅は360dpです。
    • ActionBarやタブの高さは48dpです。実機で計測すると9mmでタッチしやすい。
  • 余白
    • デザインガイドラインに書いてあります。
    • 4の倍数が丁度良いです。
      • mdpi : hdppi : xhdpi が1 : 1.5 : 2だから。つまり、2 : 3: 4。
      • 4の倍数にしておけば、どれにも綺麗に対応出来る。
  • まとめ
    • サイズはほぼ2種類と思って良い
      • 320と360
      • dpとspを意識する
      • 大きい方でデザインすること
    • xhdpiの余白は4の倍数が良い
    • 作ったものは実機で確認すること
      • ものさしで実際に測ってみて確認してみる

小ネタタイム1

  • デザインの納品の話
    • デザイナの皆さんはPSDで納品していませんか?
    • エンジニアが切り出したりすることになってしまう。
    • エンジニアの人はその状況は突っぱねましょう。
    • デザイナーは部品にまで切り出して渡しましょう。
      • 細かい資料までは要らないと思う。

小ネタタイム2

資料→Android Design Mini Session 10/25 2012

  • Android Design読んでね!
  • ABC 2012 秋の資料読んでね!
  • ActionBarを使いましょう
    • 端末の違いをよしなに解決してくれます。
    • でも、コンパチに入ってないのが残念だよね。
    • ActionBarSherlockを使えば大丈夫。 →ActionBarSherlock - Home
      • 2.1から問題なく使えます。
  • 画面遷移 Drawerパターン
    • YoutubeとかFacebookとか重ねあわせのメニューのアプリ
    • SimpleSideDrawer adamrocker/simple-side-drawer · GitHub
      • これを使えばさらっと2行くらいで実現出来ます。
    • 仕組みはDecorをぶっこ抜いて、差し替えて2枚のViewGroupを重ねあわせて・・・中身は色々やってる。

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)アプリ開発術