Android Tab切换之Fragment方法
纵观现在大部分Android客户端界面框架基本都是TitleBar+内容区域+TabBar的模式。其中TabBar用来切换对应的内容区域。
今天我们用Fragment的方式实现Tab的切换
不多说~上图：
点击底部的Tab，中间的Fragment内容区域就会相应的切换。
这里的Fragment只是简单的显示一个TextView。
Title的布局title_ui.xml：
主界面布局：
Fragment代码（其中之一，其他都一样）：
package com.example.tabfragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FragmenAddr extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater
.inflate(R.layout.fragment_addrs, container, false);
return view;
}
}
主Activity代码：
package com.example.tabfragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends FragmentActivity implements OnClickListener {
private LinearLayout layoutTab01;//Tab四个按钮之一
private LinearLayout layoutTab02;
private LinearLayout layoutTab03;
private LinearLayout layoutTab04;
private ImageView imageView01; //Tab图片
private ImageView imageView02;
private ImageView imageView03;
private ImageView imageView04;
private FragmentManager manager;
private FragmentTransaction transaction;
private FragmenWeixin weixin; //内容区域
private FragmenAddr addr;
private FragmenSetting setting;
private FragmenFriend friend;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
setSelect(0);
}
private void setSelect(int i) {
clearImageView();
manager = getSupportFragmentManager();
transaction = manager.beginTransaction();
hideFragment(transaction);
switch (i) {
case 0:
imageView01.setImageResource(R.drawable.tab_weixin_pressed);
if(weixin == null){
weixin = new FragmenWeixin();
transaction.add(R.id.fragment_ui,weixin);
}else {
transaction.show(weixin);
}
break;
case 1:
imageView02.setImageResource(R.drawable.tab_address_pressed);
if(addr == null){
addr = new FragmenAddr();
transaction.add(R.id.fragment_ui,addr);
}else {
transaction.show(addr);
}
break;
case 2:
imageView03.setImageResource(R.drawable.tab_settings_pressed);
if(setting == null){
setting = new FragmenSetting();
transaction.add(R.id.fragment_ui,setting);
}else {
transaction.show(setting);
}
break;
case 3:
imageView04.setImageResource(R.drawable.tab_find_frd_pressed);
if(friend == null){
friend = new FragmenFriend();
transaction.add(R.id.fragment_ui,friend);
}else {
transaction.show(friend);
}
break;
default:
break;
}
transaction.commit();
}
private void hideFragment(FragmentTransaction transaction2) {
// TODO Auto-generated method stub
if(weixin != null){
transaction2.hide(weixin);
}
if(addr != null){
transaction2.hide(addr);
}
if(setting != null){
transaction2.hide(setting);
}
if(friend != null){
transaction2.hide(friend);
}
}
private void clearImageView() {
imageView01.setImageResource(R.drawable.tab_weixin_normal);
imageView02.setImageResource(R.drawable.tab_address_normal);
imageView03.setImageResource(R.drawable.tab_settings_normal);
imageView04.setImageResource(R.drawable.tab_find_frd_normal);
}
private void initEvent() {
layoutTab01.setOnClickListener(this);
layoutTab02.setOnClickListener(this);
layoutTab03.setOnClickListener(this);
layoutTab04.setOnClickListener(this);
}
private void initView() {
layoutTab01 = (LinearLayout) findViewById(R.id.tab01);
layoutTab02 = (LinearLayout) findViewById(R.id.tab02);
layoutTab03 = (LinearLayout) findViewById(R.id.tab03);
layoutTab04 = (LinearLayout) findViewById(R.id.tab04);
imageView01 = (ImageView) findViewById(R.id.tabImage01);
imageView02 = (ImageView) findViewById(R.id.tabImage02);
imageView03 = (ImageView) findViewById(R.id.tabImage03);
imageView04 = (ImageView) findViewById(R.id.tabImage04);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab01:
setSelect(0);
break;
case R.id.tab02:
setSelect(1);
break;
case R.id.tab03:
setSelect(2);
break;
case R.id.tab04:
setSelect(3);
break;
default:
break;
}
}
}
主要流程：点击Tab中的按钮，将该按钮的ImageView颜色变为选中状态，同时切换相应的Fragment。
此方法使用了目前较推荐的Fragment，减少了代码的耦合程度。下一篇将介绍Tab切换的另一种方法，利用ViewPager+FragmentPageAdapter的方式实现Tab的切换