天天看點
傳回

Android之TabHost布局 兩種方式

       第一種繼承TabActivity，從TabActivity中用getTabHost()方法擷取TabHost。各個Tab中的内容在布局檔案中定義就行了。

      第二種方式，不繼承TabActivity，在布局檔案中定義TabHost即可，但是TabWidget的id必須是@android:id/tabs，FrameLayout的id必須是@android:id/tabcontent。

1、繼承TabActivity

不多說，直接附上代碼

在main.xml裡的代碼：

<?xml version="1.0" encoding="utf-8"?>

<!-- 第一種繼承TabActivity，從TabActivity中用getTabHost()方法擷取TabHost。各個Tab中的内容在布局檔案中定義就行了。 -->

<!-- 定義TabHost元件 -->

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <!-- 定義第一個标簽頁的内容 -->

    <LinearLayout

        android:id="@+id/tab01"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

        <!-- 定義兩個TextView用于顯示标簽頁中的内容 -->

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="張三-2015-09-09  10:26" />

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="李四-2015-09-09  12:35" />

        <Button 

            android:id="@+id/btn_next"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="不繼承TabActivity的方法"/>

    </LinearLayout>

    <!-- 定義第二個标簽頁的内容 -->

    <LinearLayout

        android:id="@+id/tab02"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

        <!-- 定義兩個TextView用于顯示标簽頁中的内容 -->

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="王五-2015-09-08  11:26" />

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="趙六-2015-09-09  13:18" />

    </LinearLayout>

    <!-- 定義第三個标簽頁的内容 -->

    <LinearLayout

        android:id="@+id/tab03"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

        <!-- 定義兩個TextView用于顯示标簽頁中的内容 -->

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="張三-2015-09-08  10:28" />

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:text="趙六-2015-09-09  12:39" />

    </LinearLayout>

</TabHost>

在MainActivity裡的代碼：

package com.example.tabhosttest;

import android.R.color;

import android.os.Bundle;

import android.app.Activity;

import android.app.TabActivity;

import android.content.Intent;

import android.graphics.Color;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.Window;

import android.widget.Button;

import android.widget.TabHost;

public class MainActivity extends TabActivity implements OnClickListener {

private Button btn_next;

@SuppressWarnings("deprecation")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//requestWindowFeature(Window.FEATURE_NO_TITLE);

//調用TabActivity的getTabHost()方法擷取TabHost對象

TabHost tabHost = getTabHost();

//設定TabHost布局

LayoutInflater.from(this).inflate(R.layout.activity_main, tabHost.getTabContentView(), true);

// 設定一下TabHost的顔色

tabHost.setBackgroundColor(Color.argb(100, 22, 70, 100));

//添加第一個标簽頁

tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("已接電話").setContent(R.id.tab01));

//添加第二個标簽頁，并在其标簽上添加圖檔

tabHost.addTab(tabHost.newTabSpec("tab02").setIndicator("未接電話", getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab02));

tabHost.addTab(tabHost.newTabSpec("tab02").setIndicator("123", getResources().getDrawable(R.drawable.gimp)).setContent(R.id.tab02));

//添加第三個标簽頁

tabHost.addTab(tabHost.newTabSpec("tab03").setIndicator("以撥電話").setContent(R.id.tab03));

btn_next = (Button) findViewById(R.id.btn_next);

btn_next.setOnClickListener(this);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

switch (v.getId()) {

case R.id.btn_next:

Intent intent = new Intent(this, SecondMethod.class);

startActivity(intent);

break;

}

}

}

運作結果如下圖所示：

Android之TabHost布局 兩種方式

2、不繼承TabActivity

在secondmethod.xml裡的代碼：

<?xml version="1.0" encoding="utf-8"?>

<!-- 繼承普通Activity，<TabWidget>标簽id必須為tabs、<FrameLayout>标簽id必須為tabcontent.這個方式在通過findViewById獲得TabHost之後，必須要調用setup方法。 -->

<!-- TabHost必須包含一個 TabWidget和一個FrameLayout -->

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/tabhost"

    android:layout_width="fill_parent"

    android:layout_height="match_parent" >

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

        <!-- TabWidget 的id屬性必須為 @android:id/tabs -->

        <TabWidget

            android:id="@android:id/tabs"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal" />

        <!-- FrameLayout的id屬性必須為 @android:id/tabcontent -->

        <FrameLayout

            android:id="@android:id/tabcontent"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent" >

            <TextView

                android:id="@+id/t_view1"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent" />

            <EditText 

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="123"/>

            <TextView

                android:id="@+id/t_view2"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent" />

            <TextView

                android:id="@+id/t_view3"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent" />

        </FrameLayout>

    </LinearLayout>

</TabHost>

在SecondMethod.java裡的代碼：

package com.example.tabhosttest;

import android.app.Activity;

import android.os.Bundle;

import android.widget.TabHost;

public class SecondMethod extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.secondmethod);

//擷取TabHost對象

TabHost tabHost = (TabHost) findViewById(R.id.tabhost);

//如果沒有繼承TabActivity時，通過這種方法加載啟動tabHost

tabHost.setup();

tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("第一個标簽", getResources().getDrawable(R.drawable.bg)).setContent(R.id.t_view1));

tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("第二個标簽", getResources().getDrawable(R.drawable.gimp)).setContent(R.id.t_view2));

tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("第三個标簽", getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.t_view3));

}

}

運作效果如下圖所示：

Android之TabHost布局 兩種方式
android TabHost 布局
上一篇: TabHost的底部實作
下一篇: qq主界面實作(一)-使用fragment實作tabHost的效果

繼續閱讀