Android修行筆記（一）：用Tabhost以及Fragment實現標簽式主界面框架

      吐槽開始學習Android，第一個掉入的坑就是標簽式界面。好像Android一開始的版本就不是很好支持這個東西。

后來才出了Fragment這個新的UI來將一個頁面作為一個UI控件來使用的功能。覺得Android開發比iPhone開發麻煩，雖然我

沒搞過iPhone。。。。

       摘要  本文將介紹如何使用Tabhost以及Fragment控件來實現一個基本的標簽界面，接着會介紹如果實現返回等操作界面

堆棧的功能。

      前戲 准備環境配置等工作--  要注意的是，在Android3.0以上才加入了Fragment控件，為了兼容低版本的系統，我們需要用Android

sdk manager 下載並引用Android的支持庫文件support library，移步官網這里有詳細安裝介紹。

      正文  

      以下是主界面 main_tabhost_activity.xml文件，其中tab1、tab2、tab3是我們要進行切換的界面，TabWidget是標簽的內容，隨后我們通過

代碼添加標簽按鈕。

<?xml version="1.0" encoding="utf-8"?>
<TabHost android:id="@+id/tabhost"   
  android:layout_width="fill_parent"   
  android:layout_height="fill_parent"   
  xmlns:android="http://schemas.android.com/apk/res/android">  
    <LinearLayout android:layout_width="fill_parent"   
      android:id="@+id/linearLayout1"   
      android:layout_height="fill_parent"   
      android:orientation="vertical">
        <FrameLayout 
             android:layout_weight="1"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content" 
             android:id="@android:id/tabcontent">  
            <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab1"></FrameLayout>  
            <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2"></FrameLayout>  
            <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab3"></FrameLayout>  
        </FrameLayout>
        <TabWidget android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="0"
          android:tag="tabs"
          android:id="@android:id/tabs"></TabWidget> 
    </LinearLayout>
</TabHost>

 對應的Activity類要繼承 FragmentActivity，並執行 OnTabChangeListener 接口

public class MainTabHost extends FragmentActivity implements OnTabChangeListener{
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mail_tabhost_activity);
        setupTabs();
    }
    ...
}

 

接着我們開始初始化TabHost控件，並在底部加入三個自定義的標簽按鈕

// 初始化標簽按鈕
    private void setupTabs() {
        mTabHost = (TabHost) this.findViewById(R.id.tabhost);
        mTabHost.setup();
        // 生成底部自定義樣式的按鈕
        String[] title = new String[] { "主頁", "幫助", "Kecp" };
        int[] tabIds = new int[] { R.id.tab1, R.id.tab2, R.id.tab3 };
        for (int i = 0; i < title.length; i++) {
            Button button = new Button(this);
            button.setText(title[i]);
            button.setBackgroundDrawable(this.getResources().getDrawable(
                    R.drawable.tab_lable));  //自定義按鈕樣式
            mTabHost.addTab(mTabHost.newTabSpec(title[i]).setIndicator(button)
                    .setContent(tabIds[i]));
        }

        mTabHost.setOnTabChangedListener(this);
    }

其中按鈕的背景圖代碼如下，在drawable文件夾下新建一個tab_lable.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <color android:color="#ffff0000"/>
    </item>
    <item android:state_selected="false">
        <color android:color="#ff00ff00"/>
    </item>
    <item>
        <color android:color="#ff00ff00"/>
    </item>
    
</selector>

這時候運行就可以看到以下效果圖：

　　但現在還沒有切換功能哦，因為我們執行了setOnTabChangedListener代碼，每點擊底部的按鈕都會觸發onTabChanged函數，

所以我們可以在onTabChanged函數中實現點擊切換界面的功能。又貼代碼：

@Override
    public void onTabChanged(String tag) {
        Fragment frag = null;
        int contentViewID = 0;
        if (tag.equals("主頁")) {
            frag = new FirstPageFragment(); //自定義繼承Fragment的UI，放了一個簡單的顯示文本標題的控件。
            contentViewID = R.id.tab1;
        } else if (tag.equals("幫助")) {
            frag = new HelpFragment();
            contentViewID = R.id.tab2;
        }
        if (frag == null)
            return;

        FragmentManager manager = this.getSupportFragmentManager();

        if (manager.findFragmentByTag(tag) == null) {
            FragmentTransaction trans = manager.beginTransaction();
            trans.replace(contentViewID, frag, tag);
            trans.commit();
        }

    }

　　

      這樣點擊下邊按鈕時候便可以切換了，而且對應標簽頁的按鈕也會顯示未紅色。其中FirstPageFragment只是一個簡單的類，繼承了Fragment。

實際開發中這個界面就作為我們某一個功能的主界面來使用了。相當於一個Activity。雖然實現很簡單，但還是把代碼都貼出來方便各位吧~~

public class FirstPageFragment extends Fragment implements OnClickListener{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                    Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.first_page_fragment, null);
        Button btn = (Button)view.findViewById(R.id.button1);
        btn.setOnClickListener(this);
        return view;
    }
}

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:text="首頁" >

    </TextView>

</LinearLayout>

　　下次為大家分享TabHost的界面堆棧問題。