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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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では初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。