qq主界面实现(二)-tabHost与fragment配合使用

由于TabActivity已经废弃，使用fragment代替也可以实现界面的切换效果。这种方式比单纯用fragment更加灵活，但也更加复杂。

步骤：

    1. 定义主布局文件 activity_tabhost，使用TabHost

    2. 定义tab选项卡的布局文件tab_indecator，在代码中设置不同的tab。

    3. 定义tab项的fragment布局文件，

    4.  TabActivity中初始化布局文件中的相关组件，用同一个tab_indecator文件定义出不同的选项卡组件 TabSpec

    5. 初始化不同的选项fragement界面 

    6. 设置底部每个按钮点击后跳转的界面，为tab选项卡设置点击事件

     7. 在点击事件中实现界面的切换 

附件中给出了代码

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="9"
            android:orientation="vertical" >

            <FrameLayout
                android:id="@+id/realtabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0.0dip" />
        </LinearLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >
        </TabWidget>
    </LinearLayout>
</TabHost>

2.

<RelativeLayout xmlns:android=" http://schemas.android.com/apk/res/android"
    android:id="@+id/message_layout"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tab_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/message_unselected" />

        <TextView
            android:id="@+id/tab_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="消息"
            android:textColor="#82858b" />
    </LinearLayout>

</RelativeLayout>

3.

<?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/contacts_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>  

   

4.

@Override

 protected void onCreate(Bundle bundle) {

  super.onCreate(bundle);

  setContentView(R.layout.activity_tabhost);

 initViews();

  fragmentManager = getSupportFragmentManager();

  // 初始化tab项

  initTabs();

 

 

  setTabSelection(0);

 }

 /**

  * 设置tab项

  */

 private void initTabs() {

  tabHost.setup();

  tabHost.clearAllTabs();

  TabHost.TabSpec tSpecMessage = tabHost.newTabSpec(TAB_MESSAGE);

  tSpecMessage.setIndicator(messageTab);

  tSpecMessage.setContent(new DummyTabContent(getBaseContext())); //这里的content实际了使用的是一个空试图，真正的界面切换使用不同fragment的来实现

  tabHost.addTab(tSpecMessage);

 

  TabHost.TabSpec tSpecContact= tabHost.newTabSpec(TAB_CONTACT);

  tSpecContact.setIndicator(contactsTab);

  tSpecContact.setContent(new DummyTabContent(getBaseContext()));

  tabHost.addTab(tSpecContact);

 

  TabHost.TabSpec tSpecNews = tabHost.newTabSpec(TAB_NEWS);

  tSpecNews.setIndicator(newsTab);

  tSpecNews.setContent(new DummyTabContent(getBaseContext()));

  tabHost.addTab(tSpecNews);

 

  TabHost.TabSpec tSpecSetting = tabHost.newTabSpec(TAB_SETTING);

  tSpecSetting.setIndicator(settingTab);

  tSpecSetting.setContent(new DummyTabContent(getBaseContext()));

  tabHost.addTab(tSpecSetting);

 }

 /**

  * 设置底部每个按钮点击后跳转的界面.

  */

 private void initViews() {

  tabHost = (TabHost) findViewById(R.id.tabHost);

  tabs = (TabWidget) findViewById(android.R.id.tabs);

  // 消息

  messageTab = (RelativeLayout) LayoutInflater.from(this).inflate(

    R.layout.tab_indicator, tabs, false);

  messageImage = (ImageView) messageTab.findViewById(R.id.tab_image);

  messageText = (TextView) messageTab.findViewById(R.id.tab_text);

  messageImage.setBackgroundResource(R.drawable.message_unselected);

  messageText.setText("消息");

  // 联系人

  contactsTab = (RelativeLayout) LayoutInflater.from(this).inflate(

    R.layout.tab_indicator, tabs, false);

  contactsImage = (ImageView) contactsTab.findViewById(R.id.tab_image);

  contactsText = (TextView) contactsTab.findViewById(R.id.tab_text);

  contactsImage.setBackgroundResource(R.drawable.message_unselected);

  contactsText.setText("消息");

  // 动态

  newsTab = (RelativeLayout) LayoutInflater.from(this).inflate(

    R.layout.tab_indicator, tabs, false);

  newsImage = (ImageView) newsTab.findViewById(R.id.tab_image);

  newsText = (TextView) newsTab.findViewById(R.id.tab_text);

  newsImage.setBackgroundResource(R.drawable.message_unselected);

  newsText.setText("消息");

  // 设置

  settingTab = (RelativeLayout) LayoutInflater.from(this).inflate(

    R.layout.tab_indicator, tabs, false);

  settingImage = (ImageView) settingTab.findViewById(R.id.tab_image);

  settingText = (TextView) settingTab.findViewById(R.id.tab_text);

  settingImage.setBackgroundResource(R.drawable.message_unselected);

  settingText.setText("消息");

 

  tabHost.setOnTabChangedListener(this);

 }

 

 private void setTabSelection(int i) {

 // clearSelection();

  // 开启一个Fragment事务

  FragmentTransaction transaction = fragmentManager.beginTransaction();

    // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况  

        hideFragments(transaction);  

       

  switch (i) {

  case 0: // 当点击了消息tab时，改变控件的图片和文字颜色

   messageImage.setImageResource(R.drawable.message_selected);

   messageText.setTextColor(Color.WHITE);

   if (messageFragment == null) {

    // 如果MessageFragment为空，则创建一个并添加到界面上

    messageFragment = new MessageFragment();

    transaction.add(R.id.realtabcontent, messageFragment);

   } else {

    transaction.show(messageFragment);

   }

   break;

  case 1:

   // 当点击了联系人tab时，改变控件的图片和文字颜色

   contactsImage.setImageResource(R.drawable.contacts_selected);

   contactsText.setTextColor(Color.WHITE);

   if (contactsFragment == null) {

    // 如果ContactsFragment为空，则创建一个并添加到界面上

    contactsFragment = new ContactFragment();

    transaction.add(R.id.realtabcontent, contactsFragment);

   } else {

    // 如果ContactsFragment不为空，则直接将它显示出来

    transaction.show(contactsFragment);

   }

   break;

  case 2:

   // 当点击了动态tab时，改变控件的图片和文字颜色

   newsImage.setImageResource(R.drawable.news_selected);

   newsText.setTextColor(Color.WHITE);

   if (newsFragment == null) {

    // 如果NewsFragment为空，则创建一个并添加到界面上

    newsFragment = new NewsFragment();

    transaction.add(R.id.realtabcontent, newsFragment);

   } else {

    // 如果NewsFragment不为空，则直接将它显示出来

    transaction.show(newsFragment);

   }

   break;

  case 3:

   // 当点击了设置tab时，改变控件的图片和文字颜色

   settingImage.setImageResource(R.drawable.setting_selected);

   settingText.setTextColor(Color.WHITE);

   if (settingFragment == null) {

    // 如果SettingFragment为空，则创建一个并添加到界面上

    settingFragment = new SettingFragment();

    transaction.add(R.id.realtabcontent, settingFragment);

   } else {

    // 如果SettingFragment不为空，则直接将它显示出来

    transaction.show(settingFragment);

   }

   break;

  }

  transaction.commit();

 }