2019/02/06
新規プロジェクトを作ってみようで、立ち上げると画面にHello world!と表示されるアプリを作りました。
画面にHello world!と表示されるその仕組みについてのお話の続きです。
前回(【Hello world!の仕組み1】 マニフェストファイルについて)は、
マニフェストファイルに「このアプリのトップ画面についてはnet.nobuo.create.firstappli.MainActivityクラスで定義しています」と書いてある
というところまでお話しました。
では、MainActivityクラスにはどんなことが書いてあるのか?説明していきます。
sponsored link
もくじ
MainActivity.java
まずクラスの宣言部分を見てください。
public class MainActivity extends ActionBarActivity{ }
ご覧のようにMainActivityクラスは、ActionBarActivityクラスを継承しています。
ActionBarActivityクラスというのは、Activityクラスを継承して作られたアクションバーを簡単に実装する為のクラスです。
ちなみにアクションバーと言うのはアプリ画面の一番上に表示される部分の事で、デフォルトではアイコン・アプリ名・操作ボタンがセットになっています。他にもいろんな機能を追加することが出来ます。
このActionBarActivityクラスはActivityクラスを継承して作られているので、あなたのアプリのトップ画面であるMainActivityクラスもActivityクラスを継承したクラスということになります。
アプリの一画面の挙動をプログラミングするには、Activityクラスを継承したクラスじゃないとダメです。
Activityクラスというのは、Androidアプリの一画面の見た目や機能を定義する為のクラスです。
参考:Activity | Android Developers(英語)
Activityクラスには、画面を制御する為の機能が全部詰まっています。
例えば、onCreate()というメソッドがActivityクラスで定義されています。onCreate()はそのActivity(画面)を立ち上げた際に最初に呼ばれるメソッドです。
このonCreate()をMainActivityにてオーバーライド(上書き)することで、このアプリを立ち上げた際にするべきことをプログラミングすることが出来ます。
というよりonCreate()メソッドをオーバーライドせずには何も始まりません。main()メソッドみたいなものですね。
onCreate()
では、MainActivityのonCreate()に注目です。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new PlaceholderFragment()) .commit(); } }
onCreate(Bundle savedInstanceState)
onCreate()はご覧のように、引数にBundleオブジェクトを受け取るように定義されています。Bundleオブジェクトというのはこのアクティビティ(画面)を起動する際に、なんらかの状態を引き継いで起動したい時に渡す為の容れ物みたいなものです。誤解を恐れずに言うとmain()メソッドの引数に入っているString[] argsみたいなものと思っていたらいいと思います。
実は僕は初めてこの部分を見た時、savedInstanceStateって一体何なんだ?!と軽く衝撃を受けたのですが、ただの変数名なので難しく考えることないです。(笑)
このonCreate()メソッドがこの画面を立ち上げた際にまず呼ばれます。その定義部分を見ていきましょう。
super.onCreate(savedInstanceState);
親クラスであるActivityクラスのonCreate()を呼んでいます。
ActivityクラスのonCreate()メソッドにはアプリの画面を表示する為の最低限必要な処理が書いてあるんだと思いますが、難しいので省略。。
setContentView(R.layout.activity_main);
このsetContentView()メソッドはActivityクラスで定義されているメソッドです。このメソッドは何をしてくれるかと言うと、引数に渡したレイアウト定義用xmlファイルを読み込んで、画面に表示してくれます。
ここでは、R.layout.activity_mainを渡していますね。R.layout.activity_mainというのは何かと言うと、FirstAppli(プロジェクトフォルダ)の中のres(resourceの略)フォルダの中のlayoutフォルダの中にあるactivity_main.xmlを指しています。
そのactivity_main.xmlを、setContentView()メソッドの引数に渡すことで、activity_main.xmlで定義された画面(レイアウト)を表示することができるというわけです。
activity_main.xml
では、activity_main.xmlでどんなレイアウトを定義しているのか見てみましょう。
activity_main.xmlをダブルクリックして開いて、下にあるactivity_main.xmlというタブを開くとソースコードが見れます。
ソースコードはさておき、もう一つのタブ、グラフィカル・レイアウトというタブを開きましょう。
実はソースコードを直接触らなくても、このグラフィカル・レイアウトで何でも出来ちゃいます。
とりあえずこのactivity_main.xmlの中身を確認しましょう。
アウトラインという枠の中に、このファイル(activity_main.xml)に書かれている要素のアウトラインが表示されます。
見ての通り、container(FrameLayout)とだけ書いてあります。
container(FrameLayout)というのは、何を表しているかと言うと、
containerというIDがつけられたFrameLayout
という意味です。
FrameLayoutというのは、読んで字の如くただのフレーム(枠)です。ボタンや文字などのパーツ(Viewと言います)をその枠内に置くことができます。「強制的に枠内の左上に詰める形でパーツ(View)が配置される」という特徴を持つLayoutです。
参考:Layoutって何?(執筆予定)
参考:Viewって何?(執筆予定)
activity_main.xmlに書かれている唯一の要素であるこのFrameLayoutについてもう少し詳しく見てみましょう。上記のアウトライン枠内のcontainer(FrameLayout)を選択した状態で、下のプロパティをクリックするとこのFrameLayoutについての詳細を見ることができます。
※もしプロパティというタブがない人はウィンドウ→ビューの表示→その他からプロパティを選択して下さい。
プロパティは書いてあることが非常に多いので狭くて見にくいと思います。それを画面いっぱいに広げて見る方法があります。
プロパティのタブを開いた状態でそのタブをダブルクリックします。すると、プロパティだけが全画面表示されます。
元に戻すには、選択しているタブ(プロパティ)をもう一度ダブルクリックすればOKです。長ったらしいソースコードを見る時なんかもこれを覚えておけば非常に便利ですよ。
全画面に表示したものの、このFrameLayoutのプロパティとして設定されている項目は3つだけです。
まず一番上のIDが、@+id/containerとなっています。これによってこの要素(FrameLayout)がcontainerというIDを持つことになります。
IDを付与することによって、xmlファイル内に書いてあるこのFrameLayoutを、Javaファイル(MainActivity等のクラス)内でFramelayoutオブジェクトとして触る際に、その両者をIDによって簡単にひも付けることができます。
containerではなく、
@containerでもなく、
@id/containerでもなく、
@+id/containerが正解です。そういう記述ルールなので覚えましょう。
IDの下にlayout Parametersというのがありますが、中身が折りたたまれています。+をクリックして広げてしまいましょう。ついでにその中にあるMarginsも広げてみましょう。
widthとheightの値が、match_parentとなっていますね。これはこのFrameLayoutの幅(width)と高さ(height)を定義しています。
match_parentというのは、親要素いっぱいに広がるサイズという意味です。なので、このFrameLayoutは縦も横も画面いっぱいに広がるサイズだということになります。
このFrameLayoutに関して定義されていることはこの3つ(ID,width,height)だけです。
つまり、activity_main.xmlにて定義されているレイアウトというのは、containerというIDを持つ画面いっぱいサイズのFrameLayout(枠)。これだけです。
上記で説明したsetContentView(R.layout.activity_main);によって、activity_main.xmlにて定義されたFrameLayout(ただの枠)が、このアプリのトップ画面(MainActivity)にセットされるわけです。
続きはまた次回
さて、長々と説明してきましたが、残念ながらまだ「Hello world!」のへの字も出てきません。(笑)
一生懸命読んでいただいてる方、申し訳ないですがもう少々お付き合い下さい。
今だけ→転職できなければ全額返金の「エンジニア転職保証コース」
絶対エンジニアになる!→テックエキスパート
フリーランスエンジニアの収入例を見てみる→レバテックフリーランス
コメント
I feel so much happier now I unetnsdard all this. Thanks!
by Pangga 2015/03/12 19:14
activity_main.xmlのグラフィカルレイアウトの画面においてプレビューが表示されません。
どうすればいいいでしょうか?
by koba 2015/10/28 22:34
↑ソフトを再起動したら治りました。すみません。
by koba 2015/10/28 22:42
2023年ですが、こちらの記事に出会いました。いまではAndroidStudioのUIはすっかり変わっていますが、内容は求めていた基本知識そのものでした!とてもよく理解できました。。ありがとうございます!
by hina 2023/02/25 19:29