转载请标明出处：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的更多相关文章

Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager
文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...
android Tab 类型切换界面
实现方案:viewpager + fragment + FragmentPagerAdapter 效果图: 可以左右滑动切换选项卡,或者点击: 如果想使用fragment的时候又想可以左右滑动,就可以 ...
（转）Android项目重构之路:界面篇
在前一篇文章<Android项目重构之路:架构篇>中已经简单说明了项目的架构,将项目分为了四个层级:模型层.接口层.核心层.界面层.其中,最上层的界面,是变化最频繁的一个层面,也是最复杂最 ...
安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
安卓开发_慕课网_ViewPager实现Tab(App主界面)
学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...
android项目中刷新activity界面
android项目中在sqlite数据库插入/更新/删除数据后: 1. 刷新当前activity界面数据(手动刷新): 在activity类下新增一个refresh()方法: /** * 刷新, 这样 ...
安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)
学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗思路: Fragme ...
Android子线程更新主界面
学习什么的还是要真正的有应用,有需求才能在最短的时间里面牢牢掌握一项技术. 今天就是这样的,产品一个需求下来,十万火急啊.然后之前只稍稍接触过,只能硬着头皮上了.最后牢牢地掌握了最简单的Handler ...
解决主界面mainactivity 中fragment弹框把下面tab选项卡顶上去的方案
android:windowSoftInputMode="adjustPan" android:configChanges="screenSize ...

随机推荐

linq any()方法实现sql in()方法的效果
public IQueryable<Vsec009ComSecComp> QueryList(Sec009ComSecCompQueryCondition condition) { var ...
linux下测试磁盘的读写IO速度【转】
Reference1:http://server.chinabyte.com/495/12361995.shtmlReference2:https://www.deleak.com/blog/2011 ...
如何跳到系统设置界面-b
NSURL *url = [NSURL URLWithString:@"prefs:root=WIFI"]; if ([[UIApplication sharedApplicati ...
m个苹果放在n个筐里，每个筐至少一个，所有的筐都一样，有多少种放法
package com.study; import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...
python多线程threading.Lock锁用法实例
本文实例讲述了python多线程threading.Lock锁的用法实例,分享给大家供大家参考.具体分析如下: python的锁可以独立提取出来 mutex = threading.Lock() #锁 ...
BZOJ 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏
Description Farmer John 想让她的奶牛准备郡级跳跃比赛,贝茜和她的伙伴们正在练习跨栏.她们很累,所以她们想消耗最少的能量来跨栏. 显然,对于一头奶牛跳过几个矮栏是很容易的,但是高 ...
js node
http://blogs.msdn.com/b/scott_hanselman/archive/2011/11/29/window-iis-node-js.aspx http://www.16kan. ...
当函数没有return时错误
error:control reaches end of non-void function 在对应函数+return : 即可
gunicorn启动报错gunicorn.errors.HaltServer
启动gunicorn报错: # gunicorn -b :9008 -w 2 webserver:app 2013-12-10 09:12:58 [29701] [INFO] Starting gun ...
Beta Round ＃9 (酱油杯noi考后欢乐赛)PLQ和他的小伙伴们
题目:http://www.contesthunter.org/contest/Beta%20Round%20%EF%BC%839%20%28%E9%85%B1%E6%B2%B9%E6%9D%AFno ...

Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

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

第三种方式的源代码

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

随机推荐

热门专题