Fragment与自定义布局实现类似tab的效果

android4.0提供了fragment这个好东东，我们通过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" >

   <!--定义一个头布局-->
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="40.0dip"
        android:background="#FFFFFF" >


        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text=" @我"
            android:textColor="#000000"
            android:textSize="20.0dip" />


        <TextView
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="评论"
            android:textColor="#000000"
            android:textSize="20.0dip" />


        <TextView
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="私信"
            android:textColor="#000000"
            android:textSize="20.0dip" />
    </LinearLayout>

   <!--底部的指示器->
    <ImageView
        android:id="@+id/cursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/aaa" />
    

<!-存放fragment的容器->
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/content"
        android:orientation="vertical"
        >
        
    </LinearLayout>

</LinearLayout>

2：定义三个fragment的布局【其它的相同】

<?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:background="#ffff00"
    android:orientation="vertical" 
    android:id="@+id/ff1">
       
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="这是fragmet1的内容"
        />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fragment1"
        android:text="fragment1"
        />
</LinearLayout>

3：根据不同的fragment布局，实现对于的fragment类【其它的相同】

public class Fragment1 extends Fragment {


private static final String TAG = "Activity";


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragmet1, container, false);
}


@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}


4：mainActivity的实现

public class MainActivity extends Activity {

ImageView imageView;   //指示器
int bitWidth;                       //图片宽度
int offset = 0;                    //偏移量
int tabIndex = 0;               //全局index,用以标示当前的index
TextView textView1, textView2, textView3;


Fragment1 fragment1;
Fragment2 fragment2;
Fragment3 fragment3;
FragmentManager fragmentManager;
FragmentTransaction fragmentTransaction;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
InitImageView();
InitTextView();
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();

              //开启事物，添加第一个fragment
fragmentManager = getFragmentManager();
fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.content, fragment1);
fragmentTransaction.commit();


fragmentManager
.removeOnBackStackChangedListener(new OnBackStackChangedListener() {


@Override
public void onBackStackChanged() {
// TODO Auto-generated method stub


}
});
}



      //初始化指示器，获取平均偏移量
private void InitImageView() {
imageView = (ImageView) findViewById(R.id.cursor);
bitWidth = BitmapFactory.decodeResource(getResources(), R.drawable.aaa)
.getWidth();
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int screenW = displayMetrics.widthPixels;

              //平均偏移量
offset = (screenW / 3 - bitWidth) / 2;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
imageView.setImageMatrix(matrix);
}

       //初始化
private void InitTextView() {
textView1 = (TextView) findViewById(R.id.text1);
textView2 = (TextView) findViewById(R.id.text2);
textView3 = (TextView) findViewById(R.id.text3);
textView1.setOnClickListener(new MyOnClickListener(0));
textView2.setOnClickListener(new MyOnClickListener(1));
textView3.setOnClickListener(new MyOnClickListener(2));
}


class MyOnClickListener implements OnClickListener {

               
int index;  //保存点击时传入的index

public MyOnClickListener(int index) {
this.index = index;
}


@Override
public void onClick(View v) {
// TODO Auto-generated method stub


fragmentTransaction = fragmentManager.beginTransaction();
switch (v.getId()) {
case R.id.text1:

fragmentTransaction.replace(R.id.content, fragment1);
break;
case R.id.text2:
fragmentTransaction.replace(R.id.content, fragment2);
break;
case R.id.text3:
fragmentTransaction.replace(R.id.content, fragment3);
break;
default:
break;
}

                       
if(index != tabIndex){
fragmentTransaction.commit();
}

Animation animation = new TranslateAnimation(offset* tabIndex, offset
* index, 0, 0);
tabIndex = index;   //保存当前index
animation.setFillAfter(true);
animation.setDuration(300);
imageView.startAnimation(animation);



}


}


}

好了。。。这就是一个简单的fragment实现tab的效果。。大家多多交流

最后上源码tab源码