Android Studioでボタンを綺麗に並べる方法

Android Studioでボタンを綺麗に並べるコツは?
こんな疑問に答えます。

スマホでのアプリを作る場合、たくさんのスマホの機種の液晶の大きさにあわせるために、デザインや長さの「制約」「ルール」を作る必要があります。
(iphoneアプリを作るXcodeでは、「Autorayout」と呼ばれる一連の作業で行います)

ボタンなどの部品を複数配置する場合は、1つ1つ考えて配置していても、少しづつ制約が崩れていき、混乱し、作業が困難になります。
なので、

・まず必要以上に過剰に束縛してキッチリ揃える。
・それから、不必要な部分の制約を一気に解除する。

これが上手くいくと思います。
解説していきます。

作業環境

Android Studio Version 2.3.3
Mac OS Sierra 10.12.6
※コードで完結せずに、Acticityを使う派の人を想定しています。
(Xcodeでいうストーリーボード)

※記事内にプロモーションを含む場合があります

1.設計図をイラレで作成

いきなりandroid studioでボタンを並べようとすると、混乱します。

ボタン1つだけとかなら簡単です。
なぜか教則本ではそういう事例が多い)

でも実際は、ボタンたくさんあることが多いし、綺麗に配置したいですよね。

そこで、イラレなどのベクター系ソフトで、設計図を一度完成させるのがオススメです
色とかもだいたい着色してしまうのがいいと思います。

2.設計図通りに丁寧に並べる

ここから綺麗に並べていきます。

下の例で見ると、ボタンの縦の長さ、横の長さ、も数値で入れます。
(今見ている機種のサイズしか考えなくていいです、どうせあとで外すので)
左端右端からの距離なども全部、きっちり数字固定します。

きっちり固定しながら作ると、途中で崩れないので楽です

(この作業をもっと楽にやるために、グリット配置のテンプレートなど、たくさん便利なツールもandroid studioにあるのは知っています。
しかし、今回はiPhoneアプリ作成時にXcodeでも通用する、このやり方を紹介します)

3.「複数選択して一気に」不必要な制約を解除

「複数選択で一気に」がポイントです
選択漏れがあると、ずれます

ずれたら、ctrZで戻り、もう一回選択しなおしましょう

4.制約を緩めることで、たくさんの液晶サイズに対応できる

最後に、一気に選択を消していきます
縦の長さや横の長さの具体的な数値(43ptとか)は、機種が変わったら、意味をなさないので消しましょう

正方形に固定や、ボタン間の距離、もしくは左端右端からの距離など、は残しましょう

何を残して、何を消すかは、ケースバイケースですが…ようは数値系のものを消せばいいですね

これで、機種を変更して、確認して、レスポンシブになっていれば完成です。

というわけで今回は以上です。
コツは「固定値で丁寧に」並べてから、「複数選択して一気に」数値を設定(解除)することでした。

人気記事TweetDeckでおすすめの表示設定と使い方【Column(列)の並べ方】

-Android Studio, Java
-, ,