Android TabLayoutの例

投稿日: 2019-11-05 2019-11-05
タグ: android, layout, tablayout

このチュートリアルでは、「TabLayout」を使用して「Android」、「Windows」、「Apple」、「BlackBerry」の4つのタブをレンダリングする方法を示します。各タブには簡単なメッセージを表示するテキストビューが含まれています。

P.SこのプロジェクトはEclipse 3.7で開発され、Android 2.3.3.

でテストされています

1.タブイメージ

”

res/drawable

“フォルダに4つのタブイメージを置く。このチュートリアルで使用されているタブ画像は、http://developer.android.com/guide/practices/ui

guidelines/icon

design__tab.html(Androidアイコンガイドライン）のとおりではありません。申し訳ありませんが、私はデザインがうまくいきません。

ディレクトリ構造、タイトル= "android-tablayout-images"、幅= 432、高さ= 397

2. XMLのタブイメージ

4つのXMファイルを作成して各タブで使用するイメージを指定し、同じ ”

res/drawable

“フォルダに入れます。

File:icon

android

config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, you should use bg with grey -->
    <item android:drawable="@drawable/ic__tab__android"
          android:state__selected="true"/>
    <!-- When not selected, you should use bg with white -->
    <item android:drawable="@drawable/ic__tab__android"/>
</selector>

ファイル:icon

apple

config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic__tab__apple"
          android:state__selected="true"/>
    <!-- When not selected -->
    <item android:drawable="@drawable/ic__tab__apple"/>
</selector>

File:icon

blackberry

config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic__tab__blackberry"
          android:state__selected="true"/>
    <!-- When not selected -->
    <item android:drawable="@drawable/ic__tab__blackberry"/>
</selector>

ファイル:icon

windows

config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic__tab__windows"
          android:state__selected="true"/>
    <!-- When not selected -->
    <item android:drawable="@drawable/ic__tab__windows"/>
</selector>

3.タブのアクティビティ

4つのアクティビティクラスを作成し、タブがクリックされたときにどのアクティビティを使用するかを指示します。 4つのクラスはすべて同じことをしており、textviewコンポーネントを表示します。

File:AndroidActivity.java

package com.mkyong.android;

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

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

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

File:AppleActivity.java

package com.mkyong.android;

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

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

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

File:BlackBerryActivity.java

package com.mkyong.android;

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

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

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

File:WindowsActivity.java

package com.mkyong.android;

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

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

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

4.主な活動

エントリポイントを作成し、4つ以上のタブアクティビティクラスを
TabHost
、` TabSpec`などでリンクします。

package com.mkyong.android;

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

public class MainActivity extends TabActivity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources ressources = getResources();
        TabHost tabHost = getTabHost();

       //Android tab
        Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
        TabSpec tabSpecAndroid = tabHost
          .newTabSpec("Android")
          .setIndicator("", ressources.getDrawable(R.drawable.icon__android__config))
          .setContent(intentAndroid);

       //Apple tab
        Intent intentApple = new Intent().setClass(this, AppleActivity.class);
        TabSpec tabSpecApple = tabHost
          .newTabSpec("Apple")
          .setIndicator("", ressources.getDrawable(R.drawable.icon__apple__config))
          .setContent(intentApple);

       //Windows tab
        Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
        TabSpec tabSpecWindows = tabHost
          .newTabSpec("Windows")
          .setIndicator("", ressources.getDrawable(R.drawable.icon__windows__config))
          .setContent(intentWindows);

       //Blackberry tab
        Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
        TabSpec tabSpecBerry = tabHost
          .newTabSpec("Berry")
          .setIndicator("", ressources.getDrawable(R.drawable.icon__blackberry__config))
          .setContent(intentBerry);

       //add all tabs
        tabHost.addTab(tabSpecAndroid);
        tabHost.addTab(tabSpecApple);
        tabHost.addTab(tabSpecWindows);
        tabHost.addTab(tabSpecBerry);

       //set Windows tab as default (zero based)
        tabHost.setCurrentTab(2);
    }

}

5. Androidレイアウトファイル

ファイル:res/layout/main.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:orientation="vertical"
        android:layout__width="fill__parent"
        android:layout__height="fill__parent"
        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>

6. Android Manifest

最後に、すべてを “AndroidManifest.xml”に入れ、4つのタブアクティビティクラスを定義し、エントリポイントとして “MainActivity”を設定します。

File:AndroidManifest.xml

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

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

    <application
        android:icon="@drawable/ic__launcher"
        android:label="@string/app__name" >

        <activity android:name=".AndroidActivity"/>
        <activity android:name=".WindowsActivity"/>
        <activity android:name=".AppleActivity"/>
        <activity android:name=".BlackBerryActivity"/>

        <activity
            android:label="@string/app__name"
            android:name=".MainActivity"
            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>
    </application>

</manifest>