1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Androidアプリ開発
  6. »
  7. 【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。

Androidアプリ開発、10回目となりました。
前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい GridLayout に焦点を絞って書いていきたいと思います。

このシリーズの前回の記事はこちらです。
【Android Studio】レイアウト( Layout )の種類を覚えよう!

目次
  1. GridLayout でゲームのコントローラー風のレイアウトを作る
  2. まとめ

GridLayout でゲームのコントローラー風のレイアウトを作る

今回は GridLayout で、ゲームコントーローラー風のレイアウトを作ってみましょう。
このようなレイアウトを作ります。
android studio

レイアウトの作成

前回紹介したように、 GridLayout を作成していきます。
①「Layouts」を選択し、②「GridLayout」を「ConstraintLayout」へドラッグします。
android studio

ボタンの追加

その後、①「Widgets」を選択し、②「Button」を画像のようにドラッグします。
android studio

同じ要領で、画像の様にボタンを7つ追加します。
少々見にくいですが、上に5つ、二段目に2つです。
android studio

ボタンの大きさを整える

まず、ボタンの大きさを整えましょう。

ボタン全体の大きさを変える

分かりやすい様に、まず、ボタンを全て 60dp × 60dp にしましょう。

ボタン全部を Shift を押しながら選択します。
android studio

Attributes から layout_width と layout_height を探し、値を 60dp にします。
android studio

ボタンはこのようになりました。
android studio

ボタンの形を合わせる

このままだと、ボタンが単に並んでいるだけなので、形を合わせて整えていきましょう。

まず、左から1番目と3番目のボタンを縦長にします。
左から1番目と3番目のボタンをShift を押しながら選択しましょう。
android studio

単純に考えれば、このボタンの高さを2倍にすればいいですね。
実際にやってみましょう。

layout_height を 120dp にします。
android studio

すると、レイアウトが崩れてしまっています。
android studio

これは GridLayout のセル一つの中で2倍の高さになってしまっているからです。
なので、縦長のボタンは、2つ分のセルを使うことになります。

セルを縦に複数分使う場合は、 layout_rowSpan を使います。
ここでは2つ分なので、 layout_rowSpan を2にします。
android studio

これでセル2つ分になりました。
android studio

次に縦ではなく横幅を2倍にしてみましょう。
右下のボタンを選択します。
android studio

変更するのは layout_width と layout_ColumnSpan です。
android studio

すると、横幅をセル2つ分にすることができます。
android studio

ただレイアウトが、ボタンの文字数によってずれるようです。
このあとテキストを短く変更すので、その時に直ります。

ボタンのテキストを変更する

レイアウトとは関係ありませんが、せっかくなのでボタンのテキストを変更します。

テキストを変更したいボタンを選択し、 text の文字を変更します。
今回は三角形で方向を表現します。
android studio

この要領で、ボタン全てのテキストを変更し、レイアウトも直りました。
android studio

まとめ

今回は Android Studio によるアプリ開発での、 GridLayout について解説しました。
綺麗に並べたいけど幅や高さが違う場合に使ってみてください。

この企画の一覧はこちら

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

スポンサードリンク

関連コンテンツ

オススメ記事

JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう! これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

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

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

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

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

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

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

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

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

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

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