使用FragmentActivity做成类新闻APP样式

使用FragmentActivity做成下面4个tab，每一个tab上面对应4个不同的fragment，这样做法可塑性比较高，比之前用的tabhost用的要好很多，下面先上效果图：

以上是效果图，下面4个tab可以点击，分别对应4个不同的fragment

接下来就是写代码了，直接上代码，代码里面有详细的注释

1，首先我们要写布局文件，下面4个tab的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/floralwhite"
    android:orientation="vertical" >

     <FrameLayout
        android:id="@+id/fragment_home"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/linearLayout1" >
    FrameLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"
        android:orientation="vertical" >



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" 
            android:background="#ffffff">

            <LinearLayout
                android:id="@+id/lin_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical|center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="3dp"
                    android:src="@drawable/home_hover2x" />

                <TextView
                    android:id="@+id/text_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="首页"
                    android:textSize="14sp"
                    android:textColor="#276fdc" />
            LinearLayout>

            <LinearLayout
                 android:id="@+id/lin_huodong"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical|center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/huodong"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="3dp"
                    android:src="@drawable/activity2x" />

                <TextView
                    android:id="@+id/text_huodong"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="活动"
                    android:textSize="14sp" />
            LinearLayout>

            <LinearLayout
                android:id="@+id/lin_qiye"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical|center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/qiye"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="3dp"
                    android:src="@drawable/cblog2x" />

                <TextView
                    android:id="@+id/text_qiye"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="企业通"
                    android:textSize="14sp" />
            LinearLayout>

            <LinearLayout
                android:id="@+id/lin_shanghe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical|center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/shanghe"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="3dp"
                    android:src="@drawable/chambe2x" />

                <TextView
                    android:id="@+id/text_shanghe"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="商会通"
                    android:textSize="14sp" />
            LinearLayout>


        LinearLayout>
    LinearLayout>


RelativeLayout>

