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】じゃんけんゲームの作り方(アプリ開発の基本)

スポンサードリンク

関連コンテンツ

オススメ記事

とってもかんたん!iPhoneアプリ開発

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。 この入門ではXcodeを使いますので、

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、CSSフレーム

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目となりまし

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔

Unityのダウンロードとインストールの方法【Windows】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

VCCW

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

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

Homebrew

Homebrewのインストールと使い方。よく使うコマンド一覧と詳しい解説まとめ

人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いてみようと思います。Homebrewをインストールすると、ターミナルから便利なコマンド

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

コメントを残す(コメントは承認後に反映されます)

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