[&] Android App Designs Vol.2
----------------------------------------------------------------
Android App Designs
〜デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
----------------------------------------------------------------
http://www.ladybeetle-design.com/androidappdesigns/
前回のテーマ：
がんばって作ったデザインが
実装後に残念な結果にならないために
@tommmmy
Android アプリ XML レイアウト（日経BP）
前回：変態9-patch
より凝ったグラフィックを作ります。
Androidのアプリでグラフィックを再現する場合、
ビットマップと呼ばれる画像ファイル (PNG) を使う、
またはコードで表現するというふたつの方法があります。
1. コードのみで可能な表現
画像を使わなくてもできる表現をデザイナーが徹底解析！
CSS3 が流行ってきて、一部のブラウザでは、ある程度モダンブラウザでは
コードだけでボタンの表現が、グラデーション、ドロップシャドウや角丸が
できるようになった。
Android も同じようなイメージでグラフィックの表現ができます。
あまりやっている人がいなかたので、この部分を研究したかったんです！
2. デザインが組み込まれる仕組み
仕組みを知れば、いろいろと応用がきく（かもしれない）
画面解像度に関わらず、あったデザインを提供していける。
前回の復習：
ボタンにあてる角丸の画像 ( button_bg.9.png ← 9-patch の時のファイル名）
もしデザイナーで XML を見た事無い人もいるかもしれませんが、
CSSが分かれば、なんとなく見てください。
button_bg.9.png を XML で実装する時にはどうするか？
main.xml
<Button
android:layout_width="wrap_content"
....
テキストや画像を表示したい場合。
TextView
若干複雑ですが、許容範囲だと思います。
普通に左上に「撮影する」という文字がでてきます。
今度は、画像ファイルを実際に表示されたい場合は？
ImageView を使います。
これを実際に表示すると、画像が表れます。
TextView に 20sp を追加します。
sp は Android 固有の単位ですが、ここでは説明を省きます。
今度は、テキストカラー #f00 赤に設定します。
バックグラウンド #ccc 薄いグレーがつきます。
padding = 10dp
パディングを入れることで、隙間があきます。
バックグラウンドを画像に変えてみます。
これを変えてみると？
パディングも入っているので、余白も入ってます。
テキストを白に設定すると、奇麗になります。
今の button_bg.9.png のところ。
実は Android のネイティブアプリの場合、画像の代わりに
XMLファイルを設定しても描くことができます。
画像で設定するところを XML で書くことができるのです。
この XML ファイルをどこに置くかというと、
/res
/drawable ←ここに xml ファイルを入れておく
/drawable-xhdpi
/layouts 構造
main.xml
/values 飾り
strings.xml
■ <shape>
コードでグラフィックを表現するためのタグ
1行目、2行目はお決まりのルール。
shape の後に「ここに色々書くよ」の部分に属性などを書きます。
shape には4種類あります。
rectangle : 長方形、角丸長方形 良くつかいます！
oval : 円 あんまり使わないけど、ローディング中の時とかに使います！
line : 線 あんまり使ったことが無いです。rectangle でも線が表現できるので。
ring : リング、何中が透過しているもの。ローディング中のクルクル回るのによく使います。
rectangle : 長方形 角丸長方形ができる。
まず、
<shape android:shape="rectangle">
size
solid
stroke
corners
だいたい、なんとなく読めますよね？
グラデーションもつけることができます。
グラデーションつける場合は、start color, end color
centerColor は真ん中の色を指定できます。
angle で角度設定。90度で横方向にグラデーションがつきます。
反時計回りに角度がつきます。
Photoshop で作るレイヤースタイルのグラデーション角度と同じなので、わかりやすいです。
type : グラデーションのタイプ。= radial
gradientRadial = 50 を使うと、
真ん中を中心にして、50%の割合で色が変わります。
33 にすると、1/3 になる。少し小さくなります。
値を大きくすればするほど、中心の円が大きくなります。
shape タグでできること
size 大きさ width, height
solid 塗り background-color
stroke 線 border
corners 角丸
gradient グラデーション
内側の余白
例：
こういうデザインがきたとき、どう実装しますか？
グラデーションがちょっと傾いている場合は？
startColor
centerCOlor
endColor
stroke
corners
グラデーションのアングルを45度設定
両方ともコードで表現できます。
例２：
下側に白い線が入っている場合は？
centerColor がちょっとずれると、コードだけでは無理。
内側に白い枠が入っている場合は、どうでしょう？
コードだけでは出来ない。
例３：
黒から白のグラデーション
下側に影のようなものがついている場合。
ボタンではなく、スプラッシュ画面のような、全体に敷くグラデーション
radial を設定すれば、コードで可能です。
centerX, centerY どこにセンターを置くかという割合の位置。
少し右側で 0.2 、中心だと 0.5
例：
タイムラインの背景など、グラデーションに下の線が入ったものは？
線なのでストロークかな？と考えます。一番下だけのストロークができる？
shapeタグでできないこと。
上下左右個別の stroke はできない。
ドロップシャドウ的なこともできない。
Tips:
ネイティブアプリでのカラーコードについて。
カラーコード 3ケタもしくは 6ケタでひょうげできます。
Android の場合、#3ccc, #5000, #25d65e94
Android の場合、簡単に透明度を設定することができます。
■ビットマップ
ビットマップをどういう時に使うのが良いのか？
ストライプであれば、一番ちいさな箱をリピートさせよう。
bitmap タグを使ってリピートさせます。
リストビュー的なもの。
ストロークでは個別に上下左右の線が入れられませんが、
その際は bitmap でやっています。
border_bg.png 1 ピクセルのボーダー画像を用意して
gravity で fill_horizontal を指定します。
（リピートすると真っ黒になってしまいます）
ボーダーを点線にしたい時は？
---- 休憩 -----------
さっきみたいな、グラデーションのかたまり、境界線だけのボタンであれば、
コードで奇麗なのですが、内側に影があったり、外側に影がある場合は、
9patch でやることになります。
影の無いものの場合は、色の指定をするので、エンジニアが作って欲しい。
「手抜きすんなよ、9patch作れよ！」と言われた時は？
スタートカラーとか、エンドカラーとか、その部分だけを書いてわたすといいんじゃないでしょうか？
■コネタタイム！
@asamieee7
デザインの確認も、スマートフォンで行うべきですよね？
お客さんにチェックしてもらうとき、
PCで見たって、良いのか悪いのかわからない（パソコンで見るお客さんが多い）
間延びしているように見えるし、スカスカだと言われることが多い。
スマートフォンで見ると、アプリ完成イメージが非常によくわかる。
デザインの確認は、dropbox とか Google Drive を活用。
そして回線は WiFi でね！
wishscope の画面、Wifi だと、「きぱーっ」3G だと「ぼけーっ」
@adamrocker
年なんで、座ってプレゼンします。
Android で Web デザイン！
iPhone は 2機種、Android は 3機種。
でも iPhone も 3機種になりました！
Chrome でデバッグできます！
ここで若干魔法を使って....
右上の設定を使うと、設定画面が開きます。
一番下に developer tool があります。
USB デバッグを有効化のチェックを ONにします。
adb というツールがあって、chrome develoepr tool remote を使うと、
Chrome の URL にlodalhost:9222 と入れると、
パソコン側のChrome がデバッグツールとして使えます。
■Chrome for Androidをリモートでデバッグする5+1ステップ
https://plus.google.com/105010782947239604475/posts/ZSgcpujb9jY
動画での説明
Chrome for Android Remote Debugging
■後半戦
eratta: 色指定は % ではなくて、16進数設定です。
例：
グラデーション
9patch グラデーションこみで 9patch にしてしまう。
黒い点で指定した部分だけが伸びます。
めっちゃ伸びた時、「ん〜やっぱりやだ」
case.2 重ねる
bitmap と shape は重ねて使うことができます。
1ピクセルのビットマップと、shape を重ねて使います。
あと、ちょっと影がついたバージョンも、重ねることさえできれば、
何でもできるようになります。
bitmap +bitmap +shape と 3つ重ねてもいいです。
縦方向に伸びる可能性があるので 小さめの 9patch にします。
レイヤーリストの中にアイテムを入れて使います。
重ねると新しい表現ができるようになりました。
例：
XML でコーディングした時に、タイトルの背景に
1px の線、背景のストライプ、ストライプはテクスチャノイズ。
9patch 1ピクセルの影のある素材が使えます。
bitmap のストライプが使えます。
bitmap は小さい範囲で使えますが、
テクスチャが不自然になる場合があるので大きめにした方が良い場合もあります。
bitmap の中は texture bg をチピートするだけ、
9patch は 9patch 化されたボーダー素材を入れてあげるとできます。
三つ四つぐらいは重ねて使うことができます。
話かわるんですが、テキストの影。
最近すごいいっぱいアプリでもテキストの影が使われています。
LINEでも、かなり奇麗に。エンボスがかかってへこんでいるように見えます。
デザイナーは是非こだわって表現してほしいところ。
コードで表現できます。
shadowColor
shadowDx :x 方向の位置移動
shadowDy : y 方向の位置移動
shadowRadius :ぼかしの大きさ
ちょっとエンボスがかかったように奇麗に見えます！
CSS と比べると凄い似ています。
CSS で設定している人も、だいたい同じ値を入れれば良いです。
shadowRadius の単位が分からない！ 1px の設定と同じ？
最後に世紀の大発見！
スプラッシュ画面の奇麗なヤツ。
普通に文字が載っていますが、バックの真ん中が明るくて、周りが暗くなっています。
薄いですが、縦とか横とかのテクスチャが載っています。
まえからそういうデザインをしたかったのだが、
どこが伸びるのか分からない？？
テクスチャなので、伸びたらイヤだった。
バックグラウンドだけ見ると....
左側はフラット。右側はグラデーションがかかっているもの。
texture_bg.png を不自然にならないくらいリピートさせてあげる。
#5000, #0000 （中央）のグラデーション。不透明度を変えています。
このビットマップと shape を重ね合わせると実現できます。
レイヤーリストの中にビットマップ、シェイプが入ります。
そして、できたのがこちらです！
テキストの方、ドロップシャドウ、エンボスがきいたような
昔の facebook のような、path のような、こういうのが多かったな〜
がんばったら表現できるじゃないか！
四角い影をつけたい場合は、9patch
原理がわかっていれば、「できる！」ということがわかるので、
広めていきたい。
■まとめ
●コードでかけるものは、コードで表現
●重ね技 shape / bitmap / nine-patch
●位置調整も可能
デザイナーも XML 書けないといけないのか？
けんかをせずに、私は書けないけど、できることを示して、
そういうことがどんどん広まっていけば、楽しくなっていくんじゃないかな〜と。
次回は 10/4 です！
明日の朝10時に申し込み開始！
Q&A
Q. 重たくなったりしますか？
A. 正直実験できていませんが、若干重くなる？ 1-2秒変わるほどでは無い。
<< Home