Android Tab切换之Fragment方法

纵观现在大部分Android客户端界面框架基本都是TitleBar+内容区域+TabBar的模式。其中TabBar用来切换对应的内容区域。

今天我们用Fragment的方式实现Tab的切换

不多说~上图:

Android Tab切换之Fragment方法_第1张图片

点击底部的Tab,中间的Fragment内容区域就会相应的切换。

这里的Fragment只是简单的显示一个TextView。


Title的布局title_ui.xml:



    
    



Tab的布局tab_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的切换

你可能感兴趣的:(Android)