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でおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチより、少しレベルアップして、Ja

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュータへ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

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

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

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

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

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

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

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

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