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

Androidアプリ開発での【GUIコンポーネント】の使い方を初心者向けに解説した記事です。GUIを使うと、ボタンやスイッチなどのパーツを簡単に追加することができます。GUIの種類、パーツの追加方法も紹介しています。

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

Androidアプリ開発において、ボタンやスイッチといった便利なパーツ(GUI)が用意されています。

そこで今回は、アプリ開発の初心者向けにGUIコンポーネントの使い方を紹介します。

 

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

 

大石ゆかり

田島メンター!!Androidアプリでボタンとかテキストってどうやって設置するんですか???

田島悠介

GUIコンポーネントっていうのが用意されていて、気軽にボタンとかテキストを設置できるようになっているんだ。

大石ゆかり

え、どうやって使うんですか〜???

 

GUIコンポーネントとは

GUIコンポーネントとは、ボタンやテキストボックスなどのGUI(グラフィカルインターフェース)のライブラリです。

Androidアプリを開発するときは、すでに用意されているGUIを使うと簡単に画面を作成することができます。アプリのデザインを考える際にも役に立つことでしょう。

 

 

GUIコンポーネントの一部を紹介

実際にどんなものがあるのか部品を一部紹介します。画像と見比べるとよく理解できると思います。

また、リンク先にそれぞれのGUIコンポーネントを追加する方法も紹介しているので、合わせてご覧ください。

 

TextView

画面上に文字列を表示するための部品です。

001

Androidアプリ開発でTextViewを追加する方法

 

EditText

テキストを入力するための部品です。いくつか種類があり入力させたい文字によって、Plain TextやNumberなど使い分けることができます。

002

Androidアプリ開発でEditTextを追加する方法

 

Button

読んで字のごとくボタンです。クリックすることで、動作をするきっかけにすることができます。

003

Androidアプリ開発でButtonを追加する方法

 

Date Picker

日付を入力するための部品です。アプリを使う中でよく目にするのではないでしょうか。

008

Androidアプリ開発でDate Pickerを追加する方法

 

SeekBar

ある一定の範囲で数値を入力するときに便利な部品です。つまみをドラッグすることで値を入力することができます。

004

Androidアプリ開発でSeekBarを追加する方法

 

RatingBar

レート(評価)を入力させたい場合に使います。

005

Androidアプリ開発でRatingBarを追加する方法

 

RadioButton(ラジオボタン)

複数の選択肢の中から一つを選択させたい場合に使います。

006

Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法

 

Switch

オンオフの状態を表す部品です。視覚的に状態が分かりやすいため、設定画面などで用いられることが多いです。

007

Androidアプリ開発でSwitchを追加する方法

 

Image View

画像を表示するための部品です。

009

Androidアプリ開発でImage Viewを追加する方法

 

Web View

Webページを表示するための部品です。

010

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

独学に限界を感じたら…テックアカデミーに相談しよう

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

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

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

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

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

今なら参加者限定の割引特典付き! 無料で予約する