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

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

Android Studio 3.0
Android 8.0

 



Button

 
アプリ開発の最初にButtonを試すのは意味があります。表示するだけでなく、UIをタップするとActionが発生するというアプリの基本を実感できるからです。Androidではこれが簡単にできるようにAPIが組まれています。

また以下はJava言語ですがKotlinを使うともっとコード量を減らすことができます。

最初はプロジェクトの作成から入っていますが、既に理解できていればコードの記述にSkipしても構いません。

 

プロジェクトの作成

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


 
既にプロジェクトが表示されているのであれば
「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のフォルダも作成するように設定します。


 
Minimum SDK でAndroid API の最低限のLevelを決めます。
テスト用の実機があればそれに合わせておきましょう
 

 
後からMinimum SDKを build.gradle から変えることもできます
「Next」
 
Empty Activity が使いやすいです
 

 
Activity の名前などを決めますが最初は初期値で始めてもいいでしょう
 

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

 

MainActivity.java

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

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

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

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

「Design」では込み入ったレイアウトの配置を決めていくには便利です。微調整も含めた細かな設定はコーディングがいい場合もあります。

「Design」
 

 
「Text」のタブをクリックしてここにコードを書きます
 

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

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

 

 
 

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

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

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

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

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

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

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

 

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

 

activity_main.xml

 
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

 
ここではこのファイルに記述が必要ではありません。後々見ないといけなくなるかもしれませんので紹介しますが、次にSkipしても大丈夫です。

build.gradle(Module: app)はプロジェクトの依存関係、APIレベル、バージョンなどを設定するところです。使う頻度は少ないかもしれませんが他にもbuild.gradle(Project: XXOO)やsettings.gradleなどあります。
 
gradle01
 
プロジェクト作成時に設定した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 の横にある三角のアイコンをクリックするとビルドが始まります
 
 
ビルドが成功すると実行デバイスの選択になります
 
エミュレーターか実機を選択します。
 

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

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

 
文字を大きく、色を変えて
全体を中央に寄せました

 

リテラルの修正

 
このコードは確かに動くのですが、コードをよく見るとあちこちにワーニングが出ています。
黄色いバックグラウンドになっているところにマウスを持ってくると、
 

 
String literal in setText can not be translated. Use Android resources instead.
Localizing with Resources | Android Developers
とあります。
setTex(“Hello”)
のようにHelloという文字列をハードコードで直書きしているリテラルが、正しく解釈されないのでresourceを使うようにと注意されているわけです。
 
例えば日本語でハードコーディングすると文字化けやコードが走らない事があり得るのです。
修正は、
 

 

この res\values\strings.xml に
nameが”hello”というkeyに対してHelloというvalueを設定します。
 

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

 

それぞれの修正箇所です。
MainActivity.java

 
レイアウトは
activity_main.xml

 
完成です。
 

 
 
関連ページ:

 
References:
Buttons | Android Developers