(AndroidDevelopersチュートリアル)Tab Layout

【目的】
AndroidDevelopersのチュートリアルのTab Layoutを実行します。



【手順１】
１．「Tab Layoutのチュートリアル」にアクセス。
２．「マイクのアイコン(白)」を右クリック、「名前を付けて画像を保存」を選択。

【手順２】
１．保存先を選択。
２．「保存」ボタンをクリック。

【手順３】
１．「マイクのアイコン(灰色)」を右クリック、「名前を付けて画像を保存」を選択

【手順４】
１．保存先を選択。
２．「保存」ボタンをクリック。

【手順５】
１．ダウンロードした「ic_tab_albums_grey.png」と「ic_tab_albums_white.png」を選択し、「コピー」を選択。

【手順６】
１．「Ctrl+V」を２回押し、ファイルを2回コピーする。

【手順７】
１．以下の通りに画像名を変更する。
「コピー ～ ic_tab_artists_white.png」⇒「ic_tab_albums_grey.png」
「コピー ～ ic_tab_artists_grey.png」⇒「ic_tab_albums_white.png」
「コピー (2) ～ ic_tab_artists_grey.png」⇒「ic_tab_songs_grey.png」
「コピー (2) ～ ic_tab_artists_white.png」⇒「ic_tab_songs_white.png」

【手順８】
１．画像を全て選択し、「コピー」を選択。

【手順９】
１．「Androidプロジェクトの作成方法」の手順で、「AndroidSample009-HelloTabWidget」といプロジェクトを作成。

※プロジェクトの設定は以下の通り。

	Project Name		AndroidSample009-HelloTabWidget
	ビルド・ターゲット	ターゲット名	Android 2.1
		プラットフォーム	2.1
		API	7
	Application Name		AndroidSample009-HelloTabWidget
	Package Name		com.example.androidsample009
	アクティビティーの作成		HelloTabWidget
	Minimum SDK		7

２．「res/drawable/ディレクトリの作成方法」の手順で、「res/drawable/」ディレクトリを作成。
３．「res/drawable/」を選択し、「Ctrl+V」でコピーした画像を貼り付け。

【手順１０】
１．「Javaクラスファイルの作成方法」の手順で「ArtistsActivity.java」を作成。
２．「ArtistsActivity.java」を以下の様に入力。

package com.example.androidsample009;

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

public class ArtistsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is the Artists tab");
        setContentView(textview);
    }
}

３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
４．「Javaクラスファイルの作成方法」の手順で「AlbumsActivity.java」を作成。
５．「AlbumsActivity.java」を以下の様に入力。

package com.example.androidsample009;

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

public class AlbumsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is the Albums tab");
        setContentView(textview);
    }
}

６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
７．「Javaクラスファイルの作成方法」の手順で「SongsActivity.java」を作成。
８．「SongsActivity.java」を以下の様に入力。

package com.example.androidsample009;

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

public class SongsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is the Songs tab");
        setContentView(textview);
    }
}

９．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。



【手順１１】
１．「任意のファイルの作成方法」の手順で、「res/drawable/」ディレクトリに「ic_tab_artists.xml」というファイルを作成。
２．「ic_tab_artists.xml」を以下の様に入力。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true"/>
    <!-- When not selected, use white -->
    <item android:drawable="@drawable/ic_tab_artists_white"/>

</selector>

３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
４．「任意のファイルの作成方法」の手順で、「res/drawable/」ディレクトリに「ic_tab_albums.xml」というファイルを作成。
５．「ic_tab_albums.xml」を以下の様に入力。

<xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_tab_albums_grey" android:state_selected="true"/>
    <!-- When not selected, use white -->
    <item android:drawable="@drawable/ic_tab_albums_white"/>

</selector>

６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
７．「任意のファイルの作成方法」の手順で、「res/drawable/」ディレクトリに「ic_tab_songs.xml」というファイルを作成。
８．「ic_tab_songs.xml」を以下の様に入力。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_tab_songs_grey" android:state_selected="true"/>
    <!-- When not selected, use white -->
    <item android:drawable="@drawable/ic_tab_songs_white"/>

</selector>

９．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。



【手順１２】
１．「res/drawable/layout.xml」を以下の様に入力。

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="5dp" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>

</TabHost>

２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
３．「HelloTabWidget.java」を以下の様に入力。

package com.example.androidsample009;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class HelloTabWidget extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getResources(); // Resource object to get Drawables
        TabHost tabHost = getTabHost(); // The activity TabHost
        TabHost.TabSpec spec; // Resusable TabSpec for each tab
        Intent intent; // Reusable Intent for each tab

        // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, ArtistsActivity.class);

        // Initialize a TabSpec for each tab and add it to the TabHost
        spec = tabHost
                .newTabSpec("artists")
                .setIndicator("Artists",
                        res.getDrawable(R.drawable.ic_tab_artists))
                .setContent(intent);
        tabHost.addTab(spec);

        // Do the same for the other tabs
        intent = new Intent().setClass(this, AlbumsActivity.class);
        spec = tabHost
                .newTabSpec("albums")
                .setIndicator("Albums",
                        res.getDrawable(R.drawable.ic_tab_albums))
                .setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, SongsActivity.class);
        spec = tabHost
                .newTabSpec("songs")
                .setIndicator("Songs", res.getDrawable(R.drawable.ic_tab_songs))
                .setContent(intent);
        tabHost.addTab(spec);

        tabHost.setCurrentTab(2);
    }
}

４．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
５．「AndroidManifest.xml」を以下の様に入力

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidsample009"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".HelloTabWidget"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.NoTitleBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".ArtistsActivity" />
        <activity android:name=".SongsActivity" />
        <activity android:name=".AlbumsActivity" />
    </application>

</manifest>

６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
７．「Androidプロジェクトの実行方法」の手順で、「Androidプロジェクト」を実行。

【手順１３】
１．エミュレータが起動しロックを解除し、以下の様にアプリケーションが実行されれば成功です。