1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Androidアプリ開発
  6. »
  7. 【Android Studio】レイアウト( Layout )の種類を覚えよう!

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。

Androidアプリ開発、9回目となりました。
さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

目次
  1. 水平(Horizontal)方向に並べる
  2. 垂直(Vertical)方向に並べる
  3. テーブルレイアウト(TableLayout)
  4. グリッドレイアウト(GridLayout)
  5. まとめ

水平(Horizontal)方向に並べる

まずはボタンやテキストを水平方向に並べる方法です。
画像のように、①Layoutsを選択し、②LinearLayout(horizontal)をConstraintLayoutへドラッグします。
Android Studio

次に、①Widgetを選択し、②ButtonをLinearLayout(horizontal)へドラッグします。
Android Studio

LinearLayout(horizontal)の中に、ボタンが作成されますので、表示したい数だけボタンを追加してみてください。
私は3つ追加してみました。
Android Studio

垂直(Vertical)方向に並べる

次は水平方向に並べる方法です。使い方は水平方向の時とほぼ同じです。
画像のように、①Layoutsを選択し、②LinearLayout(vertical)をConstraintLayoutへドラッグします。

次に、①Widgetを選択し、②ButtonをLinearLayout(horizontal)へドラッグします。
Android Studio

Android Studio

テーブルレイアウト(TableLayout)

テーブルレイアウト(TableLayout)を使ってみましょう。
テーブルレイアウトは、マスに並んでいるようなレイアウトを作ることができます。

画像のように、①Layoutsを選択し、②TableLayoutをConstraintLayoutへドラッグします。
Android Studio

次に、①Widgetを選択し、②ButtonをTableLayoutの中のTableRowへドラッグします。
Android Studio

一つのTableRowに三つずつ並べると、このようになります。
Android Studio

グリッドレイアウト(GridLayout)

グリッドレイアウト(GridLayout)は、テーブルレイアウトに似ていますが、テーブルレイアウトよりももっと自由な配置が可能です。

①Layoutsを選択し、②GridLayoutをConstraintLayoutへドラッグします。
Android Studio

次に、①Widgetを選択し、②ButtonをGridLayoutへドラッグします。
Android Studio

その後上手く設定すれば、次のように少し複雑なレイアウトを作ることができます。
Android Studio

まとめ

今回は Android Studio におけるレイアウトについてみていきました。
次回からは、レイアウトの整え方をもう少し細かく書いていこうと思います。

この企画の一覧はこちら

  1. Android StudioをMacにインストールする方法
  2. 【Android Studio】新規プロジェクトを作成する方法
  3. 【Android Studio】エミュレータを起動してプログラムを実行する方法!
  4. 【Android Studio】開発したアプリの実機テストを行う方法。
  5. 【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。
  6. 【Android Studio】TextView を使ってテキストを変更、追加する方法。
  7. 【Android Studio】Button(ボタン)を作る基本中の基本。
  8. 【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。
  9. 【Android Studio】レイアウト( Layout )の種類を覚えよう!
  10. 【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法
  11. 【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

スポンサードリンク

関連コンテンツ

オススメ記事

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

Windows10にPythonをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はWindows10にPythonをインストールする方法を紹介します。 Pythonのインストーラをダウンロード では、Python

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です