接下来我们要写一个类继承FragmentActivity，实现我们想要的效果，废话不多说，直接上代码

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MyMainActivity extends FragmentActivity  implements OnClickListener{

   private Context mContext;
   private FragmentManager fragmentManager;
   private ImageView home;
   private TextView text_home;
   private ImageView huodong;
   private TextView text_huodong;
   private ImageView qiye;
   private TextView text_qiye;
   private ImageView shanghe;
   private TextView text_shanghe;
   private HomeFragment homeFragment;
   private ActivityFragment activityFragment;
   private EnterpriseFragment enterpriseFragment;
   private BusinessFragment businessFragment;

@Override
   protected void onCreate(Bundle arg0) {
    // TODO Auto-generated method stub
    super.onCreate(arg0);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.main_home);
    mContext = this;
    fragmentManager = getSupportFragmentManager();
    //初始化一堆findViewById
    init();
    //初始化默认在第一个fragment位置
    SetSectionTab(0);


   }

    private void init() {
        LinearLayout lin_home = (LinearLayout) findViewById(R.id.lin_home);
        home = (ImageView) findViewById(R.id.home);
        text_home = (TextView) findViewById(R.id.text_home);
        LinearLayout lin_huodong = (LinearLayout) findViewById(R.id.lin_huodong);
        huodong = (ImageView) findViewById(R.id.huodong);
        text_huodong = (TextView) findViewById(R.id.text_huodong);
        LinearLayout lin_qiye = (LinearLayout) findViewById(R.id.lin_qiye);
        qiye = (ImageView) findViewById(R.id.qiye);
        text_qiye = (TextView) findViewById(R.id.text_qiye);
        LinearLayout lin_shanghe = (LinearLayout) findViewById(R.id.lin_shanghe);
        shanghe = (ImageView) findViewById(R.id.shanghe);
        text_shanghe = (TextView) findViewById(R.id.text_shanghe);
        lin_home.setOnClickListener(this);
        lin_huodong.setOnClickListener(this);
        lin_qiye.setOnClickListener(this);
        lin_shanghe.setOnClickListener(this);

    }
    //把底部的图片和文字颜色全部变成灰色，初始状态
    private void SetClearColoc() {
        home.setImageResource(R.drawable.home2x);
        huodong.setImageResource(R.drawable.activity2x);
        qiye.setImageResource(R.drawable.cblog2x);
        shanghe.setImageResource(R.drawable.chambe2x);
        text_home.setTextColor(getResources().getColor(R.color.dihui));
        text_huodong.setTextColor(getResources().getColor(R.color.dihui));
        text_qiye.setTextColor(getResources().getColor(R.color.dihui));
        text_shanghe.setTextColor(getResources().getColor(R.color.dihui));

    }
    //当点击下面区域的时候要发生的变化，index为bottom的第几个tab
    private void SetSectionTab(int index) {
        //我的思路是首先先把底部的图片和文字颜色全部变成灰色，初始状态
        SetClearColoc();
        //然后通过fragmentManager得到FragmentTransaction
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        //然后把每一个tab对应的fragment也全部都影藏掉，变成最初始的样子
        Settransaction(transaction);
        //最后通过外部传进来的index来判断点击底部tab为哪一个
        switch (index) {
        case 0:
            //当index=0的时候就是要显示首页，首先要把第一个底部tab的图片切换
            home.setImageResource(R.drawable.home_hover2x);
            //把底部第一个tab的文字颜色变成亮色
            text_home.setTextColor(getResources().getColor(R.color.blue));
            //接下来去显示第一个fragment
            if (homeFragment == null) {
                homeFragment = new HomeFragment();
                transaction.add(R.id.fragment_home, homeFragment);
                transaction.commit();
            } else {
                transaction.show(homeFragment);
                transaction.commit();
            }

            break;
        case 1:
            huodong.setImageResource(R.drawable.activity_hover2x);
            text_huodong.setTextColor(getResources().getColor(R.color.blue));
            if (activityFragment == null) {
                activityFragment = new ActivityFragment();
                transaction.add(R.id.fragment_home, activityFragment);
                transaction.commit();
            } else {
                transaction.show(activityFragment);
                transaction.commit();
            }

            break;
        case 2:
            qiye.setImageResource(R.drawable.cblog_hover2x);
            text_qiye.setTextColor(getResources().getColor(R.color.blue));
            if (enterpriseFragment == null) {
                enterpriseFragment = new EnterpriseFragment();
                transaction.add(R.id.fragment_home, enterpriseFragment);
                transaction.commit();
            } else {
                transaction.show(enterpriseFragment);
                transaction.commit();
            }

            break;
        case 3:
            shanghe.setImageResource(R.drawable.chambe_hover2x);
            text_shanghe.setTextColor(getResources().getColor(R.color.blue));
            if (businessFragment == null) {
                businessFragment = new BusinessFragment();
                transaction.add(R.id.fragment_home, businessFragment);
                transaction.commit();
            } else {
                transaction.show(businessFragment);
                transaction.commit();
            }

            break;
        default:
            break;
        }
    }
    //通过FragmentTransaction去隐藏掉所有的fragment，变成初始的样子
    private void Settransaction(FragmentTransaction transaction) {
        if (homeFragment != null) {
            transaction.hide(homeFragment);
        }
        if (activityFragment != null) {
            transaction.hide(activityFragment);
        }
        if (enterpriseFragment != null) {
            transaction.hide(enterpriseFragment);
        }
        if (businessFragment != null) {
            transaction.hide(businessFragment);
        }

    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.lin_home:
             SetSectionTab(0);
            break;
        case R.id.lin_huodong:
            SetSectionTab(1);
            break;
        case R.id.lin_qiye:
            SetSectionTab(2);
            break;
        case R.id.lin_shanghe:
            SetSectionTab(3);
            break;

        default:
            break;
        }
    }
}

以上是所有的代码，接下来每一个fragment里面就可以做我们想要做的事情了

注意：这里有一些地方是需要注意的（对于新手来说），由于FragmentActivity是android-v4包里面的类，所以首先我们再ecplise里面新建项目的时候要先检查libs文件夹下是否有android-support-v4.jar这个文件，然后将这个文件add build path，这样以后编译时没有问题的，但是运行的时候会报错，系统提示找不到MyMainActivity这个类，那是因为在项目的属性里面的java build path里面没有把android-support-v4.jar前面的勾勾上，勾上以后就可以运行啦！