Android UI控制元件系列：Tab Layout（選項卡布局）

apkbus發表於2014-11-29
原文網址 : http://www.codeceo.com/article/android-ui-tab-layout.html
AndroidUI控制元件

為了建立一個選項卡的UI，你需要使用一個TabHost和一個TabWidget，TabHost必須是佈局檔案的根節點，它包含了為了顯示選項卡的TabWidget和一個用於顯示選項內容的FrameLayout

你可以用一或兩種方法實現你的選項卡內容：在用一個Activity中用選項卡來在檢視之間切換，或者用用選項卡來改變所有的分離的Activity。你根據你的需求來使用你想在程式中的方法，但是如果每個選項卡提供一個獨特的使用者Activity，那麼為每個選項卡實現獨立的Activity是有意義的，所有你最好在你的離散群裡管理應用程式，要好過使用大量的應用程式和佈局檔案。

在這個例子中，你可以建立一個為每個單獨的Activity建立選項卡來建立一個選項卡UI

1、開始一個新的工程，叫做HelloTabWidget

2、第一，建立三個獨立的Activity程式在你的工程中：ArtistsActivity,AlbumsActivity,和SongsActivity，他們每個代表一個單獨的選項卡，現在用TextView來沒每個程式顯示一個簡單的資訊，比如：

package org.hualang.tabwidget;

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);
        }
}
package org.hualang.tabwidget;

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);
        }

}
package org.hualang.tabwidget;

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

public class ArtistsActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
                 TextView textview = new TextView(this);
                 textview.setText("This is the Artists tab"); 
        setContentView(textview);
    }
}

注意這個例子中不需要佈局檔案，只需要建立一個TextView，並且為文字賦值即可。重複建立三個類似的Activity，並且要在AndroidManifest.xml檔案中註冊，否則報錯

3、你需要為每個選項卡設定一個icon，每個icon，你可以有兩個版本，一個是當選項卡被選中的時候，另一個是當選項卡未被選中的時候。一般設計來說，建議當被選中的時候用灰色，的那個未被選中的時候用白色，比如


你可以拷貝這兩張圖片來做實驗用

現在建立一個狀態圖片列表來制定每個選項卡不同狀態的時候所指定的圖片
①把圖排尿儲存在res/drawable/目錄下
②在res/drawable/目錄下建立一個名為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>

上面這個檔案，當選項卡的狀態改變的時候，選項卡就會自動的在兩種已經定義的圖片之間切換

4、開啟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>

這個佈局檔案將顯示選項卡兵器提供每個Activity之間的導航

TabHost要求一個TabWidget和一個FrameLayout佈局，為了使TabWidget和FrameLayout的位置處於垂直方向，需要一個LinearLayout,FrameLayout是每個選項卡內容的地方，之所以那裡的內容是空的是因為在TahHost中將自動為每個Activity嵌入

注意，TabWidget和FrameLayout元素的ID標籤和tabcontent元素，這些名稱必須使用，因為TahHost檢索他們的引用，它恰好期望的是這些名字

6、編寫HelloTabWidget。繼承TabWidget

package org.hualang.tabwidget;

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  {
        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_drawable))
                          .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_drawable))
                          .setContent(intent);
            tabHost.addTab(spec);

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

            tabHost.setCurrentTab(2);
        }

}

執行結果：

相關文章