TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でCheckBoxを追加する方法【初心者向け】
icon
icon
Androidアプリ開発

Androidアプリ開発でCheckBoxを追加する方法【初心者向け】

Androidアプリ開発で、GUIコンポーネントの【CheckBox(チェックボックス)】を追加する方法を初心者向けに解説した記事です。このパーツを使えば、クリックすることでON/OFFの2つの状態を表現することができます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのなかの1つである、CheckBox（チェックボックス）を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！Androidアプリの設定画面でチェックボックスを使いたいんですけど、どうやって実装すれば良いんですか〜？

田島悠介

他のGUIコンポーネントと同じように、パレットやXMLで設置できるよ！

 

CheckBoxとは

CheckBox（チェックボックス）とは、クリックすることでON/OFFの2つの状態を表現することができるGUIコンポーネントです。

ユーザーに「はい」「いいえ」の意思表示を求めるときなどに使われます。

 

CheckBoxを配置する

CheckBoxはレイアウトエディタのパレットの「フォーム・ウィジェット」から配置できます。

他のGUIコンポーネントと同じように、パレット内のCheckBoxを配置したい場所までドラッグしましょう。

 

このようにCheckBoxを配置すると、XMLファイルには次のようなコードが追加されます。

コード内の「android:layout_」で始まる部分は、配置したCheckBoxの大きさや位置を示しています。

<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="65dp"
android:layout_marginStart="65dp"
android:layout_marginTop="54dp"
android:text="CheckBox"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

CheckBoxのカスタマイズ

最後に、ちょっとしたカスタマイズの方法を紹介します。

CheckBoxのラベル部分に表示するテキストを変更したい場合は、プロパティの「Text」の値を変更しましょう。

今回の記事は以上です。

他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でButtonを追加する方法も合わせてご覧ください。
 

大石ゆかり

ちゃんと設置できました〜♪

田島悠介

チェックボックスは設定画面では特によく使うから、覚えておいて損はないね！

大石ゆかり

そうですね！

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

Kotlinの関数letの使い方を現役エンジニアが解説【初心者向け】

Kotlinの関数letの使い方について解説します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプ...
Androidアプリ開発

初心者でもできた！Androidアプリの開発環境構築方法（Windows編）

自分でもAndroidアプリを開発してみたい！と思う方も多いのではないでしょうか。 今回は、初心者でもできるWindowsのAndroidアプリの環境構築...
Androidアプリ開発

Androidアプリ開発でArrayAdapterクラスを使ってリストを表示させる方法【初心者向け】

Androidアプリを開発では、ArrayAdapterクラスを使うと簡単にリストを表示することができます。 そこで今回はArrayAdapterクラスを...
Androidアプリ開発

Androidアプリ開発でSlidingDrawerを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はその中の1つである、SlidingDr...
Androidアプリ開発

KotlinでのNullの扱い方を現役エンジニアが解説【初心者向け】

KotlinでのNullの扱い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 初心者向けに...
Androidアプリ開発

初心者が基礎からKotlinを学べる本10選を現役エンジニアが紹介

今回は、初心者がKotlinの基礎から学べる本10選について解説します。   田島悠介 今回は、Androidアプリ開発に関する内容...
Androidアプリ開発

あわせてよく読まれている記事

PythonでGUIアプリを作成するのにおすすめのライブラリとは？現役エンジニアが解説【初心者向け】

