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アプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

Kotlinのdata class（データクラス）の使い方【初心者向け】

Kotlinのdata class（データクラス）の使い方について解説します。   本記事はTechAcademyのAndroidアプリ開...
Androidアプリ開発

Kotlinのcontainsメソッドの使い方を現役エンジニアが解説【初心者向け】

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

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

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、RelativeLayout...
Androidアプリ開発

Kotlinのenum class（列挙型クラス）の使い方【初心者向け】

Kotlinのenum class（列挙型クラス）の使い方について解説します。   本記事はTechAcademyのAndroidアプリ開...
Androidアプリ開発

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

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

Androidアプリ開発でColorクラスを使って文字の色を変える方法【初心者向け】

Androidアプリを開発では、Colorクラスを使ってアプリの起動中に文字の色を変えることができます。 Colorクラスとは、その名の通り、色に関する指...
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 チュートリアル豊富 ゲーム用   実際にPySimpleGUI でGUIアプリを作ってみる PySimpleGUI でGUIアプリを作成する理由は、初心者向けで非常に簡単にGUIアプリの作成が可能だからです。   PySimpleGUI のインストール PySimpleGUI公式サイトの説明に沿ってPySimpleGUI をインストールします。 pip install pysimplegui サンプルコード PySimpleGUI公式ページのサンプルコードを利用します。 import PySimpleGUI as sg sg.theme('DarkAmber') layout = [ [sg.Text('Pythonを勉強')],
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

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アプリ開発

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

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？ 田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。 大石ゆかり あ、そうなんですか〜！？   TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。 ただし、行をまたいでパーツを配置することはできませんのでご注意ください。     TableLayoutを配置する 今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。   最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。   次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください） 配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。     [PR] Androidアプリ開発コースTableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。     TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout>     TableLayout上のパーツの配置を調整する 「0」ボタンは2つのセルをまたいで配置されています。 複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。 <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ />   実行すると、この画像のようにボタンが表示されます。   また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。 列番号は、一番左から「0,1,2,3…」となっています。 <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_column=”3″ android:text=”+” /> </TableRow>   さらに実行すると、この画像のようにボタンが表示されます。 これで完成です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり tableタグを同じように設置できますね！ 田島悠介 そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。 大石ゆかり そうですね〜♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

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におけるguiライブラリ（windows）について紹介しました。 作成したプログラムにGUIを実装する事で、より操作のしやすいアプリケーション開発が可能になります。 今回は簡単なGUIを作成する方法を紹介しましたが、同様の内容で様々なアプリケーション開発ができるようになるので、是非今回の記事を参考に挑戦してみて下さい。   監修してくれたメンター 菅繕久 現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。 普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。 開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。 TechAcademy ではPythonコースを担当しております。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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