Android の Button アプリを作ってみると簡単だった

test button 01 500x334 - Android の Button アプリを作ってみると簡単だった
アプリの作り方の基本を習得するために、ボタンを押したら文字が変わるという簡単なアプリを作ってみます。

Android Studio 3.4
Android 9.0



Button

 
アプリ開発の最初にButtonを試すのは意味があります。表示するだけでなく、UIをタップするとActionが発生するというアプリの基本を実感できるからです。Androidではこれが簡単にできるようにAPIが組まれています。
 
またここではJava言語を使っていいきますが Kotlin を使うともっとコード量を減らすことができます。
 
最初はプロジェクトの作成から入っていますが、既に理解できていればコードの記述にSkipして「MainActivity」から始めても構いません。
 

 

プロジェクトの作成

 
Android Studio から「Start a new Android Studio project」を選択します。
 
android sutido 3.4 11 500x400 - Android の Button アプリを作ってみると簡単だった
 
あるいは既にプロジェクトが表示されているのであれば
「File」「New」「New Project…」
を選択して新規プロジェクトを開始できます。
 
「File」「Close project」では一旦プロジェクトを終了させてTop画面に戻ることもできます。

 
Activityのタイプを選定:
Empty Activity が使いやすいです。他のものは便利なのですが、ある程度アプリ構築を理解できてからのほうがいいでしょう。「Next」

android sutido 3.4 12 500x383 - Android の Button アプリを作ってみると簡単だった
 
プロジェクトの名前を入れます。
例: TestButton プロジェクトを作成する場合

  • Name: TestButton
  • Package name: example.com
    • example.com.testbutton になります
  • Save location: アプリプロジェクトを保存する場所
  • Language: Java
    KotlinかJavaの開発言語の選択
  • Minimum API Level: API 28: Android 9.0 (Pie)
    最初なのでAPI28で始めますが、実機でテストする場合は、Levelを実機に合わせて落とすこともあります
    後からMinimum SDKを build.gradle から変えることもできます

「Next」をクリック

android sutido 3.4 13b 500x386 - Android の Button アプリを作ってみると簡単だった
 
プロジェクトが完成しました。
 
button 04 1 - Android の Button アプリを作ってみると簡単だった

 

MainActivity

 
コードを記述していきます。
プロジェクトが作成されると「Project」のTAGで階層が表示されます。
主に MainActivity.javaactivity_main.xml を使います。
 
button 05 1 - Android の Button アプリを作ってみると簡単だった
 
Java のコーディングは MainActivity.java にします。Empty Activityを選んだので、ある程度の基本的なコードは既に入っています。
 

 
activity_main.xml にはレイアウトを記述
やり方として2通りあります。

  • 「Design」を使って画面上にUIパーツを配置する方法
  • 「Text」で全てコードで書いていく方法

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

「Design」
 
button 06b - Android の Button アプリを作ってみると簡単だった
 
「Text」のタブをクリックしてここにコードを書きます。
微調整も含めた細かな設定はコーディングがいいでしょう、またネットにある開発情報の多くがコードです。
 
 
button 07b - Android の Button アプリを作ってみると簡単だった
 
MainActivity.javaの onCreateメソッドにボタンを設定する記述をします。

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

 
button a01 - Android の Button アプリを作ってみると簡単だった
 
 

setContentView:

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

それぞれTextViewなどのViewを何種類かある Layout に設定し、それを SetContentView() に入れます。

setcontentview 01 - Android の Button アプリを作ってみると簡単だった

ファイルでは(LinearLayoutの例)

setcontentview 02d 500x256 - Android の Button アプリを作ってみると簡単だった

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

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

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

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

 
ボタンが押された時の挙動を決めます。
ボタン押されるとflagがtrueかfalseかを判別して

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

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

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

 

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

 

activity_main

 
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″

 
activity_main.xml

 

build.gradle

 
ここではこのファイルに記述が必要ではありません。後々必要となりますので紹介しておきます。

build.gradle(Module: app)はプロジェクトの依存関係、APIレベル、バージョンなどを設定するところです。使う頻度は少ないかもしれませんが他にもbuild.gradle(Project: XXOO)やsettings.gradleなどあります。
 
test button 02 - Android の Button アプリを作ってみると簡単だった
 
