最近の更新

2012年5月16日水曜日

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

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



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




【手順2】
1.保存先を選択。
2.「保存」ボタンをクリック。




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




【手順4】
1.保存先を選択。
2.「保存」ボタンをクリック。




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




【手順6】
1.「Ctrl+V」を2回押し、ファイルを2回コピーする。




【手順7】
1.以下の通りに画像名を変更する。
「コピー ~ 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」




【手順8】
1.画像を全て選択し、「コピー」を選択。




【手順9】
1.「Androidプロジェクトの作成方法」の手順で、「AndroidSample009-HelloTabWidget」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。

Project NameAndroidSample009-HelloTabWidget

ビルド・ターゲットターゲット名Android 2.1
プラットフォーム2.1
API7
Application NameAndroidSample009-HelloTabWidget
Package Namecom.example.androidsample009
アクティビティーの作成HelloTabWidget
Minimum SDK7


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




【手順10】
1.「Javaクラスファイルの作成方法」の手順で「ArtistsActivity.java」を作成。
2.「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);
    }
}

3.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
4.「Javaクラスファイルの作成方法」の手順で「AlbumsActivity.java」を作成。
5.「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);
    }
}

6.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
7.「Javaクラスファイルの作成方法」の手順で「SongsActivity.java」を作成。
8.「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);
    }
}

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



【手順11】
1.「任意のファイルの作成方法」の手順で、「res/drawable/」ディレクトリに「ic_tab_artists.xml」というファイルを作成。
2.「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>

3.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
4.「任意のファイルの作成方法」の手順で、「res/drawable/」ディレクトリに「ic_tab_albums.xml」というファイルを作成。
5.「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>

6.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
7.「任意のファイルの作成方法」の手順で、「res/drawable/」ディレクトリに「ic_tab_songs.xml」というファイルを作成。
8.「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>

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



【手順12】
1.「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>

2.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
3.「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);
    }
}

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング。
5.「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>

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




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








0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事