ボタンアプリを作ったので解説

挨拶

こんにちは、さとしです。

本日は、AndroidStudioを用いてボタンアプリを制作したので

制作手順をお伝えしていきます。

今回の内容

・AndroidStudioのプロジェクト作成方法

・下記の写真のようなボタンを押すと、

　「Hello」と「World」が交互に出てくるアプリが作成

以下は制作手順になります。

Step1　プロジェクトの作成

　
Android Studio から「Create New project」を選択します。
　

　
あるいは既にプロジェクトが表示されているのであれば
「File」「New」「New Project…」
を選択して新規プロジェクトを開始できます。
　
「File」「Close project」では一旦プロジェクトを終了させてTop画面に戻ることもできます。

　
Activityのタイプを選定：
Empty Activity が使いやすいです。

選択が終わったら「Next」

　
プロジェクトの名前を入れます。
例：　Button　プロジェクトを作成する場合（分かりやすくしましょう）

• Name: Button
• Package name: example.com
• Save location: アプリプロジェクトを保存する場所
• Language: Java
  KotlinかJavaの開発言語の選択　※今回はJavaを使用します。
• Minimum API Level: API 30: Android 11.0 (R)
  後からMinimum SDKを build.gradle から変えることもできます

記入が終わりったら「Finish」をクリック

　
プロジェクトが完成しました。
　

【即納】Apple MacBook Air 13.3インチ Retinaディスプレイ MWTL2J/A ゴールド MWTL2JA 第10世代 Core i3 1.1GHz/2コア SSD 256GB メモリ8G アップル【送料無料】【KK9N0D18P】

Step2　MainActivityを記入

　
コードを記述していきます。
プロジェクトが作成されると「Project」のTAGで階層が表示されます。
主に MainActivity.java と activity_main.xml を使います。
　

　
Java のコーディングは MainActivity.java にします。Empty Activityを選んだので、ある程度の基本的なコードは既に入っています。
　

 

1 2 3 4 5 6 7 8 9 10 11 12

import androidx.appcompat.app.AppCompatActivity;   import android.os.Bundle;   public class MainActivity extends AppCompatActivity {       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     } }

　
activity_main.xml にはレイアウトを記述
やり方としては、

• 「Design」を使って画面上にUIパーツを配置する
• 「Code」で全てコードで記述

「Design」ではレイアウトの配置全体をデザイン的に決めていくには便利です。
レイアウトの種類に応じて設定方法がことなりますが、デフォルトのConstraintLayoutの使い方は慣れないと初めはわかりにくいかもしれません。

右上の３つ並んだアイコンで「Code」「Split」「Design」の切り替えができます。
　

　
「Code」は並んだアイコンの左端です。
微調整も含めた細かな設定はコーディングがいいでしょう、またネットにある開発情報の多くがコードです。
　

　
MainActivity.javaの onCreateメソッドにボタンを設定する記述をします。

 

1 2 3 4 5 6 7 8

@Override protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           // ボタンを設定         Button button = findViewById(R.id.button); }

　
ここで、エラーが表示されますが後でコードを正しく追加すれば消えます。
あるいは、エラーとなっているところにこのようポップアップが出た場合は、エラー部分にマウスを置いて「Alt+Enter」を行うと自動的に以下の行が追加されます。（MacとWindowsではコマンドが異なります）
　

 

1	import android.widget.Button;

　

また、R.id.button がエラーになっていますが、後でレイアウトの設定をすれば解消します。
　
　

setContentView:

Screenにテキスト、ボタン、画像を表示させる仕組みで SetContentView() は最終的にViewをまとめるところです。

TextViewなどのViewを何種類かある Layout に設定し、

それを SetContentView() に入れます。

ファイルでは(LinearLayoutの例)

 

1	setContentView(R.layout.activity_main);

　
既にこれが記述されていて、これが activity_main.xml ファイルをレイアウトとして登録し表示する設定です。
　

 

1	findViewById(R.id.button)

　
これはリソースの（レイアウトファイル）からid が button のものを見つけてくることを意味します。
findViewById
　
次に TextView を設定します。このケースではTextViewは事前に onCreate() の前に作成します。
private TextView textView;

