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源码