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 )の種類を覚えよう!

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

スポンサードリンク

関連コンテンツ

オススメ記事

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

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

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

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

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

小学生から始めるプログラミングシリーズ、第四弾です。 前回はScratch(スクラッチ)を使ってシューティングゲームを作成しました。 Scratchはブロックを移動させることによって、分かりや

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

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

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

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

迷路やRPGで使えるマップを作ってみよ!

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)

コメントをどうぞ!

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




オリジナルゲーム.com