プロジェクト作成時に設定したAPIレベルですが、後から変更するにはこれを使います。

(これは環境によって変わるのでコピペしないほうがいいです)

  • compileSdkVersion
    • compileする API のバージョン
  • buildToolsVersion
    • Android SDK Build-toolsのバージョン
  • minSdkVersion
    • 対応できる最下位のAPIバージョン
  • targetSdkVersion
    • アプリケーションが対応しているAPIのバージョン
  • versionCode
    • アプリのリリース毎にアップデートさせるべきコード、1 -> 2 -> 3 …
  • versionName
    • ユーザーから見えるバージョンですversionCodeは上げてもこれはそのままにできます。リリース直後のバグ修正にはversionCodeは上げてもversionNameはそのままにするケース。1.0.0 -> 1.0.1 -> 1.1.0 ….
 

アプリを実行

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

エミュレーターの立ち上がりに時間がかかるようであれば実機を使います。 
Windows の場合は、実機のUSBドライバーを入れてください。スマホメーカーから提供されていると思います。USB ドライバーの設定
Macの場合はこのドライバーの設定は必要ありませんが、スマホのUSBデバッグを有効にする必要があります。
 
メニューから「Run」->「Run ’app’」とするか
その下のapp の横にある三角のアイコンをクリックするとビルドが始まります
 
as helloworld 08b - Android の Button アプリを作ってみると簡単だった 
ビルドが成功すると実行デバイスの選択になります
 
エミュレーターを選択します。
 
button 09 - Android の Button アプリを作ってみると簡単だった
 
あまりレイアウトはぱっとしませんが
とりあえず、ボタンを押すとテキストが変わるアプリができました
 

test button 03 - Android の Button アプリを作ってみると簡単だった

 
 
少し見栄えを良くしてみます
activity_main.xml

 
test button 04 - Android の Button アプリを作ってみると簡単だった 
 
文字を大きく、色を変えてみました。

 

リテラルの修正

 
このコードは確かに動くのですが、コードをよく見るとあちこちにワーニングが出ています。黄色いバックグラウンドになっているところにマウスを持ってくると、
 
button a02 - Android の Button アプリを作ってみると簡単だった
 
String literal in setText can not be translated. Use Android resources instead.
Localizing with Resources | Android Developers
とあります。
setTex(“Hello”)
のようにHelloという文字列をハードコードで直書きしているリテラルが、正しく解釈されないのでresourceを使うようにと注意されているわけです。
 
例えば日本語でハードコーディングすると文字化けやコードが走らない事があり得るのです。修正は、
 

 
button a03 - Android の Button アプリを作ってみると簡単だった
この res\values\strings.xml に
nameが”hello”というkeyに対してHelloというvalueを設定します。
 

 
このワーニングはactivity_main.xmlのリテラルにも出ているので合わせて修正すると。
strings.xml

 

それぞれの修正箇所ですが実はコメントアウトしてあるものを戻せばいいだけです。
MainActivity.java

 
レイアウトは
activity_main.xml

 
完成です。
 

 
以上はJava言語で記述しましたが、Kotlin も正式に使用可能言語となりました。以上をKotolinで書くと以下のようになります。

kotlin button 03 100x100 - Android の Button アプリを作ってみると簡単だった
KotlinでAndroidの Button アプリを作ってみると簡単に作れました。今までよりコード量が減ってスッキリした感じです。   ...

関連ページ:

 
Reference:
Buttons | Android Developers

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加




アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう、時間の制約がないところが一番の魅力です。

以下の3つはAndroidが学習できるオンラインスクールです。


TECH ACADEMY
Androidアプリコース



侍エンジニア塾
侍エンジニア塾 無料体験レッスン



CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp





正直ネットや本では限界があります。直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。

尚、スクールがダメだと言う人がいますが、やる気があれば問題ありません。与えられるのを待っていてはいけないですね
欲しいものは取りに行くのです。


Google Pixel 3 XLグローバル版
SIMフリー 並行輸入品
6.3インチの大画面
背景をぼかすポートレートモード撮影

Anker PowerCore II Slim 10000
Power IQ 2.0搭載
iPhone & Android対応

シェアする

  • このエントリーをはてなブックマークに追加

フォローする