CHUSUKE.COM

@chusuke311です。

さて、前の記事の続き。「HelloWorld」を作成する方法をなるべく簡単に(応用編)です。

前回までで「Hello World」と表示するアプリを作成することはできましたが、なぜ「Hello World」と表示されるのか、仕組みを解説していきたいと思います。


ソースコードを見てみる

前回できあがったアプリのソースコードを見てみましょう。

Eclipseを起動しましょう。

2013-01-14_11h56_04

左側にフォルダの階層が表示されています。

ここにアプリを構成するすべてのファイルが含まれています。

その中でもアプリ本体を形作っているのが、[HelloWorld]-[src]-[com.example.helloworld]にある「MainActivity.java」というファイルです。

 

中身を見てみましょう。

package com.example.helloworld;
 
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
 
public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
 
}

 

この中で「Hello World」と出力される原因となっているのが、ハイライトしている12行目の

setContentView(R.layout.activity_main);

です。

では、このコードの説明を次で詳しくしてみたいと思います。

setContentViewとは

最初にアプリの構造を理解していきます。

まず、アプリの画面のことを「アクティビティ」と言います。

開発していく上で多用される用語ですのでしっかりと覚えておきましょう。

 

そしてそのアクティビティ上に「ビュー」と呼ばれる部品、例えばテキストやボタン・画像など、を配置してアプリの画面を形作っていきます。

その「ビュー」の配置に利用するのが、setContentViewなのです。

app

では、実際の

setContentView(R.layout.activity_main);

について解説していきます。

これは、簡単に言うと「Rというファイルのlayout部分、activity_mainを表示してくれ」ということなのですが、

実際にRというファイル(=HelloWorld\gen\com.example.helloworld\R.java)をみてみると、

    public static final class layout {
        public static final int activity_main=0x7f030000;
    }

となっています。

 

activity_main=0x7f030000って…?という感じですね。

コレは実は「HelloWorld\res\layout\activity_main.xml」というファイルを指しているのです。

0x7f030000はIDで、activity_main.xmlを指しています。IDは固定では無いので、皆さんの環境では違う文字列であったりするとおもいますが、問題ありません。

 

そのファイルをEclipseで表示すると、実は一番最初に表示されていた、これなんです。

2013-01-14_11h56_04

ビジュアルエディタになっているのですが、その解説はまた今度。

今回はコードを見ていきます。

 

画面のスクリーンショットの下付近にある「activity_main.xml」をクリックすると、下のようなコードが出てきます。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
 
</RelativeLayout>

またまたハイライトしている12行目、

android:text="@string/hello_world"

実は、これが「Hello world!」と表示している根本なんです。

 

図で解説するとこうなります。

無題

  1. アクティビティからsetContentViewがR.javaのactivity_mainを表示するように要求。
  2. 要求を受けたR.javaはactivity_mainであるactivity_main.xmlを参照
  3. R.javaが参照したデータをsetContentViewがアクティビティ上に表示

という流れ作業のような感じです。

 

分かりにくいかもしれませんが、なんとなくイメージしていただければ…と思います。

これで「Hello world!」の表示の理由の解説は終わりです。

自分で「Hello World」を表示してみる

さて、仕組みは理解したけど、開発をしているという実感が全然わかない!という人も多いと思います。

と、いうことで今回は自分の手で「Hello World」と表示する方法を紹介したいと思います。

早速始めましょう。

 

では、MainActivity.javaを開いてください。

 

まずは上で解説してきた「Hello world!」と表示される原因となっている

setContentView(R.layout.activity_main);

を削除します。

 

そして、その消した部分に

		TextView _newtext = new TextView(this);

		_newtext.setText("HelloWorld!!!");

		setContentView(_newtext);

を貼り付けます。

 

そして、上の方にある

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

の部分に

import android.widget.TextView;

を追加します。

 

そうすると、結局、

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TextView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		TextView _newtext = new TextView(this);

		_newtext.setText("HelloWorld!!!");

		setContentView(_newtext);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}

という感じのソースコードになります。(ハイライト部分=追加分)

 

保存して仮想デバイスで起動してみましょう。

※起動方法は、(基本編)を参照。

2013-01-14_14h38_53

表示されるテキストが、「HelloWorld!!!」となっていれば、OKです。

仕組みはどうなってるの?

では、お待ちかね?の解説です。

実は、コレとても簡単な仕組みで成り立っています。

順を追って説明していきます。

 

まずは貼りつけたテキストの一行目、

TextView _newtext = new TextView(this);

です。

これは、「名前が『newtext』のTextViewという部品をつくります」という宣言みたいなものです。

 

次に二行目、

_newtext.setText("HelloWorld!!!");

は、

「部品『newtext』に『HelloWorld!!!』というテキストを埋め込んでください」という命令です。

 

そして最後三行目、

setContentView(_newtext);

は、

先ほども出てきたsetContentViewを利用した、「名前『newtext』という部品を表示してください」という命令となっています。

 

さてここまでではまだプログラムはTextViewという部品がどういうものなのかを知りません。

 

そこで登場するのが、最後に追加してもらった

import android.widget.TextView;

です。

これはTextViewの説明書みたいなものです。

最初に説明書をプログラムに読ませておくことでプログラムは「TextView=テキストを表示する部品」という変換をしてくれるようになるのです。

 

理解していただけたでしょうか。

例えば、部品の名前である『newtext』はお好みの文字列に変えることができますし、表示させるテキストを変えたいのならば、『newtext』に埋め込むテキストを変えればいいのです。

 

できるだけ簡単に書いたつもりですが、どこかご不明点等ございましたら、お気軽にコメントをお願いします。

それでは今日はこのへんで!

コメントがほしいっ

About CHUSUKE

名前: チュー介

名古屋在住・大学1年生(文系)

1996年3月11日生まれ。

食べることが好き。とりあえずよく食べる。

りんごが身の回りに増殖中。

Popular Posts

まだデータがありません。

Search