先日、弊社サービスの「ノミトモ」のAndroidアプリがリリースされました。今回もデザインをお手伝いさせて頂いたのですが、普段触っているHTMLと違うことだらけ。調べながらの作業となりました。
実際デザイナーさんが触るのはレイアウトのXMLまでだと思いますが、今後新しくアプリを作り始める方に覚えておいて欲しいことを書いておこうと思います。
eclipseの画面・レイアウトの仕方
こちらがAndroidアプリを作る際に必須のeclipsの画面。(※クリックで拡大します)![01](https://blog.8bit.co.jp/wp-content/uploads/2013/07/011-1024x676.jpg)
解説を入れるとこう
![03](https://blog.8bit.co.jp/wp-content/uploads/2013/07/03-1024x676.jpg)
いかに時間を短縮して制作するか、色々と方法を試行錯誤したのですが、手で書いていくと記述にすごく時間がかかるので慣れないうちは
パレットから必要なオブジェクト素材を選ぶ⇒オブジェクト一覧(もしくはプレビュー)に素材をドラッグ⇒プロパティのパネルで背景色などの設定を追加⇒必要があればコードビューで修正
の手順で制作するのがおすすめです。
ちなみにこちらがコードビュー。HTMLと違って結構手間がかかります。
![02](https://blog.8bit.co.jp/wp-content/uploads/2013/07/02.jpg)
widthとheight
widthとheightの設定に match_parent,fill_parent,wrap_content という3つの項目があります。![04](https://blog.8bit.co.jp/wp-content/uploads/2013/07/04.jpg)
match_parent,fill_parentが親要素のいっぱいまで横幅を広げる、wrap_contentが幅の自動調整をする。便利。
▼match_parent,fill_parent。(この2つ、働きに違いはないそうです。詳しくはこちら)
![05](https://blog.8bit.co.jp/wp-content/uploads/2013/07/05.jpg)
▼wrap_content。
![06](https://blog.8bit.co.jp/wp-content/uploads/2013/07/06.jpg)
floatがない
floatがないので、代わりにLinearLayoutを使用します。![07](https://blog.8bit.co.jp/wp-content/uploads/2013/07/07.jpg)
▼横に並べたいときはLinearLayout(Horizontal)で囲みます
![08](https://blog.8bit.co.jp/wp-content/uploads/2013/07/08.jpg)
▼細かにレイアウトすると、どんどん複雑になっていきます
![09](https://blog.8bit.co.jp/wp-content/uploads/2013/07/09.jpg)
borderが使えない
borderのプロパティが無いようなので、FrameLayoutを入れ子にして作成します。手法1
裏のFramelayoutに色とpaddingをつけ、手前のFramelayoutに画面背景色をつけて被せて裏の色を隠す…という手法。▼結構無理矢理borderがあるように見せてる
![10](https://blog.8bit.co.jp/wp-content/uploads/2013/07/10.jpg)
手法2
Framelayoutの背景に色をつけて、幅を1dpにしてしまう手法。下付きにしたい時などはちょっとズレが起こりやすいので注意。hedaer上の飾りboederの代わりなんかに良いと思います。![11](https://blog.8bit.co.jp/wp-content/uploads/2013/07/11.jpg)
グラデーションの設定
これがはじめは結構難関。別のグラデーションの設定をするxmlを作って、オブジェクトのbackgroundに記述して読み込むというもの。![12](https://blog.8bit.co.jp/wp-content/uploads/2013/07/12.jpg)
設定のxml(gray_btn.xml)をdrawableフォルダの中に置かなければいけないです。
詳しく書いてくださってるのがこちら
=================================
Androidアプリ、レイアウトするだけで結構大変です。頑張ります。
アプリは無料で配信していますので、よければダウンロードしてみてください!