FrameLayout布局实现简单tab

最新推荐文章于 2025-11-12 17:28:48 发布

原创最新推荐文章于 2025-11-12 17:28:48 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#FragmentActivity #TabActivity

本文介绍了如何在Android应用中实现Tab布局，特别是在Android4.0之后，TabActivity已过期，推荐使用FragmentActivity替代。文章通过一个实例展示了如何创建和设置布局文件，最终达到了类似导航栏的效果。

现在很多Android应用采用同窗口多面板（tab）的显示，web中往往被称为导航栏，作为初学者有必要学习一下，于是网上寻找到一个样例，运行后效果不错

Android4.0以后，标识TabActivity过期，不建议使用，该样例中使用FragmentActivity替换；

为了对比学习FragmentTabHost，我想先仅参考官方关于Building a Dynamic UI with Fragments，即用Fragment创建动态的用户界面，开发学习下。

首先定义布局文件sub_main.xml

<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" >
    <LinearLayout 
        android:gravity="center"
        android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp">
        <Button
            android:id="@+id/button1"
            android:text="@string/Tab1"
            android:layout_weight="1"
            android:layout_width="0dip"
	    	android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/button2"
            android:text="@string/Tab2"
            android:layout_weight="1"
            android:layout_width="0dip"
	    	android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/button3"
            android:text="@string/Tab3"
            android:layout_weight="1"
            android:layout_width="0dip"
	    	android:layout_height="wrap_content"/>
    </LinearLayout>
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
	    android:layout_height="match_parent"
        />
</LinearLayout>

然后是公用的显示更新内容的布局content_fragment.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="match_parent"
    android:orientation="vertical" >
    
    <TextView 
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
        />

</LinearLayout>

下面是处理sub_main.xml布局的java代码

package com.xcdnote.fragments_test;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;

public class SubActivity extends FragmentActivity implements OnClickListener {
	
	private ContentFragment contentFragment;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//包含fragment组件的activity，需继承FragmentActivity
		setContentView(R.layout.sub_main);
		//1.判断当前activity是否使用了FrameLayout布局
		if(findViewById(R.id.fragment_container)!=null){
			//2.如果保留了之前的状态，可以直接返回
			if(savedInstanceState!=null){
				return;
			}
			//3.创建Fragment布局对象,通过实例化对象方法，实现初始化
//			contentFragment = new ContentFragment();
			contentFragment = ContentFragment.newInstance("Tab1");
			//4.在FrameLayout容器中动态添加Fragment
			FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
			ft.add(R.id.fragment_container,contentFragment);
			ft.commit();
		}
		findViewById(R.id.button1).setOnClickListener(this);
		findViewById(R.id.button1).setSelected(true);
		findViewById(R.id.button2).setOnClickListener(this);
		findViewById(R.id.button3).setOnClickListener(this);
	}
	
	
	@Override
	public void onClick(View v) {
		FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
		switch (v.getId()) {
		case R.id.button1:
			contentFragment.upText(getResources().getString(R.string.Tab1));
			ft.replace(R.id.fragment_container,contentFragment);
			break;
		case R.id.button2:
			contentFragment.upText(getResources().getString(R.string.Tab2));
			ft.replace(R.id.fragment_container,contentFragment);
			break;
		case R.id.button3:
			contentFragment.upText(getResources().getString(R.string.Tab3));
			ft.replace(R.id.fragment_container,contentFragment);
			break;
		}
		ft.commit();
	}
}

以及加载content_fragment.xml布局的java代码

package com.xcdnote.fragments_test;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ContentFragment extends Fragment {

	private View layoutView;
	private TextView  tv_content;
	//参数名称
	private static final String ARG = "arg";
	//自身实例化对象
	public static ContentFragment newInstance(String arg){
		ContentFragment content = new ContentFragment();
		//定义Bundle对象传递参数
		Bundle bundle = new Bundle();
		bundle.putString(ARG, arg);
		content.setArguments(bundle);
		return content;
	}
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}
	@Override
	public View onCreateView(LayoutInflater inflater,
			@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
		layoutView = inflater.inflate(R.layout.content_fragment,null);
		tv_content = (TextView) layoutView.findViewById(R.id.tv_content);
		//接收初始化的参数
		tv_content.setText(getArguments().getString(ARG));
		return layoutView;
	}
	public void upText(String text){
		tv_content.setText(text);
	}
}

好了，最后界面效果如下（红色的圈为标识布局）

其实就是样例图中的"主页"部分。

值得注意的是，在SubActivity.java中，最开始我是直接创建对象然后引用，即

contentFragment = new ContentFragment();
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.add(R.id.fragment_container,contentFragment);

这样的话，通过

		//意图进行初始化工作
//		contentFragment.upText("tab1");

初始化显示内容，会报空指针错误，但如果通过构造方法传递参数初始化，当横竖屏切换时（Activity与Fragment重新创建），参数会被清除，详情在 Android解惑 - 为什么要用Fragment.setArguments(Bundle bundle)来传递参数，所以通过Bundle对象绑定参数。