使用Fragment实现Tab效果

在上一篇中，我们将了使用ViewPager实现Tab效果。如果没有阅读过，可以点击下面的地址：

http://www.cnblogs.com/fuly550871915/p/4849893.html

在这一篇中我们讲一下使用Fragment实现Tab效果，而这种实现方式也是推荐的方式。与用ViewPager实现的效果有一点不同。

一、效果展示

如下图：

使用Fragment不支持手指左右滑动，只支持底部按钮的点击来切换。它的中间不再是一个ViewPager布局了，而是一个用来存放Fragment的FrameLayout的布局。其顶部布局和底部布局没有什么变化。下面我们来看具体的代码吧。

二、资源准备

图片资源仍然是我们在上一篇文章中准备好的。直接复制到res下的drawable文件夹下就好。

三、具体代码

（1）布局搭建

顶部布局和底部布局以及几个Tab布局都没有变化，我们直接复制即可。只是把主布局中间的换成FrameLayout而已。主布局代码如下：

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:orientation="vertical"

     >

     <include layout="@layout/top"/>

     <FrameLayout

         android:id="@+id/lay_frame"

         android:layout_width="match_parent"

         android:layout_height="0dp"

         android:layout_weight="1"></FrameLayout>

     <include layout="@layout/bottum"/>"

 </LinearLayout>

（2）构建每一个fragment类

下面我们就要把每一个Tab变成一个Fragment。新建类Hfragment继承自Fragment。如下：

 import android.os.Bundle;

 import android.support.v4.app.Fragment;

 import android.view.LayoutInflater;

 import android.view.View;

 import android.view.ViewGroup;

 public class HFragment extends Fragment{

     public View onCreateView(LayoutInflater inflater, ViewGroup container,

             Bundle savedInstanceState) {

         return inflater.inflate(R.layout.tab01,container,false);

     }

 }

同理我们还要新建类Sfragment,Ufragment,Yfragment。它们都是继承自Fragment。只不过中间渲染的布局分别为Tab02,Tab03,Tab04.这样我们的fagment就完成了。

注意：继承的类Fragment一定导入android.support.v4.app.Fragment;这个包，而不能是其他包下的。

（3）在MainActivity里就可以实现Tab了。