onCreate() の中に
textView = findViewById(R.id.textView);
　
その後に、ボタンがタップされた事が分かるようにリスナー登録します。

OnClickListener()：
リスナー、つまりアプリが起動中に、ユーザーがボタンをタップしたイベント発生を聞き耳を立てているというようなことでしょうか。
　

 

1 2 3 4 5 6

button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // ... } });

ボタンがタップされた時の挙動を決めます。
ボタンタップされるとフラグのbuttonTapを判別して

• trueなら「Hello」
• falseなら「World」

が表示されるコードです
setText() でTextViewの文字列を設定
　

 

1 2 3 4 5 6 7 8

if(buttonTap){ textView.setText("Hello");         buttonTap= false; } else{ textView.setText("World");         buttonTap= true; }

　
importをいくつか追加して、とりあえずコードをまとめるとこうなります。
　
MainActivity.java

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

//package com.example.testbutton;   import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView;   public class MainActivity extends AppCompatActivity {       private TextView textView;     private boolean buttonTap = false;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           // ボタンを設定         Button button = findViewById(R.id.button);           // TextView の設定         textView = findViewById(R.id.text_view);   //        button.setOnClickListener(new View.OnClickListener() { //            @Override //            public void onClick(View view) { //                // flagがtrueの時 //                if (buttonTap) { //                    textView.setText("Hello"); //                    buttonTap = false; //                } //                // flagがfalseの時 //                else { //                    textView.setText("world"); //                    buttonTap = true; //                } //            } //        });           button.setOnClickListener( v -> {             // flagがtrueの時             if (buttonTap) {                 textView.setText("Hello");                 buttonTap = false;             }             // flagがfalseの時             else {                 textView.setText("world");                 buttonTap = true;             }         });         } }

この状態ではまだエラーがありますがレイアウトファイルを設定すれば解消します。

package com.example.testbutton;

　 

 

 

 Step3　MainActivityを記入する

　
レイアウトを設定します。
フォルダ res 以下の layout に activity_main.xmlファイルがあります
　
MainActivity.java では button と textView を呼び出していますのでそれをここに作成します。デフォルトでは「ConstraintLayout」が設定されています。
ボタンのIDは以下で定義されています
android:id=”@+id/button”
TextViewも同様です
android:id=”@+id/text_view”
　
またTextViewの垂直方向の位置調整で
app:layout_constraintVertical_bias=”0.4″
と設定します。
またButtonは
app:layout_constraintVertical_bias=”0.6″

　
..\res\layout\activity_main.xml

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity">       <TextView         android:id="@+id/text_view"         android:text="Hello"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent"         app:layout_constraintVertical_bias="0.4" />       <Button         android:id="@+id/button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent"         app:layout_constraintVertical_bias="0.6" />   </androidx.constraintlayout.widget.ConstraintLayout>

　

Apple MacBook Air 13.3インチ Retinaディスプレイ MVH42J/A シルバー MVH42JA 第10世代 Core i5 1.1GHz/4コア SSD 512GB メモリ8G アップル【送料無料】【KK9N0D18P】

 

 Step４　アプリを動かす

　
実際のAndroidで実行させてみましょう。PCのスペックが低くなければエミュレーターで確認できます。

エミュレーターの立ち上がりに時間がかかるようであれば実機を使います。　
Macの場合はこのドライバーの設定は必要ありませんが、スマホのUSBデバッグを有効にする必要があります。
　
エミュレーターを選択し
メニューから「Run」->「Run　’app’」とするか
三角のアイコンをクリックするとビルドが始まります
　

　
あまりレイアウトはぱっとしませんが
とりあえず、ボタンを押すとテキストが変わるアプリができました
　

Step5　改造案

今回制作したアプリのコードを書き換えて遊んでみました。

自分が実施したのは、以下になります。

・「Hello」「World」の部分を書き換えてみる。

・ボタンのサイズ・色を変えてみる。

・「Button」の表示を変えてみる。

終わり

今回は以上になります。

コメント等いただけると嬉しいです。

観ていただきありがとうございました。

★☆アップル / APPLE MacBook Pro Retinaディスプレイ 13.3 MYDA2J/A [シルバー] 【Mac ノート(MacBook)】【送料無料】