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

android4.0提供了fragment这个好东东，我们通过fragment可以实现类似tabhost的效果，自己做了一个小小的案例，带了滑动的动画效果。。。先上图

好了直接上代码

1：主布局文件

<!-存放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源码

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

相关推荐