Android Studioで、Hello Workd!!
今まではEclipse + ADTで開発してましたが
今後、Android Studioを使い続けることに決めたため、少しずつIDEの使い方を
勉強していきたいと思います。
今回は、下記のような流れで進めていきます。
1.テストプロジェクトを作成
2.画面レイアウトをちょこっと修正
3.仮想デバイスを使って画面確認
1.テストプロジェクトを作成
まずは、Android Studioを立ち上げます。初期画面より Start a New Android Studio projectを選択します。
Create New Project画面が表示されます。
各入力項目の説明は下記の通りです。
項目 | 入力値 | 説明 |
---|---|---|
Application name | HelloTest | Google Play公開時に使用する、アプリ名称になります。 |
Company Domain | ougi.example.com | 通常は企業や組織などのトップレベルのドメイン名を指定します。まあ初期値のままで大丈夫です。私はougiとしています。 |
Package Name | com.example.ougi.hellotest | 自動入力によってきままります。編集も可能です。Google Playストアに登録するとなった場合に他の開発者のアプリと重複することがないように識別するための名前ですね。 |
Project location | 任意 | プロジェクトを作成するディレクトリパスです。 |
各項目入力後、画面右下にあるNextボタンを押下します。
Target Android Devices設定画面がひらきます。
各入力項目の説明は下記の通りです。
項目 | 入力値 | 説明 |
---|---|---|
Phone and tabletチェック | on | そのまんまですね。携帯とタブレットでの動作を考えてるのでチェックをONにします。 |
Wearチェック | off | Wearable アプリのことですね。 スマートウォッチ上で動作するかの選択です。今回は携帯での動作をかんがえているので、必要ないのでoffにしましょう。 |
TVチェック | off | AndroidTV向けのことですね。 今回は携帯での動作をかんがえているのでoffにします。 |
Android Autoチェック | off | 簡単にはAndroidカーナビのことですね。 今回は携帯での動作をかんがえているのでoffにします。 |
Android Glassチェック | off | 簡単にはAndroidメガネのことですね。 今回は携帯での動作をかんがえているのでoffにします。 |
それぞれのMinimum SDK | API15 | 作成アプリが動作する最低バージョンです。 ここで指定したバージョンより古い OS にはインストール出来ない様になります。これも今回はデフォルトのAPI15でいきましょう。 |
いやぁ~びっくりです。いつのまにやらいろんなデバイスがふえてたんですねー。
時間ができたら勉強してみたいです。
項目説明はざっくりと自分流に解釈しているため、実際は違うかもしれません。
おかしい点が有りましたらおしえてください(;´Д`)
Help me choose というリンクをクリックすると別画面が現れます。
この画面で各バージョンのシェア率がわかります。
どのバージョンで作るのか迷った場合はこの画面を参考にしましょう。
設定が終了したら、Target Android Devices設定画面の右下にあるNextボタンを押下します。
Add an activity to Mobile設定画面がひらきます。
初期の画面設定ですね。色々なレイアウトが有りますが、今回は初期値のBlank Activityを選択します。
設定が終了したら、画面の右下にあるNextボタンを押下します。
Customize the Activity設定画面がひらきます。
アプリファイル関連のリソースの名前を設定します。
特にルールがない為、適当に名前を決めちゃってください。
各入力項目の説明は下記の通りです。
項目 | 入力値 | 説明 |
---|---|---|
Activitiy Name | HelloTestMainActivity | 初期表示画面のアクティビティクラス名です。HelloTestMainActivityとしましょう。 |
Layout Name | activity_hello_test_main | 初期画面のレイアウトファイル名です。Activitiy Nameを入力すると自動で内容が変わります。このままいきましょう。 |
Title | HelloTestMainActivity | 画面に表示されるタイトル名設定です。Activitiy Nameを入力すると自動で内容が変わります。 |
Menu Resource Name | menu_hello_test_main | メニュー画面のレイアウトファイル名です。 このままいきます。 |
設定が終了したら、 画面の右下にあるFinishボタンを押下します。
プロジェクト作成中のプログレスバーが表示されます。1,2分ぐらい待ちました。
終了すると下記の画面が表示されます。
ヘルプ画面が自動でたちがるので、Closeボタンを押下します。
これでプロジェクトファイルの作成は終了です。おつかれさまでした。
ちなみに、私の環境だとPCのスペックが悪いせいか、ヘルプ画面をCloseした後に
IDEのそれぞれの項目が表示がされるまでに2分くらいかかりました。
すぐに表示されない場合、作成したのに失敗?!! と思わずに、少し待ってみてくださいね。
2.画面レイアウトをちょこっと修正
プロジェクトの作成が終了したら、画面のレイアウトを触ってみましょう。まず下記の赤い枠にあるプロジェクトをクリックしてAndroidにしましょう。
次にレイアウトファイルをいじって見ようと思ったのですが、今まで私が開発してときは
Layoutフォルダ下にあるactivity_main.xmlがレイアウトファイルだったんですが、
今回作成したプロジェクトのLayoutフォルダ下にはcontent_hello_test_main.xmlと
activity_hello_test_main.xmlの二つファイルがあります。
どうゆうこっちゃ???だったので、調べてみました。
ネットで調べてみると、Material Designという単語があちらこちらで見ることができました。
今まではフラットデザインという概念で作成されていたのが
最近はMaterial Designという概念で作成されているのがほとんどのようです。
詳しくは下記の記事を参考にしてください。
なかなか詳しく書かれている上に、わかりやすいです。
よくわかるマテリアルデザインの設計コンセプト
で、content_hello_test_main.xmlとactivity_hello_test_main.xmlの意味合いについてですが、
activity_hello_test_main.xmlは親レイアウト
content_hello_test_main.xmlは中身用のレイアウト
という位置付けになっています。
親レイアウトのactivity_hello_test_main.xmlの中身を見てみます。
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.example.ougi.hellotest.HelloTestMainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_hello_test_main" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
構造部分だけを抜き出すと下記の通りになります
<android.support.design.widget.CoordinatorLayout > <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar/> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_hello_test_main" /> <android.support.design.widget.FloatingActionButton/> </android.support.design.widget.CoordinatorLayout>
CoordinatorLayout
一番上の階層にCoordinatorLayoutクラスがいます。Material Designを実装するためのさまざまなコンポーネントのなかの1つです。
1つまたは複数のViewで相互関係を持たせることができます。
CoordinatorLayoutを使うことにより、その上に配置されている子Viewの大きさや
位置を動的に管理できます。
属性名 | 説明 |
---|---|
Axmlns:*** | 名前空間に関する定義ですね。おまじないみたいなものです。 |
android:layout_width | 横幅を指定する属性です。 (fill_parent/match_parent/wrap_content) "100%","500dp"のように数値で設定も可能です。 |
android:layout_height | 縦幅を指定する属性です。 (fill_parent/match_parent/wrap_content) "100%","500dp"のように数値で設定も可能です。 |
android:fitsSystemWindows | レイアウトをシステムウインドウを考慮して調整するかの設定をします。 レイアウト上部の時間などが表示されている領域のことですね。 |
tools:context | レイアウトエディタでの表示に指定したActivityが適用されるようになります。 |
AppBarLayout
CoordinatorLayoutとセットで使います。レイアウト上部の青色の部分のことですね。青色の部分のスクロール動作を作る際に、これを使うと簡単に実現可能になります。
属性名 | 説明 |
---|---|
android:layout_width | 横幅を指定する属性です。 (fill_parent/match_parent/wrap_content) "100%","500dp"のように数値で設定も可能です。 |
android:layout_height | 縦幅を指定する属性です。 (fill_parent/match_parent/wrap_content) "100%","500dp"のように数値で設定も可能です。 |
android:theme | デザインテーマの設定です。 "style/AppTheme.AppBarOverlay"で、styles.xmlのAppBarOverlay定義をテーマとして使用するという意味になります。 |
Toolbar
CoordinatorLayoutとセットで使います。レイアウト上部の青色の部分のことですね。青色の部分のスクロール動作を作る際に、これを使うと簡単に実現可能になります。
属性名 | 説明 |
---|---|
Aandroid:id | 名前空間に関する定義ですね。おまじないみたいなものです。 |
android:layout_width | 横幅を指定する属性です。 (fill_parent/match_parent/wrap_content) "100%","500dp"のように数値で設定も可能です。 |
android:layout_height | 縦幅を指定する属性です。 (fill_parent/match_parent/wrap_content) "100%","500dp"のように数値で設定も可能です。 |
android:background | デザインテーマの設定です。 "style/AppTheme.AppBarOverlay"で、styles.xmlのAppBarOverlay定義をテーマとして使用するという意味になります。 |
app:popupTheme | デザインテーマの設定です。 "style/AppTheme.AppBarOverlay"で、styles.xmlのAppBarOverlay定義をテーマとして使用するという意味になります。 |