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 アプリ開発入門! Android Studio のインストール手順。
  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】じゃんけんゲームの作り方(アプリ開発の基本)

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

おみくじゲームを作るべ!

小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!

小学生から始めるプログラミングシリーズです。 この講座ではScratch(スクラッチ)から少しレベルアップして、JavaScriptを使ってプログラミングを行なっていきます。 Scratc

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

コメントをどうぞ!

メールアドレスが公開されることはありません。