在MainActivty中，实现Tab主要的技术就是利用FragmentTransaction，开启一个事务。在这个事务中，将我们的fragment加入进来，并嵌套在中间的布局FrameLayout上。然后通过事务控制隐藏和显示每一个fragment来达到切换的目的。具体代码如下：

 import android.os.Bundle;

 import android.app.Activity;

 import android.support.v4.app.Fragment;

 import android.support.v4.app.FragmentActivity;

 import android.support.v4.app.FragmentManager;

 import android.support.v4.app.FragmentTransaction;

 import android.view.Menu;

 import android.view.View;

 import android.view.View.OnClickListener;

 import android.widget.ImageButton;

 import android.widget.LinearLayout;

 public class MainActivity extends FragmentActivity implements OnClickListener{

     private Fragment hfrag;

     private Fragment sfrag;

     private Fragment ufrag;

     private Fragment yfrag;

     private ImageButton himg;

     private ImageButton simg;

     private ImageButton uimg;

     private ImageButton yimg;

     private LinearLayout hlay;

     private LinearLayout slay;

     private LinearLayout ulay;

     private LinearLayout ylay;

     private FragmentTransaction ftr;//事务

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         initView();//用来初始化数据控件

         initEvent();//初始化事件

         setSelected(0);//进入界面，先让其显示 第一个

     }

     private void initEvent() {

         //设定点击事件

         hlay.setOnClickListener(this);

         slay.setOnClickListener(this);

         ulay.setOnClickListener(this);

         ylay.setOnClickListener(this);

     }

     //用来初始化的方法

     private void initView() {

         //获得按钮

         himg = (ImageButton) findViewById(R.id.ibtn_hudie);

         simg = (ImageButton) findViewById(R.id.ibtn_set);

         uimg = (ImageButton) findViewById(R.id.ibtn_user);

         yimg = (ImageButton) findViewById(R.id.ibtn_yang);

         //获得底部的线性布局

         hlay = (LinearLayout) findViewById(R.id.lay_hudie);

         slay = (LinearLayout) findViewById(R.id.lay_set);

         ulay = (LinearLayout) findViewById(R.id.lay_user);

         ylay = (LinearLayout) findViewById(R.id.lay_yang);

     }

     //监听点击事件

     public void onClick(View v) {

         resetImg();//将按钮复位

         switch(v.getId()){

         case R.id.lay_hudie:

             setSelected(0);

             break;

         case R.id.lay_set:

             setSelected(1);

             break;

         case R.id.lay_user:

             setSelected(2);

             break;

         case R.id.lay_yang:

             setSelected(3);

             break;

         }

     }

     //自定义一个方法，设定布局中间的FrameLayout的选择状态

     private void setSelected(int i) {

         //需要将按钮变亮，且需要切换fragment的状体

         //获取事务

         FragmentManager fm = getSupportFragmentManager();

         ftr  = fm.beginTransaction();//开启一个事务

         hideTransaction(ftr);//自定义一个方法，来隐藏所有的fragment

         switch(i){

         case 0:

             if(hfrag == null){

                 //实例化每一个fragment

                 hfrag = new HFragment();

                 //千万别忘记将该fragment加入到ftr中

                 ftr.add(R.id.lay_frame, hfrag);

                 }

             ftr.show(hfrag);

             himg.setImageResource(R.drawable.hudie2);

             break;

         case 1:

             if(sfrag == null){

                 sfrag = new SFragment();

                 ftr.add(R.id.lay_frame, sfrag);

         }

                ftr.show(sfrag);

             simg.setImageResource(R.drawable.set2);

             break;

         case 2:

             if(ufrag == null){

                 ufrag = new UFragment();

                 ftr.add(R.id.lay_frame, ufrag);

             }

             ftr.show(ufrag);

             uimg.setImageResource(R.drawable.user2);

             break;

         case 3:

             if(yfrag == null){

                 yfrag = new YFragment();

                 ftr.add(R.id.lay_frame, yfrag);

             }

             ftr.show(yfrag);

             yimg.setImageResource(R.drawable.yang2);

             break;

         }

         ftr.commit();//最后千万别忘记提交事务

     }

     //隐藏fragment

     private void hideTransaction(FragmentTransaction ftr) {

         if(hfrag != null){

             ftr.hide(hfrag);//隐藏该fragment

         }

         if(sfrag != null){

             ftr.hide(sfrag);

         }

         if(ufrag != null){

             ftr.hide(ufrag);

         }

         if(yfrag != null){

             ftr.hide(yfrag);

         }

     }

     //复位按钮，即设置按钮为暗色

     private void resetImg() {

         himg.setImageResource(R.drawable.hudie);

         simg.setImageResource(R.drawable.set);

         uimg.setImageResource(R.drawable.user);

         yimg.setImageResource(R.drawable.yang);

     }

 }

注意：在这里继承的是FragmentActivity，导入包仍旧是android.support.v4.app.Fragment;

好了，这样我们就实现了Tab效果，运行一下程序可以看看。

四、总结

（1）为什么推荐Fragment来实现Tab效果？

因为使用Fragment可以将每一个Tab跟我们的MainActivity分开。这样有利于在每一个Fragment中实现较为复杂的效果，而MainnActivity只起到一个组合的作用。如果使用ViewPager方式实现Tab，我们在每一个Tab上编写较为复杂的效果时会发现所有的代码都几乎在MainActivity上完成，这样会导入MainActivty冗长，不利于阅读和维护。

（2）在实现过程中，一律使用包android.support.v4.app.Fragment; 这一点千万别导入错误的包。

巴特西

使用Fragment实现Tab效果

最新文章

热门文章