PythonでGUIアプリを作成するのにおすすめのライブラリについて解説します。 Pythonで作成するGUIアプリというのは、みなさんが通常WindowsやMacなどで操作している画面上で、ダブルクリックして起動するアプリケーションを意味しています。 アプリケーションを起動するのにダブルクリックをするのが普通だと感じるかもしれませんが、プログラミングにおいて、普通はコマンドラインやターミナルと呼ばれる黒い画面で起動コマンドを入力することでアプリケーションを実行します。 これをGUIといいます。 GUIとはコマンドラインインターフェイスという意味です。 しかし、すべての人がコマンドラインインターフェイスを使いこなすことができないため、GUI（グラフィカルユーザーインターフェイス）を利用したWindowsやMacで通常利用するアプリケーションを生成する必要がでてきます。 目次 GUIを使うメリットとは？ GUIのフレームワークを選ぶ際のポイントは？ PythonにおすすめのGUI 実際にPySimpleGUIでGUIアプリを作ってみる まとめ   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでGUIアプリを作成するのにおすすめのライブラリについて詳しく説明していくね！ 大石ゆかり お願いします！   GUIを使うメリットとは？ GUIはGraphical User Interfaceの略で、画面操作(ボタンのクリックやマウスによる移動など)で、プログラムを操作する方式です。 対義語はCUI(Character User Interface)で、キーボードによるコマンド入力で、プログラムを操作する方式です。 文字に加え、アイコンなどの画像で操作対象をわかりやすくしたり、マウスで直感的に操作できたりするのがGUIの利点です。 コンピュータ操作に不慣れな人や、そのプログラムを初めて扱う人でも、GUIならばプログラムを操作できます(十分親切なインターフェイスであることが条件です)。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GUIのフレームワークを選ぶ際のポイントは？ GUIプログラミングの際、ウィンドウ操作のAPIを直接操作するのはまれで、適当なフレームワーク(開発環境)を用いるのが一般的です。 選定では以下のような点に着目します。 ターゲットとするOS(Windows, Linux, Macなど)に対応しているか 機能は充足しているか 外観(見た目)はどうか これらについて、詳しく解説していきます。   ターゲットOSに対応しているか GUIプログラムを生成する場合、ターゲットOSに対応しているかを考える必要があります。 ターゲットOSとはWindowsやLinuxやMacを意味します。 最終的に納品する場合、納品先との契約でターゲットとするOSに合わせてGUIアプリを生成します。 もしも、顧客がMacのみ利用している環境で、WindowsのGUIアプリを納品しても、顧客先では利用できないためです。   機能は充足しているか 納品先との契約で指定された機能を実装するために、使用するGUI生成プログラムが仕様を満たしているか考える必要があります。 たとえば、マルチタッチアプリを開発したいのか、データ入力支援するアプリを開発したいのかで機能が異なるためです。   UIはどうか 使用する上でGUIフレームワークのUI（ユーザーインターフェイス）は非常に重要です。 GUIフレームワークのUIはGUIフレームワークを使いこなす上で、使いやすい配置によく使うボタンが配置されているか、設定で思い通りの設定ができるかなどで判断する必要があります。   PythonにおすすめのGUI Tkinter 表示例 引用元：https://www.tutorialsteacher.com/python/create-gui-using-tkinter-python 強み TkinterはPython標準のGUIフレームワークなので、ドキュメントや事例も豊富です。 また、追加インストールも不要で、Python本体に合わせてバージョンアップされます。 用途 非常に安定しているので、PythonのGUIプログラミングを最初に試す場合、良い選択肢です。 ターゲット Mac 、Windows 、Unix、Linuxに対応しています。   Kivy 表示例 引用：Kivy: Cross-platform Python Framework for NUI Development 強み KivyはNUI(Natural User Interface)でのマルチタッチアプリ開発のためのライブラリです。 GPUによる高速化もサポートしています。 用途 スマートフォンやタブレット向けのマルチタッチアプリをPythonで開発したい場合に、選択肢の筆頭になります。 2Dゲーム画面の開発にも適しています。 ターゲット Windows、Mac、Linux、RPi、Android、iOS、Anacondaで利用できます。   PyQt 表示例 引用元：PyQt5 book (4th Edition, 2020) Create GUI Applications with Python & Qt5 強み PyQt(パイキュート)はC++で記述されたGUIフレームワークです。 C++で開発されたことで、クロスプラットフォーム対応のため、WindowsでもMacでもLinuxでも同じコードで作成したものを利用することができます。 用途 商用で利用する場合はライセンス費用を支払う必要があります。 非常に多岐にわたる機能があるため、ライセンス費用をはらって商用で利用する用途が良いです。 ターゲット Windows、Mac、Linux、Unix、Android、iOSで利用できます。   wxPython 表示例 強み Tkinterと比較するとウィジェットが豊富で、外観や操作感をカスタマイズしやすいです。 用途 ウィジェットを使用するためには、追加インストールが必要ですが、豊富なウィジェットを求める場合はTkinterよりもwxPythonを選んだほうが良いです。 ターゲット Linux、Windows、Macに対応しています。   PySimpleGUI 表示例 強み Tkinterをベースに開発されているため、動作が安定しています。 非常にシンプルなコードで実装が可能です。 用途 細かい指定をすることが難しいですが、最初に利用するGUIとしては使いやすいです。 ターゲット Windows、Linux、Mac、Trinketに対応しています。   Pygame 表示例 引用：Historical Wargame Simulator – Revision E.5 (0.6.1.8) (pygame.org) 強み 公式ページのチュートリアルを真似するだけで、それらしいプロダクトを作成可能です。 用途 ゲーム専用のGUIフレームワークです。 ターゲット Linux、Windows、Mac、Unixで利用できます。   一覧表 名前 強み 用途 Tkinter ドキュメント 動作が安定 Kivy マルチタッチ対応 スマホアプリ PyQt クロスプラットフォーム 商用アプリ wxPython ウィジェット豊富 ウィジェット目的 PySimpleGUI 簡単に実装できる 初心者用 Pygame チュートリアル豊富 ゲーム用   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
Python

