Androidアプリ開発におけるGUIコンポーネントの使い方【初心者向け】Androidアプリ開発Androidアプリ開発におけるGUIコンポーネントの使い方【初心者向け】Androidアプリ開発での【GUIコンポーネント】の使い方を初心者向けに解説した記事です。GUIを使うと、ボタンやスイッチなどのパーツを簡単に追加することができます。GUIの種類、パーツの追加方法も紹介しています。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。Androidアプリ開発において、ボタンやスイッチといった便利なパーツ(GUI)が用意されています。そこで今回は、アプリ開発の初心者向けにGUIコンポーネントの使い方を紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター!!Androidアプリでボタンとかテキストってどうやって設置するんですか???田島悠介GUIコンポーネントっていうのが用意されていて、気軽にボタンとかテキストを設置できるようになっているんだ。大石ゆかりえ、どうやって使うんですか〜???GUIコンポーネントとはGUIコンポーネントとは、ボタンやテキストボックスなどのGUI(グラフィカルインターフェース)のライブラリです。Androidアプリを開発するときは、すでに用意されているGUIを使うと簡単に画面を作成することができます。アプリのデザインを考える際にも役に立つことでしょう。実際にどんなものがあるのか部品を一部紹介します。画像と見比べるとよく理解できると思います。リンク先にそれぞれのGUIコンポーネントを追加する方法も紹介しているので、合わせてご覧ください。TextView画面上に文字列を表示するための部品です。Androidアプリ開発でTextViewを追加する方法EditTextテキストを入力するための部品です。TextやNumberなど使い分けることができます。Androidアプリ開発でEditTextを追加する方法Button読んで字のごとくボタンです。クリックすることで、動作をするきっかけにすることができます。Picker日付を入力するための部品です。アプリを使う中でよく目にするのではないでしょうか。Pickerを追加する方法SeekBarある一定の範囲で数値を入力するときに便利な部品です。つまみをドラッグすることで値を入力することができます。Androidアプリ開発でSeekBarを追加する方法RatingBarレート(評価)を入力させたい場合に使います。Androidアプリ開発でRatingBarを追加する方法RadioButton(ラジオボタン)複数の選択肢の中から一つを選択させたい場合に使います。Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法Switchオンオフの状態を表す部品です。視覚的に状態が分かりやすいため、設定画面などで用いられることが多いです。View画像を表示するための部品です。ViewWebページを表示するための部品です。最後に、実際GUIコンポーネントをアプリに追加する方法をご紹介します。今回は「TextView」を例にして紹介します。Studioのパッケージ・エクスプローラーでres/layoutフォルダ内にある、xlmファイルを開いてください。中央に「Pallete」があります。ここにアプリで利用できるGUIが用意されています。フォーム・ウィジェット内のTextViewを配置したい場所にドラッグ&ドロップしてください。表示する文字を変えたい場合は、プロパティの「Text」の文字を変更します。このプロパティの値を変更することで、表示する文字列のほかにも、文字の大きさを変えたり、センタリングをしたりといろいろなカスタマイズが可能です。このように、グラフィカル・レイアウトで部品を配置すると、xmlに下記のコードが自動的に作成されます。/>今回の記事は以上です。自分でも使ってみてください。iPhoneアプリを開発したい場合も同じようなことができるので、XcodeでiPhoneアプリにUIパーツを追加する方法も合わせてご覧ください。GUIコンポーネントはAndroidアプリを作るためのパーツをほとんど用意してくれているから、活用すれば簡単にアプリを開発できるよ。大石ゆかりそうなんですね![お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。関連する記事Androidアプリ開発でArrayAdapterクラスを使ってリストを表示させる方法【初心者向け】Androidアプリを開発では、ArrayAdapterクラスを使うと簡単にリストを表示することができます。今回は、初心者がKotlinの基礎から学べる本10選について解説します。今回は、Androidアプリ開発に関する内容...Androidアプリ開発Androidアプリ開発に使うメリットを解説!Kotlinとは【初心者向け】Androidアプリ開発で利用できるKotlinという言語について解説します。Androidアプリ開発でこれまで使われていた言語は基本的にJavaのみで...Androidアプリ開発Androidアプリ開発でEditTextを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はその中の1つである、EditTextを...Androidアプリ開発Androidアプリ開発でRatingBarを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、RatingBa...Androidアプリ開発Kotlinのforループの使い方を現役エンジニアが解説【初心者向け】Kotlinのforループの使い方について解説します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャン...Androidアプリ開発あわせてよく読まれている記事Androidアプリ開発でDatePickerを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、DatePicker(デイトピッカー)を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。あぁ、DatePickerだね。DatePicker(デートピッカー)とは、日付を入力するときに便利なGUIコンポーネントです。テキストボックスで日付を入力した場合、実際に存在する日付か確認をする必要がありますが、DatePickerを使えばそれが不要になります。DatePickerはレイアウトエディタのパレットの「時刻&日付」から配置できます。パレット内のDatePickerを、配置したい場所までドラッグしましょう。DatePickerの配置ができました。xmlファイルには次のようなコードが追加されます。アプリを起動すると図のように画面に、DatePickerが表示されます。今回の記事は以上です。他のGUIコンポーネントを使いたい場合は、Androidアプリ開発でSeekBarを追加する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発Androidアプリ開発でCheckBoxを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、CheckBox(チェックボックス)を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。CheckBox(チェックボックス)とは、クリックすることでON/OFFの2つの状態を表現することができるGUIコンポーネントです。ユーザーに「はい」「いいえ」の意思表示を求めるときなどに使われます。CheckBoxはレイアウトエディタのパレットの「フォーム・ウィジェット」から配置できます。他のGUIコンポーネントと同じように、パレット内のCheckBoxを配置したい場所までドラッグしましょう。このようにCheckBoxを配置すると、XMLファイルには次のようなコードが追加されます。コード内の「android:layout_」で始まる部分は、配置したCheckBoxの大きさや位置を示しています。最後に、ちょっとしたカスタマイズの方法を紹介します。CheckBoxのラベル部分に表示するテキストを変更したい場合は、プロパティの「Text」の値を変更しましょう。今回の記事は以上です。他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でButtonを追加する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発Androidアプリ開発でSeekBarを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、SeekBar(シークバー)を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。SeekBar(シークバー)とは、ある一定の範囲の数値を入力するときに使用するGUIコンポーネントです。アプリに流すBGMの音量の調節などで使用すると便利です。SeekBarはレイアウトエディタのパレットの「フォーム・ウィジェット」から配置できます。パレット内のSeekBarを、配置したい場所までドラッグしましょう。これでSeekBarの設定ができました。起動すると図のように画面にSeekBarが表示されます。配置ができたら、まずはSeekBarの上限を設定しましょう。プロパティの「Max」に上限に設定したい値を入力します。起動したときのつまみの位置は、プロパティの「Progress」で設定できます。上で上限を300に設定したので、つまみを真ん中に表示するためにProgressを150に設定してみました。このようにSeekBarを追加するとxmlファイルには次のようなコードが追加されます(widthは適宜変更しています)。起動すると、起動すると図のように画面にSeekBarが表示されます。先ほどとは違い、SeekBarのつまみが真ん中に表示されます。今回の記事は以上です。他のGUIコンポーネントも使ってみたい場合は、Androidアプリ開発でImageViewを追加する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発Androidアプリ開発でButtonを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はその中の1つである、Button(ボタン)を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。ButtonはGUIコンポーネントに用意されているから、設置してどう動かすかを実装するんだよ。Button(ボタン)とは、ユーザーがクリックすることで、動作をするきっかけにすることができる部品です。ボタンはあらゆるアプリで使われるのでよく目にすることも多いでしょう。Buttonはレイアウトエディタのパレットの「Widgets(ウィジェット)」から配置できます。パレット内のButtonを配置したい場所までドラッグします。このようにButtonを配置すると、xmlファイルには次のようなコードが追加されます。コード内の「android:layout_」で始まる部分は、配置したButtonの大きさや位置を指定しています。したカスタマイズの方法を最後に紹介します。Buttonに表示するテキストを変更したい場合は、プロパティの「Text」を変更します。画像を用意して、その画像をボタンの背景に使用することで、Buttonの見た目を簡単に変更することができます。プロジェクト内の「/res/drawableフォルダ」に用意した画像を保存します。フォルダが存在しない場合は新規作成してください。続いて、プロパティの「Background」の右側にある[...]ボタンをクリックすると、下の画像の様なダイアログが表示されます。画像のファイル名を選択し、[OK]ボタンをクリックします。ボタンの背景が選択した画像に変更されました。今回の記事は以上です。他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でTextViewを追加する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発Androidアプリ開発でTimePickerDialogを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのうちの1つである、TimePickerDialog(時刻入力ダイアログ)を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。それなら、TimePickerDialogを使うといいよ。TimePickerDialog(タイムピッカーダイアログ)とは、時刻の入力に特化したGUIコンポーネントです。乗り換え案内のアプリなどで目にする機会も多いかもしれません。アプリを起動したときにTimePickerDialogを表示させる場合、アプリ画面を作成するときに実行されるonCreateメゾットに下のコードを追加します。コードを追加したら、ここでアプリを実行してみましょう。アプリが起動するとTimePickerDialogが表示されます。[OK]ボタンをタップするとTimePickerDialogが消えログにダイアログで入力した時刻が表示されます。TimePickerDialogの構文は以下のようになっています。24時間表示の引数を「false」に変更し、アプリを実行してみましょう。ダイアログに午前・午後の選択欄が表示されました。必要に応じてカスタマイズしていきましょう。今回の記事は以上です。他のGUIコンポーネントを追加したい場合は、Androidアプリ開発でAlertDialogを追加する方法も合わせてご覧ください。TimePickerDialogはとても直感的に操作できるから、時刻入力するなら絶対使いたいね。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発Androidアプリ開発でRatingBarを追加する方法【初心者向け】Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、RatingBar(レイティングバー)を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。RatingBar(レーティングバー)とは、レート(評価)を入力したり表示したりするためのGUIコンポーネントです。レートの値を星のマークで表示します。RatingBarはレイアウトエディタのパレットの「フォーム・ウィジェット」から配置できます。パレット内のRatingBarを、配置したい場所までドラッグしましょう。RatingBarの配置ができました。アプリを起動すると図のように画面に、RatingBarが表示されます。RatingBarをタップすると、レートを入力することができます。プロパティを変更してRatingBarをカスタマイズしてみましょう。下記のプロパティがあります。stepSize:レートの増減の幅を指定。Indicator」を「true」にします。xmlファイルを確認すると、次のようなコードが追加されています。アプリを起動すると図のように画面に、RatingBarが表示されます。今回の記事は以上です。他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でDatePickerを追加する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。CORPORATION.。