Andorid Studioでアプリ開発(1)~サンプルをちょっと変えてみる~

前回まででAndroid Studioをインストールし、Hello World!を出力してみました。今回はそのサンプルをちょっと変えてみて、Android Studioの使い方を覚え待て行きます。

テキスト変更

サンプルで表示されているHello World!!のテキストを変更してみたいと思います。

Android Studioを起動すると、スマホの外観が表示されていると思います。その表示の左下に「Design」と「Text」タブがあるので、その「Text」をクリックします。

andro52

すると、「レイアウトファイル」が開きます。レイアウトファイルは、リソースを格納するresフォルダの下、layoutフォルダに入っています。activity_○○.xmlといったファイルです。

今回は、content_○○.xmlファイルが開いています。ここには、画面に表示するコンテンツが定義されています。レイアウトファイルを開くと、その右側に編集中のレイアウトを表示するプレビュー画面が表示されます。

andro53

このなかに、「TextView」とうタグがあり、そのタグに「android:text」という属性があり、その値として現在表示している「Hello World」が書かれています。この部分を直接編集してもテキストは変わるのですが、今回はこのテキスト部分を変数にして文字列だけの定義ファイルを作成します。いわゆるプロパティファイル的なものです。

文字列部分をクリックしてカーソルをあてた後、alt+Enterキーを押すか、同じ行の左側の余白にマウスを動かし、現れた電球マークのプルダウンをクリックすると、以下のようなポップアップが現れます。

andro54

このポップアップの「Extract string resource」をクリックすると、以下のような画面に変わるので、「Resource Name」を好きな名前に変更して「OK」をクリックします。

andro55

すると「Hello World」の部分が「@string/変数名」に変わります。この変数の参照先を確認するには、この変数の上で「ctrl+B」と押すか「ctrlを押しながらマウスを左クリック」します。すると、この変数の定義が書かれているリソースファイル「string.xml」が開きます。string.xmlは、res/valuesフォルダの下にあります。

andro57

このようにデザインからデータを切り離すことで、開発が行いやすくなります。

ボタンの配置

今度は画面にボタンを配置してみます。

レイアウトファイルのボタンを追加したいところで「<」とタグを書こうとすると、コードの候補が出てきます。

andro58

そのうちの「Button」を選択すると、レイアウトファイルにボタン用のXMLタグのテンプレートが挿入されます。

andro59

Buttonタグを以下のように変更すると、右側のプレビュー画面にボタンが現れます。ですが、テキストの上に被さってしまっています。

andro61

これはデフォルトでレイアウトの配置がRelativeになっているからです。今表示しているレイアウトは「RelativeLayout」タグで囲まれています。それを「LinearLayout」に変更すると、横並びの配置に変わります。

andro62

LinearLayoutは、デフォルトで横並びの配置を行うので、それを縦並びに変えたいと思います。LinearLayoutタグに「android:orientation=”vertical”」の属性値を追加します。

andro63

テキストとボタンが縦並びになりました。

ボタンにクリック時の動作をつける

ボタンを配置したら、ボタンをクリックしたときの動作をつけてみます。今回はボタンをクリックすると、ボタンの文字が変わるサンプルです。

まずは、ボタンにIDを設定します。これがないとどのボタンにクリックイベントを紐づけていいか分からないため、必須です。Buttonタグに「android:id=”@+id/ID名”」の属性値を追加します。

andro64

次に「○○Activity.java」というJavaファイルを開きます。レイアウトファイルと同じように○○Activity.javaというタブがありますので、そちらに切り替えます。

そのJavaファイルに対して、以下のようなコードを追加します。これは○○Activityクラスのフィールドです。

こちらはonCreateメソッドに追加します。

全体的にはこうなります。

andro67

このなかの「R.id.changetext」は、「R.id.ID名」です。先ほどレイアウトファイルに記述したID名を記述します。

また「R.string.chengedText」は、先ほどレイアウトファイルで「@string/変数名」としたようにJavaの中でもstring.xmlに定義した文字列を参照できます。この場合は「R.string.変数名」という内容になっています。

これでクリックイベントの追加が終わりました。エミュレータで確認します。

andro65

ボタンをクリックすると、

andro66

文字列が変わりましたね!

すべてを勉強していくとなると大変なので、ここから先は実際にアプリを作りながら覚えるしかないでしょう。

広告
  • LINEで送る