前一篇文章实现了使用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 }
不积跬步,无以至千里,不积小流,无以成江海