Fragmen的基本使用，并实现Fragment的切换

1 布局文件

a 新建三个布局文件，分别放置一个TextView，用来模拟内容。

b 主布局，一个标题栏，一个线性布局承载Fragment内容，底部三个点击的Tab按钮，xml如下：（activity_main.xml）

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <RelativeLayout
        android:id="@+id/rl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <RelativeLayout
            android:id="@+id/top_tab"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:background="@color/topbar_bg" >
            <ImageView
                android:id="@+id/iv_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:focusable="false"
                android:src="@drawable/zhidao_logo"
                android:contentDescription="@null" />
        </RelativeLayout>
        <LinearLayout
            android:id="@+id/ll_bottom_tab"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:layout_alignParentBottom="true"
            android:gravity="center_vertical"
            android:orientation="horizontal" 
            android:baselineAligned="true">
            <RelativeLayout
                android:id="@+id/rl_know"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >
                <ImageView
                    android:id="@+id/iv_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/btn_know_nor" 
                    android:contentDescription="@null"/>
                <TextView
                    android:id="@+id/tv_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv_know"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_know"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_want_know"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >
                <ImageView
                    android:id="@+id/iv_i_want_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/btn_wantknow_nor"
                    android:contentDescription="@null" />
                <TextView
                    android:id="@+id/tv_i_want_know"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_i_want_know"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_wantknow"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_me"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0" >
                <ImageView
                    android:id="@+id/iv_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/btn_my_nor"
                    android:contentDescription="@null" />
                <TextView
                    android:id="@+id/tv_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_me"
                    android:layout_centerHorizontal="true"
                    android:text="@string/bottom_tab_my"
                    android:textColor="@color/bottomtab_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/line"
            android:layout_below="@+id/top_tab"
            android:orientation="vertical" >
        </LinearLayout>
        <View
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@id/ll_bottom_tab"
            android:background="@color/line" />
    </RelativeLayout>
</FrameLayout>

2  实现三个类继承Fragment，在每个类里加载fragment的布局。例如：IWantKnowFragment类

package com.cz.myfragment;
import com.example.testfragment.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class IWantKnowFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.from(getActivity()).inflate(R.layout.main_tab2_fragment, container,false);
}
}

3 实现MainActivity类。

完成几个方法就ok了。

a initUI()：

private void initUI() {
// TODO Auto-generated method stub
knowLayout = (RelativeLayout) findViewById(R.id.rl_know);
iWantKnowLayout = (RelativeLayout) findViewById(R.id.rl_want_know);
meLayout = (RelativeLayout) findViewById(R.id.rl_me);
knowImg = (ImageView) findViewById(R.id.iv_know);
iWantKnowImg = (ImageView) findViewById(R.id.iv_i_want_know);
meImg = (ImageView) findViewById(R.id.iv_me);
knowTv = (TextView) findViewById(R.id.tv_know);
iWantKnowTv = (TextView) findViewById(R.id.tv_i_want_know);
meTv = (TextView) findViewById(R.id.tv_me);
knowLayout.setOnClickListener(this);
iWantKnowLayout.setOnClickListener(this);
meLayout.setOnClickListener(this);
}

b initTab():

/**
* 初始化默认选择的Fragment
*/
@SuppressLint("NewApi")
private void initTab() {
// TODO Auto-generated method stub
if (knowFragment == null) {
knowFragment = new ZhidaoFragment();
}
// 显示当前内容区域的Fragment
if (!knowFragment.isAdded()) {
// getSupportFragmentManager().beginTransaction().add(R.id.content_layout,
// knowFragment).commit();
// getSupportFragmentManager().beginTransaction().add(knowFragment,
// null).commit();
getSupportFragmentManager().beginTransaction()
.add(R.id.content_layout, knowFragment).commit();
}
currentFragment = knowFragment;
// 调整tab的颜色深浅
knowImg.setBackground(getResources().getDrawable(
R.drawable.btn_know_pre));
knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));
iWantKnowImg.setBackground(getResources().getDrawable(
R.drawable.btn_wantknow_nor));
iWantKnowTv.setTextColor(getResources().getColor(
R.color.bottomtab_normal));
meImg.setBackground(getResources().getDrawable(R.drawable.btn_my_nor));
meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
}

c  changeFragemnt

/**
 * 切换Fragment的方法，主要目的是代码复用
 * @param beginTransaction
 * @param frg
 */
public void changeFragemnt(FragmentTransaction beginTransaction,
Fragment frg) {
// getSupportFragmentManager().beginTransaction().add(R.layout., arg1)
if (frg == currentFragment) {
return;
}
if (!frg.isAdded()) {
beginTransaction.hide(currentFragment)
.add(R.id.content_layout, frg).commit();
} else {
beginTransaction.hide(currentFragment).show(frg).commit();
}
currentFragment = frg;
}

d 实现OnClickListener接口，并实现toKnow();toWantKnow();toMe();方法，具体请看源码

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
int id = v.getId();
switch (id) {
case R.id.rl_know:
toKnow();
break;
case R.id.rl_want_know:
toWantKnow();
break;
case R.id.rl_me:
toMe();
break;
default:
break;
}

4 其他相关内容，请见具体代码

源码下载链接http://download.csdn.net/detail/chenzhao2013/9454486