使用Fragment来实现Tab的效果

前一篇文章实现了使用ViewPager来实现Tab的效果，这篇来介绍使用Fragment来实现Tab的效果。

下面给出上一篇的地址：http://www.cnblogs.com/mengyan1124/p/4675524.html

实现效果是同前一篇一样的，而布局文件也仅仅只有activity_main.xml发生了一点变化，此文件代码如下：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:id="@+id/container"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
 7 
 8     <include layout="@layout/top" />
 9 
10     <FrameLayout
11         android:id="@+id/fragment"
12         android:layout_width="fill_parent"
13         android:layout_height="0dp"
14         android:layout_weight="1" >
15     </FrameLayout>
16 
17     <include layout="@layout/bottom" />
18 
19 </LinearLayout>

下边来实现主要代码：

首先针对每一个功能模块，新建一个Fragment,这里就不一一建了，只拿一个例子来说一说，针对每一个Fragment的实现很简单，代码如下：

1 public class SettingFragment extends Fragment {
2 
3     @Override
4     public View onCreateView(LayoutInflater inflater, ViewGroup container,
5             Bundle savedInstanceState) {
6         // TODO Auto-generated method stub
7         return inflater.inflate(R.layout.tab_04, container,false);
8     }
9 }

而全部的Fragment建立完之后的目录是：

主要的实现代码如下：

  1 public class MainActivity extends FragmentActivity implements OnClickListener {
  2 
  3     private ImageButton weixin, friend, contact, setting;
  4     private LinearLayout tab_weixin;
  5     private LinearLayout tab_friend;
  6     private LinearLayout tab_contact;
  7     private LinearLayout tab_setting;
  8 
  9     //生命每一个Fragment
 10     WeixinFragment tab_01;
 11     FriendFragment tab_02;
 12     ContractFragment tab_03;
 13     SettingFragment tab_04;
 14 
 15     @Override
 16     protected void onCreate(Bundle savedInstanceState) {
 17         super.onCreate(savedInstanceState);
 18         requestWindowFeature(Window.FEATURE_NO_TITLE);
 19         setContentView(R.layout.activity_main);
 20         initView();
 21         initEvents();
 22         setSelected(0);
 23     }
 24     /**
 25      * 设置监听
 26      */
 27     private void initEvents() {
 28         // TODO Auto-generated method stub
 29         tab_weixin.setOnClickListener(this);
 30         tab_friend.setOnClickListener(this);
 31         tab_contact.setOnClickListener(this);
 32         tab_setting.setOnClickListener(this);
 33     }
 34     /**
 35      * 实例化每一个控件
 36      */
 37     private void initView() {
 38         // TODO Auto-generated method stub
 39 
 40         weixin = (ImageButton) findViewById(R.id.weixin_img);
 41         friend = (ImageButton) findViewById(R.id.friend_img);
 42         contact = (ImageButton) findViewById(R.id.contact_img);
 43         setting = (ImageButton) findViewById(R.id.setting_img);
 44 
 45         tab_weixin = (LinearLayout) findViewById(R.id.tab_weixin);
 46         tab_friend = (LinearLayout) findViewById(R.id.tab_friend);
 47         tab_contact = (LinearLayout) findViewById(R.id.tab_contact);
 48         tab_setting = (LinearLayout) findViewById(R.id.tab_setting);
 49 
 50     }
 51 
 52     /**
 53      * 设置图标为亮色 设置中间内容
 54      */
 55     private void setSelected(int i) {
 56         FragmentManager fm = getSupportFragmentManager();//得到FragmentManager
 57         FragmentTransaction beginTransaction = fm.beginTransaction();
 58         
 59         hideFrag(beginTransaction);
 60         // TODO Auto-generated method stub
 61         switch (i) {
 62         case 0:
 63         {
 64             weixin.setImageResource(R.drawable.yesr);
 65             if (tab_01 == null) {
 66                 tab_01 = new WeixinFragment();
 67                 beginTransaction.add(R.id.fragment, tab_01);
 68             } else
 69                 beginTransaction.show(tab_01);
 70             break;
 71         }
 72         case 1:
 73         {
 74             friend.setImageResource(R.drawable.jib);
 75             if (tab_02 == null) {
 76                 tab_02 = new FriendFragment();
 77                 beginTransaction.add(R.id.fragment, tab_02);
 78             } else
 79                 beginTransaction.show(tab_02);
 80             break;
 81         }
 82         case 2:
 83         {
 84             contact.setImageResource(R.drawable.yesr);
 85             if (tab_03 == null) {
 86                 tab_03 = new ContractFragment();
 87                 beginTransaction.add(R.id.fragment, tab_03);
 88             } else
 89                 beginTransaction.show(tab_03);
 90             break;
 91         }
 92         case 3:
 93         {
 94             setting.setImageResource(R.drawable.jib);
 95             if (tab_04 == null) {
 96                 tab_04 = new SettingFragment();
 97                 beginTransaction.add(R.id.fragment, tab_04);
 98             } else
 99                 beginTransaction.show(tab_04);
100             break;
101         }
102         default:
103             break;
104         }
105         beginTransaction.commit();//切记事务不要忘了提交
106     }
107     /**
108      *  把所有的Fragment隐藏
109      * @param beginTransaction
110      */
111     private void hideFrag(FragmentTransaction beginTransaction) {
112         // TODO Auto-generated method stub
113         if (tab_01 != null) {
114             beginTransaction.hide(tab_01);
115         }
116         if (tab_02 != null) {
117             beginTransaction.hide(tab_02);
118         }
119         if (tab_03 != null) {
120             beginTransaction.hide(tab_03);
121         }
122         if (tab_04 != null) {
123             beginTransaction.hide(tab_04);
124         }
125     }
126 
127     @Override
128     public void onClick(View arg0) {
129         // TODO Auto-generated method stub
130         resetImg();
131         switch (arg0.getId()) {
132         case R.id.tab_weixin:
133             setSelected(0);
134             break;
135         case R.id.tab_friend:
136             setSelected(1);
137             break;
138         case R.id.tab_contact:
139             setSelected(2);
140             break;
141         case R.id.tab_setting:
142             setSelected(3);
143             break;
144 
145         default:
146             break;
147         }
148     }
149 
150     /**
151      * 将所有的图片切换为暗色
152      */
153     private void resetImg() {
154         // TODO Auto-generated method stub
155         weixin.setImageResource(R.drawable.yesb);
156         friend.setImageResource(R.drawable.jibla);
157         contact.setImageResource(R.drawable.yesb);
158         setting.setImageResource(R.drawable.jibla);
159 
160     }

不积跬步，无以至千里，不积小流，无以成江海