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

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

}