1. 程式人生 > >[Tab選項卡選單(一)]位於頂部的tab選項卡選單

[Tab選項卡選單(一)]位於頂部的tab選項卡選單

今天順利的把TabHost的一些相關的東西都弄清楚了! 在此,和大家分享一下,順便自我總結一下,加深自己的記憶!

我的邏輯比較強,我會把整個過程和其中遇到的問題的列出來!供小夥伴們參考! 如果發現有任何問題歡迎大家直接提出來交流! 共同進步!吐舌頭

OK! 我們開始進入正題!

一、製作一個簡單的位於頂部的Tab選項卡選單:

首先來看看效果圖:

這個完成了簡單的選項卡布置和實現的內容的跳轉,接下來我們來看看具體是怎麼實現的!

 1、首先了解一下Tab元件使用的相關順序:

a.在佈局檔案中使用FrameLayout列出Tab元件以及Tab中的內容元件

b.Activity要繼承TabActivity

c.呼叫TabActivity的getTabHost( )方法來獲得TabHost物件

d.通過TabHost建立Tab選項

2、好現在跟我一步一步的完成:

這是我的所以Activity:


我這裡只用了一個xml來進行佈局TabActivity,其他Activity都是在程式碼裡動態載入的,為了測試,這個就不多說了


好了,來看看activity_tab.xml裡面的內容:

<span style="font-size:12px;"><TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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"
        >
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            
        ></TabWidget>
        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            ></FrameLayout>
    </LinearLayout>
    
</TabHost></span><span style="font-size: 14px;">
</span>

大家看到了,最外層是用了一個TabHost的包裹著,然後用一個linearlayout,用垂直的屬性來包裹Tabwidget(每個選項卡)和Framelayout(每個選項卡的內容顯示之處),對於整個佈局來說TabHost是一個根標籤,然後在linearlayout裡面,orientation的設定是vertical(垂直的),這樣的話Tabwidget就在Framelayout的上面;

這個地方有幾個需要注意的:

a.TabHost、Tabwidget、Framelayout的id都要用android給定的id來表示,自己定義也可以,但程式碼裡面的寫法就會不一樣,就要用findviewbyid來獲取控制元件的物件來進行相關的操作,這次暫時不介紹這個,大家就先用規定的id就行

android:id="@android:id/tabhost"
android:id="@android:id/tabs"
android:id="@android:id/tabcontent"
b.若要讓選項卡在頂部,那Tabwidget和Framelayout在xml裡面的位置就不要改變,後面會講到有兩個方法把選項卡選單放到底部,此處不在贅述。

3、接下來,讓我們看看TabActivity裡面的程式碼是怎樣的:

package com.example.tabactivity_test;

import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabActivity extends android.app.TabActivity {
	//建立一個成員變數,方便後面的方法利用
	private TabHost tabhost;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab);
		//得到tabhost物件
		tabhost = getTabHost();
		//呼叫自己寫的方法來建立選項卡(tab)
		addTabWidget("tab1","第一個選項卡",FirstActivity.class);
		addTabWidget("tab2","第二個選項卡",SecendActivity.class);
		addTabWidget("tab3","第三個選項卡",ThreeActivity.class);
	}
	private void addTabWidget(String TabSpecTag, String Name,
			Class<?> class1) {
		//建立一個intent的物件,用於tab之間的對應的內容跳轉
		Intent intent = new Intent(this,class1);
		//構建一個tabspec物件,然後呼叫tabhost的addTab來加入新的Tab
		TabSpec tabspec = tabhost.newTabSpec(TabSpecTag);//不同tab的標籤
		tabspec.setIndicator(Name);//用於顯示Tab上面的文字,也可以新增圖示,這個後面再說
		tabspec.setContent(intent);//傳遞一個intent
		tabhost.addTab(tabspec);//將tab加進去
		
		//上面的程式碼也可以簡化為:
		//tabhost.addTab(tabhost.newTabSpec(TabSpecTag).setIndicator(Name).setContent(new Intent(this,class1)));
	}
}
大家注意上面的addTabwidget方法,這是我自己寫的一個方法,為了簡化一些不必要的操作,這個應該不難理解吧! 程式碼解釋就不多說了,都有註釋!還有一點就是我的TabActivity是繼承了TabActivity的,其他的Activity就只是繼承了Activity。注意:我這裡是採用了內容用不同的Activity來實現,同時你也可以通過載入不同的xml佈局檔案來實現內容的不同,方法靈活,想怎麼樣都可以! 我簡單的說一下:


可以看到setContent是很靈活的,所以我們只需要把intent改成:R.layout.xxxx(xxx是你需要載入的xml名稱)  ,大家可以下去試一試! 有什麼問題可以提出來!

4、最後,讓我們看看其他Activity裡面的有什麼東西,我為了測試,就簡單的加了一點東西,每個都差不多,所以就給大家看一個就行了!

<span style="font-size:12px;">package com.example.tabactivity_test;

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

public class FirstActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		//建立一個TextView,用來測試
		TextView textview = new TextView(this);
		//設定文字內容
		textview.setText("這是第一個Tab");
		//在這個activity可以見到這個view
		setContentView(textview);
	}
}</span>

ok! 是不是很簡單!  當然,這只是一個非常簡單的Tab選項卡,後面我會慢慢給大家講跟家複雜的,一步步來嘛!

大家想想,是不是還有什麼沒有寫完的?  有人猜到了麼?  對了Manifest沒有註冊其他的Activity!這個應該對於大家不是很困難!那我就大概列出了就行了哦!

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

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".TabActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
           <activity
            android:name=".FirstActivity"
            android:label="@string/app_name" >
           
        </activity>
           <activity
            android:name=".SecendActivity"
            android:label="@string/app_name" >
           
        </activity>
           <activity
            android:name=".ThreeActivity"
            android:label="@string/app_name" >
        </activity>
        
    </application>

</manifest>

OK,這個就先寫到這裡,更復雜的以後再慢慢加,如果大家支援的多的話! 就更新快點咯!

先預告一下吧! 後面將會講到怎麼把頂部的tab放到底部去! 我講會跟大家分享兩種方法! 謝謝大家的觀賞!