Androidアプリ開発におけるGUIコンポーネントの使い方【初心者向け】

Androidアプリ開発において、ボタンやスイッチといった便利なパーツ（GUI）が用意されています。 そこで今回は、アプリ開発の初心者向けにGUIコンポーネントの使い方を紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリでボタンとかテキストってどうやって設置するんですか？？？ 田島悠介 GUIコンポーネントっていうのが用意されていて、気軽にボタンとかテキストを設置できるようになっているんだ。 大石ゆかり え、どうやって使うんですか〜？？？   GUIコンポーネントとは GUIコンポーネントとは、ボタンやテキストボックスなどのGUI（グラフィカルインターフェース）のライブラリです。 Androidアプリを開発するときは、すでに用意されているGUIを使うと簡単に画面を作成することができます。アプリのデザインを考える際にも役に立つことでしょう。     GUIコンポーネントの一部を紹介 実際にどんなものがあるのか部品を一部紹介します。画像と見比べるとよく理解できると思います。 また、リンク先にそれぞれのGUIコンポーネントを追加する方法も紹介しているので、合わせてご覧ください。   TextView 画面上に文字列を表示するための部品です。 Androidアプリ開発でTextViewを追加する方法   EditText テキストを入力するための部品です。いくつか種類があり入力させたい文字によって、Plain TextやNumberなど使い分けることができます。 Androidアプリ開発でEditTextを追加する方法   Button 読んで字のごとくボタンです。クリックすることで、動作をするきっかけにすることができます。 Androidアプリ開発でButtonを追加する方法   Date Picker 日付を入力するための部品です。アプリを使う中でよく目にするのではないでしょうか。 Androidアプリ開発でDate Pickerを追加する方法   SeekBar ある一定の範囲で数値を入力するときに便利な部品です。つまみをドラッグすることで値を入力することができます。 Androidアプリ開発でSeekBarを追加する方法   RatingBar レート（評価）を入力させたい場合に使います。 Androidアプリ開発でRatingBarを追加する方法   RadioButton（ラジオボタン） 複数の選択肢の中から一つを選択させたい場合に使います。 Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法   Switch オンオフの状態を表す部品です。視覚的に状態が分かりやすいため、設定画面などで用いられることが多いです。 Androidアプリ開発でSwitchを追加する方法   Image View 画像を表示するための部品です。 Androidアプリ開発でImage Viewを追加する方法   Web View Webページを表示するための部品です。 Androidアプリ開発でWebViewを追加する方法     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GUIコンポーネントを追加する方法 最後に、実際GUIコンポーネントをアプリに追加する方法をご紹介します。今回は「TextView」を例にして紹介します。   まずは、Android Studioのパッケージ・エクスプローラーでres/layoutフォルダ内にある、xlmファイルを開いてください。   中央に「Pallete」があります。ここにアプリで利用できるGUIが用意されています。 フォーム・ウィジェット内のTextViewを配置したい場所にドラッグ＆ドロップしてください。   表示する文字を変えたい場合は、プロパティの「Text」の文字を変更します。 このプロパティの値を変更することで、表示する文字列のほかにも、文字の大きさを変えたり、センタリングをしたりといろいろなカスタマイズが可能です。   このように、グラフィカル・レイアウトで部品を配置すると、xmlに下記のコードが自動的に作成されます。 <TextView android:id=”@+id/textView1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignParentLeft=”true” android:layout_alignParentTop=”true” android:layout_marginLeft=”56dp” android:layout_marginTop=”60dp” android:text=”表示させたい文字を入力します” />   今回の記事は以上です。 ぜひ自分でも使ってみてください。   また、iPhoneアプリを開発したい場合も同じようなことができるので、XcodeでiPhoneアプリにUIパーツを追加する方法も合わせてご覧ください。   大石ゆかり とても便利ですね♪ 田島悠介 そうだね。GUIコンポーネントはAndroidアプリを作るためのパーツをほとんど用意してくれているから、活用すれば簡単にアプリを開発できるよ。 大石ゆかり そうなんですね！     [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう テックアカデミーでは、このような
Androidアプリ開発

JavaScriptでcheckboxを使う方法を現役エンジニアが解説【初心者向け】

JavaScriptでcheckboxを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでcheckboxを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   checkboxとは HTMLで複数の選択をさせる場合に使用する部品です。 下記のcheckboxの例では、0個-3個を選択できます。   基本的なcheckboxの作り方 inputタグのtypeをcheckboxにして、表示する文字を記述することでチェックボックスを作れます。 <input type="checkbox">チェック1 この作り方の場合は、チェックを入れるためには四角の中をクリックしないとチェックできません。 表示した文字もクリックしてもチェックが入るようにするとユーザーに親切です。その場合は、下記のようにlabelタグで囲うことで四角の中と文字全体のどこをクリックしてもチェックできるようになります。 <label> <input type="checkbox">チェック1 </label> また、下記のようなCSSをつけることでマウスカーソルの形でクリックできる場所（チェックできる場所）をユーザーに伝えることができます。 label, input[type='checkbox'] { cursor: pointer; }   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中checkboxに付け加えたい機能 下記の3つのチェックボックスを表示するHTMLを用意して、JavaScriptでよくある処理を記述していきます。   HTMLソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <label> <input type="checkbox" value="チェック1">チェック1 </label> <label> <input type="checkbox" value="チェック2">チェック2
JavaScript

Pythonにおけるguiライブラリ（windows）について現役エンジニアが解説【初心者向け】

Pythonにおけるguiライブラリ（windows）について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 guiライブラリ（windows）について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 guiとは windowsで利用できるguiライブラリ guiライブラリをインストールしてみよう まとめ   guiとは guiとは、グラフィックユーザーインターフェースの略称で、アプリケーションやソフトの操作を簡単に行う為の操作画面のことを指します。身近なもので例えると普段使用しているパソコンやスマホの操作画面やテレビの設定画面等もguiにあたります。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中windowsで利用できるguiライブラリ windows環境でのPython利用できるguiライブラリは下記のようなものが存在します。 Tkinter Tkinterは今回紹介するguiライブラリの中でも唯一のPython標準ライブラリです。標準ライブラリなのでセットアップやインストール等は必要なくPythonの環境があればすぐ使用することができます。 Tkinterは標準ライブラリで導入は簡単ですが、他のguiライブラリと比較すると機能面では少し物足りないかもしれません。   Kivy Kivyはクロスプラットフォーム対応のguiの開発ができるライブラリです。 ゲーム制作に強いguiライブラリですが、日本語での情報が少ないのと、guiを開発する時にPythonコードとは別にCSSに似たKivy独自の言語を必要とする為、guiライブラリの入門としては少しハードルが高いライブラリになります。   PyQt PyQtとは、C++言語で開発されたQtというGUIツールをPythonで使用できるようにしたものです。PyQtでは、美しいGUI開発を得意とし、これまでに様々なソフト開発に使用された実績があります。   wxPython wxPythonは、PyQtと同様にC++言語で作成されたwxWidgetsをPythonで使用できるようにしたものです。 Python3でしか動作しませんが、クロスプラットフォームのGUI開発対応で、ライブラリも豊富なことから、より拡張性の高いGUI開発が可能なライブラリになります。   guiライブラリをインストールしてみよう ここでは先ほど紹介したguiライブラリの中からwxPythonのインストール方法と、簡単なサンプルコードについて紹介します。 まずはじめに、wxPythonをインストールしてみましょう。 wxPythonはpipを使用してインストールが可能なので下記コマンドをターミナル/コマンドプロンプトで実行する事でインストールができます。 pip install wxpython   サンプルコードを参考にwxpythonを利用して簡単なGUIを作成してみましょう。 ここではwxPythonを使用して、ボタンをクリックすると動作する簡単なGUIを作成します。 ボタンはサンプルボタンと終了ボタンを作成し、それぞれクリックしたらメッセージを表示する、クリック後10秒経過後GUIを終了する機能を実装します。 サンプルコード # -*- coding: utf-8 -*- import wx import sys import time # ボタン1のクリックイベント関数 def click(event):     frame.SetStatusText("ボタンがクリックされました。") # ボタン2のクリックイベント関数 def end(event):     for i in range(9,-1,-1):         frame.SetStatusText('終了ボタンが押されました。' + str(i+1) + "秒後に終了します。")         time.sleep(1)     sys.exit() app = wx.App() frame = wx.Frame(None, -1, u'GUIサンプル', size=(290, 250)) frame.CreateStatusBar() panel = wx.Panel(frame, -1) # ボタン1/2の設置 button_1 = wx.Button(panel, -1, pos=(60, 40), size=(150, 50) , label = 'サンプルボタン') button_2 = wx.Button(panel, -1, pos=(60, 110), size=(150, 50) , label = '終了ボタン') # ボタン1/2のクリックイベント button_1.Bind(wx.EVT_BUTTON, click) button_2.Bind(wx.EVT_BUTTON, end) frame.Show() app.MainLoop()   実行結果 [サンプルコード実行時] [サンプルボタンクリック時] [終了ボタンクリック時]   解説 コード2-4行目では、サンプルコードで使用するモジュールのインポート処理をしています。 コード7-8行目では、ボタン1(サンプルボタン)をクリックした時のイベント内容を記述しています。 コード11-15行目では、ボタン2(終了ボタン)をクリックした時のイベント内容を記述しています。 コード17-29行目では、wxPythonを利用してフォームを作成するコードを記述しています。 コード31-32行目では、作成したフォームを表示する処理を記述しています。 サンプルコードを実行すると実行結果のようなフォームが起動し、サンプルボタン/終了ボタンをクリックするとそれぞれのイベントが起動する事が確認できます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
Python

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安
Androidアプリ開発

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。   UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。 個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。 この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。   Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。 その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。 上：Sketch  下：Figma   これが恐らくFigmaが最初の段階から一線を画す理由の1つです。 すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。 私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。 勝者：Figma 理由：プラットフォームに依存しないため   ユーザビリティ（特徴的機能とユーザーインターフェース） 基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。 もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。   Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。 しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。 勝者：引き分け 理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。   価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。 その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。 この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）   当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。 きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。） 勝者：引き分け 理由：Figmaの価格に関する発表はまだない為   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中コラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。   Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。 なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。 勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為   ファイル共有とスペック リアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。 このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。   これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。 しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。   更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。 あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。 左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。   もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。 勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ
アプリデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でCheckBoxを追加する方法【初心者向け】