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

アプリの作り方の基本を習得するために、ボタンを押したら文字が変わるという簡単なアプリを作ってみます。尚、Android Studio 3.0からJavaでの記述がより簡略化されました。
 
button02c - Android の Button アプリを作ってみると簡単だった

Android Studio 3.1.4
API 28

 



Button

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

 

プロジェクトの作成

 
Android Studio から「Start a new Android Studio project」を選択します。
 

as install 07 - Android の Button アプリを作ってみると簡単だった
 
あるいは既にプロジェクトが表示されているのであれば
「File」「New」「New Project…」
を選択して新規プロジェクトを開始できます。

「File」「Close project」では一旦プロジェクトを終了させてTop画面に戻ることもできます。以下プロジェクトの設定です。
 

 
プロジェクトの名前を入れます。
例: TestButton プロジェクトを作成する場合

  • Application name: TestButton
  • Company Domain: example.com
    • テストアプリであれば、公開しないので適当で大丈夫です
  • Project location: (例)C:¥Android¥hoge¥TestButton
    • プロジェクトを置く場所を選びます。
    • アプリケ―ション名、プロジェクト名が C:¥Android¥hoge\ 以下にTestButtonのフォルダも作成するように設定します。
      このフォルダーは一例ですが、少なくとも日本語のフォルダー以下にはおかないようにしましょう。後でエラーで苦しむことになるかもしれませんので

button 01 1 - Android の Button アプリを作ってみると簡単だった
 
Minimum SDK でAndroid API の最低限のLevelを決めます。
テスト用の実機があればそれに合わせておきましょう
 
button 02 1 - Android の Button アプリを作ってみると簡単だった
 
後からMinimum SDKを build.gradle から変えることもできます
「Next」をクリック
 
Empty Activity が使いやすいです。他のは便利なのですが、ある程度アプリ構築を理解できてからのほうが理解しやすくなります。
 
button 03 1 - Android の Button アプリを作ってみると簡単だった
 
Activity の名前などを決めますが最初は初期値で始めてもいいでしょう
 
button 03 - 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」ではレイアウトの配置全体をデザイン的に決めていくには便利です。微調整も含めた細かな設定はコーディングがいい場合もあります。

「Design」
 
button 06 - Android の Button アプリを作ってみると簡単だった
 
「Text」のタブをクリックしてここにコードを書きます
 
button 07 - Android の Button アプリを作ってみると簡単だった
 
MainActivity.javaの onCreateメソッドにボタンを設定する記述をします。

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

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

setContentView:

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

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

textview code a01d 450x199 - Android の Button アプリを作ってみると簡単だった

ファイルでは

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 を呼び出していますのでそれをここに作成します。
 

Android Studio 2.3からデフォルトで「ConstraintLayout」が設定されていますが
簡単なレイアウトでは使いづらいので「LinearLayout」で設定します、というか私が慣れていないので…
(Googleさんは時々新しい機能を流行らせたいのかこういうことをします)
既にあるlayoutの記述を消して次のように設定します

ボタンのIDは以下で定義されています
android:id=”@+id/button”
TextViewも同様です
android:id=”@+id/text_view”
 
またRelativeLayoutから
LinearLayoutに変更して
android:orientation=”vertical”
を追加します
これは垂直方にUIが並ぶようにするためでLinearLayoutでは必要なものです。
 
activity_main.xml

 

build.gradle

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

build.gradle(Module: app)はプロジェクトの依存関係、APIレベル、バージョンなどを設定するところです。使う頻度は少ないかもしれませんが他にもbuild.gradle(Project: XXOO)やsettings.gradleなどあります。
 
gradle01 300x239 - 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 アプリを作ってみると簡単だった 
ビルドが成功すると実行デバイスの選択になります
 
エミュレーターか実機を選択します。
 
as helloworld 15 - Android の Button アプリを作ってみると簡単だった
 
あまりレイアウトはぱっとしませんが
とりあえず、ボタンを押すとテキストが変わるアプリができました
 

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

 
button02c - 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フォーム

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


 


ページのトップへ戻る




シェアする

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

フォローする