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

スポンサードリンク

関連コンテンツ

オススメ記事

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

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

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

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

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

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

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

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

FC2 blog customize

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

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

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

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