转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24740977

Android如今实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。眼下写了：

1、传统的ViewPager实现

2、FragmentManager+Fragment实现

3、ViewPager+FragmentPagerAdapter实现

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

1、传统的ViewPager实现

主要就是ViewPager+ViewAdapter这个还是比較常见的。就不多说了

效果图：

代码：

package com.example.mainframework02;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageButton;

import android.widget.ImageView;

import android.widget.LinearLayout;

public class TraditionalViewPagerAcvitity extends Activity

{

	/**

	 * ViewPager

	 */

	private ViewPager mViewPager;

	/**

	 * ViewPager的适配器

	 */

	private PagerAdapter mAdapter;

	private List<View> mViews;

	private LayoutInflater mInflater;

	private int currentIndex;

	/**

	 * 底部四个button

	 */

	private LinearLayout mTabBtnWeixin;

	private LinearLayout mTabBtnFrd;

	private LinearLayout mTabBtnAddress;

	private LinearLayout mTabBtnSettings;

	@Override

	protected void onCreate(Bundle savedInstanceState)

	{

		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		mInflater = LayoutInflater.from(this);

		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

		/**

		 * 初始化View

		 */

		initView();

		mViewPager.setAdapter(mAdapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener()

		{

			@Override

			public void onPageSelected(int position)

			{

				resetTabBtn();

				switch (position)

				{

				case 0:

					((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

							.setImageResource(R.drawable.tab_weixin_pressed);

					break;

				case 1:

					((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

							.setImageResource(R.drawable.tab_find_frd_pressed);

					break;

				case 2:

					((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

							.setImageResource(R.drawable.tab_address_pressed);

					break;

				case 3:

					((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

							.setImageResource(R.drawable.tab_settings_pressed);

					break;

				}

				currentIndex = position;

			}

			@Override

			public void onPageScrolled(int arg0, float arg1, int arg2)

			{

			}

			@Override

			public void onPageScrollStateChanged(int arg0)

			{

			}

		});

	}

	protected void resetTabBtn()

	{

		((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

				.setImageResource(R.drawable.tab_weixin_normal);

		((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

				.setImageResource(R.drawable.tab_find_frd_normal);

		((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

				.setImageResource(R.drawable.tab_address_normal);

		((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

				.setImageResource(R.drawable.tab_settings_normal);

	}

	private void initView()

	{

		mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

		mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

		mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

		mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

		mViews = new ArrayList<View>();

		View first = mInflater.inflate(R.layout.main_tab_01, null);

		View second = mInflater.inflate(R.layout.main_tab_02, null);

		View third = mInflater.inflate(R.layout.main_tab_03, null);

		View fourth = mInflater.inflate(R.layout.main_tab_04, null);

		mViews.add(first);

		mViews.add(second);

		mViews.add(third);

		mViews.add(fourth);

		mAdapter = new PagerAdapter()

		{

			@Override

			public void destroyItem(ViewGroup container, int position, Object object)

			{

				container.removeView(mViews.get(position));

			}

			@Override

			public Object instantiateItem(ViewGroup container, int position)

			{

				View view = mViews.get(position);

				container.addView(view);

				return view;

			}

			@Override

			public boolean isViewFromObject(View arg0, Object arg1)

			{

				return arg0 == arg1;

			}

			@Override

			public int getCount()

			{

				return mViews.size();

			}

		};

	}

}

评价：全部的代码都集中在一个Activity中，显得代码比較乱。

2、FragmentManager+Fragment实现

主要利用了Fragment在主内容界面对Fragment的add,hide等事务操作。

效果图：

代码：

主Activity

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageButton;

import android.widget.LinearLayout;

import com.example.mainframework02.R;

public class FragmentMainActivity extends Activity implements OnClickListener

{

	private MainTab02 mTab02;

	private MainTab01 mTab01;

	private MainTab03 mTab03;

	private MainTab04 mTab04;

	/**

	 * 底部四个button

	 */

	private LinearLayout mTabBtnWeixin;

	private LinearLayout mTabBtnFrd;

	private LinearLayout mTabBtnAddress;

	private LinearLayout mTabBtnSettings;

	/**

	 * 用于对Fragment进行管理

	 */

	private FragmentManager fragmentManager;

	@SuppressLint("NewApi")

	@Override

	protected void onCreate(Bundle savedInstanceState)

	{

		super.onCreate(savedInstanceState);

		setContentView(R.layout.fragment_main);

		initViews();

		fragmentManager = getFragmentManager();

		setTabSelection(0);

	}

	private void initViews()

	{

		mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

		mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

		mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

		mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

		mTabBtnWeixin.setOnClickListener(this);

		mTabBtnFrd.setOnClickListener(this);

		mTabBtnAddress.setOnClickListener(this);

		mTabBtnSettings.setOnClickListener(this);

	}

	@Override

	public void onClick(View v)

	{

		switch (v.getId())

		{

		case R.id.id_tab_bottom_weixin:

			setTabSelection(0);

			break;

		case R.id.id_tab_bottom_friend:

			setTabSelection(1);

			break;

		case R.id.id_tab_bottom_contact:

			setTabSelection(2);

			break;

		case R.id.id_tab_bottom_setting:

			setTabSelection(3);

			break;

		default:

			break;

		}

	}

	/**

	 * 依据传入的index參数来设置选中的tab页。

*

	 */

	@SuppressLint("NewApi")

	private void setTabSelection(int index)

	{

		// 重置button

		resetBtn();

		// 开启一个Fragment事务

		FragmentTransaction transaction = fragmentManager.beginTransaction();

		// 先隐藏掉全部的Fragment，以防止有多个Fragment显示在界面上的情况

		hideFragments(transaction);

		switch (index)

		{

		case 0:

			// 当点击了消息tab时，改变控件的图片和文字颜色

			((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

					.setImageResource(R.drawable.tab_weixin_pressed);

			if (mTab01 == null)

			{

				// 假设MessageFragment为空，则创建一个并加入到界面上

				mTab01 = new MainTab01();

				transaction.add(R.id.id_content, mTab01);

			} else

			{

				// 假设MessageFragment不为空，则直接将它显示出来

				transaction.show(mTab01);

			}

			break;

		case 1:

			// 当点击了消息tab时，改变控件的图片和文字颜色

			((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

					.setImageResource(R.drawable.tab_find_frd_pressed);

			if (mTab02 == null)

			{

				// 假设MessageFragment为空，则创建一个并加入到界面上

				mTab02 = new MainTab02();

				transaction.add(R.id.id_content, mTab02);

			} else

			{

				// 假设MessageFragment不为空，则直接将它显示出来

				transaction.show(mTab02);

			}

			break;

		case 2:

			// 当点击了动态tab时，改变控件的图片和文字颜色

			((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

					.setImageResource(R.drawable.tab_address_pressed);

			if (mTab03 == null)

			{

				// 假设NewsFragment为空，则创建一个并加入到界面上

				mTab03 = new MainTab03();

				transaction.add(R.id.id_content, mTab03);

			} else

			{

				// 假设NewsFragment不为空。则直接将它显示出来

				transaction.show(mTab03);

			}

			break;

		case 3:

			// 当点击了设置tab时，改变控件的图片和文字颜色

			((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

					.setImageResource(R.drawable.tab_settings_pressed);

			if (mTab04 == null)

			{

				// 假设SettingFragment为空，则创建一个并加入到界面上

				mTab04 = new MainTab04();

				transaction.add(R.id.id_content, mTab04);

			} else

			{

				// 假设SettingFragment不为空，则直接将它显示出来

				transaction.show(mTab04);

			}

			break;

		}

		transaction.commit();

	}

	/**

	 * 清除掉全部的选中状态。

	 */

	private void resetBtn()

	{

		((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

				.setImageResource(R.drawable.tab_weixin_normal);

		((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

				.setImageResource(R.drawable.tab_find_frd_normal);

		((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

				.setImageResource(R.drawable.tab_address_normal);

		((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

				.setImageResource(R.drawable.tab_settings_normal);

	}

	/**

	 * 将全部的Fragment都置为隐藏状态。

	 *

	 * @param transaction

	 *            用于对Fragment运行操作的事务

	 */

	@SuppressLint("NewApi")

	private void hideFragments(FragmentTransaction transaction)

	{

		if (mTab01 != null)

		{

			transaction.hide(mTab01);

		}

		if (mTab02 != null)

		{

			transaction.hide(mTab02);

		}

		if (mTab03 != null)

		{

			transaction.hide(mTab03);

		}

		if (mTab04 != null)

		{

			transaction.hide(mTab04);

		}

	}

}

各个TabFragment。一共四个TabFragment。以下贴出两个，基本都一样。 

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

@SuppressLint("NewApi")

public class MainTab01 extends Fragment

{

	@Override

	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

	{

		return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);

	}

}


package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import com.example.mainframework02.R;

@SuppressLint("NewApi")

public class MainTab02 extends Fragment

{

	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

	{

		return inflater.inflate(R.layout.main_tab_02, container, false);

	}

}

评价：每一个Fragment中的控件的处理，都是独立到各自的类中，相对来说主Activity简化了不少，可惜没有左右滑动的效果了。

3、ViewPager+Fragment实现

主要通过ViewPager和FragmentPagerAdapter一起来实现。

效果图：

代码：

主Activity

package com.example.mainframework03;

import java.util.ArrayList;

import java.util.List;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.widget.ImageButton;

import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity

{

	private ViewPager mViewPager;

	private FragmentPagerAdapter mAdapter;

	private List<Fragment> mFragments = new ArrayList<Fragment>();

	/**

	 * 底部四个button

	 */

	private LinearLayout mTabBtnWeixin;

	private LinearLayout mTabBtnFrd;

	private LinearLayout mTabBtnAddress;

	private LinearLayout mTabBtnSettings;

	@Override

	protected void onCreate(Bundle savedInstanceState)

	{

		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

		initView();

		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())

		{

			@Override

			public int getCount()

			{

				return mFragments.size();

			}

			@Override

			public Fragment getItem(int arg0)

			{

				return mFragments.get(arg0);

			}

		};

		mViewPager.setAdapter(mAdapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener()

		{

			private int currentIndex;

			@Override

			public void onPageSelected(int position)

			{

				resetTabBtn();

				switch (position)

				{

				case 0:

					((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

							.setImageResource(R.drawable.tab_weixin_pressed);

					break;

				case 1:

					((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

							.setImageResource(R.drawable.tab_find_frd_pressed);

					break;

				case 2:

					((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

							.setImageResource(R.drawable.tab_address_pressed);

					break;

				case 3:

					((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

							.setImageResource(R.drawable.tab_settings_pressed);

					break;

				}

				currentIndex = position;

			}

			@Override

			public void onPageScrolled(int arg0, float arg1, int arg2)

			{

			}

			@Override

			public void onPageScrollStateChanged(int arg0)

			{

			}

		});

	}

	protected void resetTabBtn()

	{

		((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

				.setImageResource(R.drawable.tab_weixin_normal);

		((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

				.setImageResource(R.drawable.tab_find_frd_normal);

		((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

				.setImageResource(R.drawable.tab_address_normal);

		((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

				.setImageResource(R.drawable.tab_settings_normal);

	}

	private void initView()

	{

		mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

		mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

		mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

		mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

		MainTab01 tab01 = new MainTab01();

		MainTab02 tab02 = new MainTab02();

		MainTab03 tab03 = new MainTab03();

		MainTab04 tab04 = new MainTab04();

		mFragments.add(tab01);

		mFragments.add(tab02);

		mFragments.add(tab03);

		mFragments.add(tab04);

	}

}

还有4个TabFragment，以下贴一个，四个基本一样 

package com.example.mainframework03;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MainTab01 extends Fragment

{

	@Override

	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

	{

		return  inflater.inflate(R.layout.main_tab_01, container, false);

	}

}

评价：实现效果和第一种效果一模一样。每一个Fragment独自处理自己内部的逻辑，代码整洁非常多。而且支持左右滑动。感觉是第一种和另外一种的结合版本号。

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

实现方式和3是一致的，可是使用了TabPageIndicator作为tab的指示器，效果还是不错的，这个之前写过。就不再贴代码了。

效果图：

參考：Android 使用Fragment。ViewPagerIndicator 制作csdn app主要框架

好了。就总结了这么多。肯定还有非常多别的实现方式。大家能够留言，有时间会继续完好这篇总结的。

第一种和另外一种的源代码

第三种方式的源代码

本来想一起。无奈，一会v4.Fragment一会Fragment就分开了，嘿嘿，各位留个言，赞一个。算是对我的支持。
该博客视频教程已经更新：多种多样的App主界面Tab实现方法 ，期待您的关注。
----------------------------------------------------------------------------------------------------------

博主部分视频已经上线，假设你不喜欢枯燥的文本。请猛戳（初录，期待您的支持）：

视频文件夹地址：本人录制的视频教程

Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager的更多相关文章

  1. Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager

    文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...

  2. android Tab 类型切换界面

    实现方案:viewpager + fragment + FragmentPagerAdapter 效果图: 可以左右滑动切换选项卡,或者点击: 如果想使用fragment的时候又想可以左右滑动,就可以 ...

  3. （转）Android项目重构之路:界面篇

    在前一篇文章<Android项目重构之路:架构篇>中已经简单说明了项目的架构,将项目分为了四个层级:模型层.接口层.核心层.界面层.其中,最上层的界面,是变化最频繁的一个层面,也是最复杂最 ...

  4. 安卓开发_慕课网_Fragment实现Tab(App主界面)

    学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...

  5. 安卓开发_慕课网_ViewPager实现Tab(App主界面)

    学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...

  6. android项目中刷新activity界面

    android项目中在sqlite数据库插入/更新/删除数据后: 1. 刷新当前activity界面数据(手动刷新): 在activity类下新增一个refresh()方法: /** * 刷新, 这样 ...

  7. 安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)

    学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragme ...

  8. Android子线程更新主界面

    学习什么的还是要真正的有应用,有需求才能在最短的时间里面牢牢掌握一项技术. 今天就是这样的,产品一个需求下来,十万火急啊.然后之前只稍稍接触过,只能硬着头皮上了.最后牢牢地掌握了最简单的Handler ...

  9. 解决 主界面mainactivity 中fragment弹框把下面tab选项卡 顶上去的方案

     android:windowSoftInputMode="adjustPan"            android:configChanges="screenSize ...

随机推荐

  1. zzuli oj 1167逆转数（指针专题）

    Description 任意给你一个整数,这个数可能很大(最长不超过100位),你能求出它的逆转数吗?  逆转数定义如下:  1.一个末尾没有0的整数,它的逆转数就是各位数字逆序输出:  2.一个负数 ...

  2. 解决EXC_BAD_ACCESS错误的一种方法--NSZombieEnabled

    iOS 程序开发时经常用遇到 EXC_BAD_ACCESS 错误导致 Crash,出现这种错误时一般 Xcode 不会给我们太多的信息来定位错误来源,只是在应用 Delegate 上留下像Thread ...

  3. nutch 索引

    nutch开发环境搭建     nutch-1.3导入eclipse     nutch-1.7导入eclipse nutch部署     nutch-1.3linux下部署     nutch-1. ...

  4. Mysql table ful

    http://ourmysql.com/archives/1327 http://blog.csdn.net/kevon_sun/article/details/7967728 http://my.o ...

  5. [mock]10月4日

    第一次mock,CollabEdit开一个页面,开始做题.题目是,有方法pow(m,n),m和n都大于1,给出N,有顺序的打印出前N个pow(m,n)的结果.前一个是:4,8,9,16,... 然后在 ...

  6. Android用户界面 UI组件--TextView及其子类(四) Chronometer计时器

    Chronometer是一个简单的定时器,你可以给它一个开始时间,并以此定时,或者如果你不给它一个开始时间,它将会使用你的时间通话开始.默认情况下它会显示在当前定时器的值的形式“分:秒”或“H:MM: ...

  7. iOS －view横向变成竖向

    -------

  8. SQL中Case When的使用方法

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END       --Case搜索 ...

  9. 一张图看懂开源许可协议，开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL的区别

    一张图看懂开源许可协议,开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别 首先借用有心人士的一张相当直观清晰的图来划分各种协议:开源许可证GPL.BSD.MIT.Mozi ...

  10. javascript时间、随机数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...