qq主界面实现(一)-使用fragment实现tabHost的效果

使用fragment可以轻松的实现tabHost的切换的效果

1. 定义出布局文件

<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/content"  
        android:layout_width="match_parent"  
        android:layout_height="0dp"  
        android:layout_weight="1" >  
    </FrameLayout>  
  
    <LinearLayout  
        android:layout_width="match_parent"  
        android:layout_height="60dp"  
        android:background="@drawable/tab_bg" >  
  
        <RelativeLayout  
            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/message_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/message_text"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:text="消息"  
                    android:textColor="#82858b" />  
            </LinearLayout>  
        </RelativeLayout>  
  
        <RelativeLayout  
            android:id="@+id/contacts_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/contacts_image"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:src="@drawable/contacts_unselected" />  
  
                <TextView  
                    android:id="@+id/contacts_text"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:text="联系人"  
                    android:textColor="#82858b" />  
            </LinearLayout>  
        </RelativeLayout>  
  
        <RelativeLayout  
            android:id="@+id/news_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/news_image"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:src="@drawable/news_unselected" />  
  
                <TextView  
                    android:id="@+id/news_text"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:text="动态"  
                    android:textColor="#82858b" />  
            </LinearLayout>  
        </RelativeLayout>  
  
        <RelativeLayout  
            android:id="@+id/setting_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/setting_image"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:src="@drawable/setting_unselected" />  
  
                <TextView  
                    android:id="@+id/setting_text"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="center_horizontal"  
                    android:text="设置"  
                    android:textColor="#82858b" />  
            </LinearLayout>  
        </RelativeLayout>  
    </LinearLayout>  
</LinearLayout> 

2. Activity类

    a. 初始化view组件，并为tab项设置点击事件

    b. 点击时去切换不同的fragment

     private void initViews() {

  messageLayout = findViewById(R.id.message_layout);

  contactsLayout = findViewById(R.id.contacts_layout);

  newsLayout = findViewById(R.id.news_layout);

  settingLayout = findViewById(R.id.setting_layout);

  messageImage = (ImageView) findViewById(R.id.message_image);

  contactsImage = (ImageView) findViewById(R.id.contacts_image);

  newsImage = (ImageView) findViewById(R.id.news_image);

  settingImage = (ImageView) findViewById(R.id.setting_image);

  messageText = (TextView) findViewById(R.id.message_text);

  contactsText = (TextView) findViewById(R.id.contacts_text);

  newsText = (TextView) findViewById(R.id.news_text);

  settingText = (TextView) findViewById(R.id.setting_text);

  messageLayout.setOnClickListener(this);

  contactsLayout.setOnClickListener(this);

  newsLayout.setOnClickListener(this);

  settingLayout.setOnClickListener(this);

 }

 @Override

 public void onClick(View v) {

  switch (v.getId()) {

  case R.id.message_layout:

   // 当点击了消息tab时，选中第1个tab

   setTabSelection(0);

   break;

  case R.id.contacts_layout:

   // 当点击了联系人tab时，选中第2个tab

   setTabSelection(1);

   break;

  case R.id.news_layout:

   // 当点击了动态tab时，选中第3个tab

   setTabSelection(2);

   break;

  case R.id.setting_layout:

   // 当点击了设置tab时，选中第4个tab

   setTabSelection(3);

   break;

  default:

   break;

  }

 }

 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.content, 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.content, 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.content, 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.content, settingFragment);

   } else {

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

    transaction.show(settingFragment);

   }

   break;

  }

  transaction.commit();

 }

 private void hideFragments(FragmentTransaction transaction) {

  if (messageFragment != null) {  

            transaction.hide(messageFragment);  

        }  

        if (contactsFragment != null) {  

            transaction.hide(contactsFragment);  

        }  

        if (newsFragment != null) {  

            transaction.hide(newsFragment);  

        }  

        if (settingFragment != null) {  

            transaction.hide(settingFragment);  

        }  

 }

 private void clearSelection() {

  messageImage.setImageResource(R.drawable.message_unselected);

  messageText.setTextColor(Color.parseColor("#82858b"));

  contactsImage.setImageResource(R.drawable.contacts_unselected);

  contactsText.setTextColor(Color.parseColor("#82858b"));

  newsImage.setImageResource(R.drawable.news_unselected);

  newsText.setTextColor(Color.parseColor("#82858b"));

  settingImage.setImageResource(R.drawable.setting_unselected);

  settingText.setTextColor(Color.parseColor("#82858b"));

 }