qq主界面实现(三)-fragment与FragmentTabHost使用

fragment与TabHost配合使用比较麻烦，使用FragmentTabHost要方便的多。

使用步骤：

     1.定义出布局文件

     2. 定义出各个fragment的布局文件

     3. 初始化Fragment

     4. 实现Activity

代码：

    1. 主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="60dp" 
        android:background="@drawable/tab_bg">
        <FrameLayout  
            android:id="@android:id/tabcontent"  
            android:layout_width="0dp"  
            android:layout_height="0dp"  
            android:layout_weight="0" /> 
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

2.fragment的布局文件，这里只给出一个

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android=" http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
  
    <LinearLayout  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true"  
        android:orientation="vertical" >  
  
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_horizontal"  
            android:src="@drawable/message_selected" />  
  
        <TextView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_horizontal"  
            android:padding="10dp"  
            android:text="这是消息界面"  
            android:textSize="20sp" />  
    </LinearLayout>  
</RelativeLayout>  

3. 这里的图片要用到selector, 这里给出一个

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=" http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/message_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/message_unselected"/>
</selector>

4. Fragment, 这里给出一个

package wei.jiang.fragmentdemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MessageFragment extends Fragment {

 

 public View onCreateView(LayoutInflater inflater, ViewGroup container,

   Bundle savedInstanceState) {

  View messageLayout = inflater.inflate(R.layout.fragment_message,

    container, false);

  return messageLayout;

 }

}

5. Activity, 很明显要简化了很多

package wei.jiang.fragmentdemo;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTabHost;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.TabHost.TabSpec;

import android.widget.TextView;

public class FragmentTabHostActivity extends FragmentActivity {

 private FragmentTabHost tabHost;

 private Class fragmentArray[] = { MessageFragment.class,

   ContactFragment.class, NewsFragment.class, SettingFragment.class };

 // Tab选项卡的文字

 private String mTextviewArray[] = { "消息", "好友", "动态", "设置" };

 // 定义数组来存放按钮图片

 private int mImageViewArray[] = { R.drawable.selector_tab_message,

   R.drawable.selector_tab_contact, R.drawable.selector_tab_news,

   R.drawable.selector_tab_setting };

 @Override

 protected void onCreate(Bundle bundle) {

  super.onCreate(bundle);

  setContentView(R.layout.activity_fragmenttabhost);

  initViews();

 }

 /**

  * 初始化组件

  */

 private void initViews() {

  tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

  tabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

  for (int i = 0; i < fragmentArray.length; i++) {

   TabSpec tabSpec = tabHost.newTabSpec(mTextviewArray[i]);

   tabSpec.setIndicator(getTabIndicator(i));

   // 添加tab项时设置对应的fragment

   tabHost.addTab(tabSpec, fragmentArray[i], null);

  }

 }

 /**

  * 设置选项卡

  *

  * @param i

  * @return

  */

 private View getTabIndicator(int i) {

  View tab = (RelativeLayout) LayoutInflater.from(this).inflate(

    R.layout.tab_indicator, null);

  ImageView tabImage = (ImageView) tab.findViewById(R.id.tab_image);

  TextView tabText = (TextView) tab.findViewById(R.id.tab_text);

  tabImage.setImageResource(mImageViewArray[i]);

  tabText.setText(mTextviewArray[i]);

  return tab;

 }

}