Android Tab切换之Fragment方法

最新推荐文章于 2021-05-27 13:20:27 发布

my9074

最新推荐文章于 2021-05-27 13:20:27 发布

阅读量4.6k

点赞数 1

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/my9074/article/details/44414423

版权

Android 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

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

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

不多说~上图：

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

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

Title的布局title_ui.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@android:color/holo_orange_dark" >
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="客户端"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_blue_dark"/>

</LinearLayout>

Tab的布局tab_ui.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_blue_dark"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tabImage01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_weixin_normal" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tabImage02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="地址"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tabImage03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab04"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tabImage04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@android:color/black" />
    </LinearLayout>

</LinearLayout>

主界面布局：

<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/title_ui"/>
    
    <LinearLayout
        android:id="@+id/fragment_ui" 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        ></LinearLayout>
    
    <include layout="@layout/tab_ui"/>
</LinearLayout>

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的切换

my9074

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android Tab切换之Fragment方法

纵观现在大部分Android客户端界面框架基本都是TitleBar+内容区域+TabBar的模式。其中TabBar用来切换对应的内容区域。今天我们用Fragment的方式实现Tab的切换不多说~上图：点击底部的Tab，中间的Fragment内容区域就会相应的切换。这里的Fragment只是简单的显示一个TextView。Title的布局title_ui.xml：
复制链接

扫一扫

专栏目录