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

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

Android Studio 3.2
Android 9.0

 



Button

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

 

プロジェクトの作成

 
Android Studio から「Start a new Android Studio project」を選択します。
 
app devop 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 02 - Android の Button アプリを作ってみると簡単だった
 
Minimum SDK でAndroid API の最低限のLevelを決めます。
実機でテストする場合は、Levelを実機に合わせて落とすこともあります。
 
button 03 - Android の Button アプリを作ってみると簡単だった
 
後からMinimum SDKを build.gradle から変えることもできます
「Next」をクリック
 
Empty Activity が使いやすいです。他のものは便利なのですが、ある程度アプリ構築を理解できてからのほうがいいでしょう。
 
button 04 - Android の Button アプリを作ってみると簡単だった
 
Activity の名前などを決めますが最初はそのままMainActivityでも大丈夫
 
button 05 - 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などあります。
 
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 アプリを作ってみると簡単だった 
ビルドが成功すると実行デバイスの選択になります
 
エミュレーターを選択します。
 
button 09 - Android の Button アプリを作ってみると簡単だった
 
あまりレイアウトはぱっとしませんが
とりあえず、ボタンを押すとテキストが変わるアプリができました
 

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

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

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

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


 


ページのトップへ戻る




シェアする

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

フォローする