Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager-阿里云开发者社区

开发者社区> 技术mix呢> 正文

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

简介:
+关注继续查看

转载请标明出处: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实现方法 ,期待您的关注。




本文转自mfrbuaa博客园博客,原文链接http://www.cnblogs.com/mfrbuaa/p/5326584.html,如需转载请自行联系原作者 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一、搭建篇-使用Github-hexo搭建个人博客教程—总结自己爬过的坑
一直想要拥有自己的一个博客,CSDN,那些又觉得不够个性化(主要是觉得逼格不够,哈哈) Github搭建博客的优点: 1、不需要域名和服务器 2、访问自己博客的时候没有广告 3、可以自己修改样式,能根据自己的需求加功能。
8516 0
Nodejs基础:路径处理模块path总结
在nodejs中,path是个使用频率很高,但却让人又爱又恨的模块。部分因为文档说的不够清晰,部分因为接口的平台差异性。 将path的接口按照用途归类,仔细琢磨琢磨,也就没那么费解了。
3952 0
Java基础-23总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
你需要的是什么,直接评论留言。 获取更多资源加微信公众号“Java帮帮” (是公众号,不是微信好友哦) 还有“Java帮帮”今日头条号,技术文章与新闻,每日更新,欢迎阅读 学习交流请加Java帮帮交流QQ群553841695 分享是一种美德,分享更快乐! 1:多线程(理解) (1)多线程:一个应用程序有多条执行路径 进程:正
2785 0
C++项目参考解答-太乐了
【项目-太乐了】 (1)先听故事,再编程序。故事是这样的:话说sin和cos是一对夫妇。一天,sin去听相声了,cos在家。过了一会,有人敲门,cos开门一看,是一个不认识的多项式函数。cos问:你是谁啊?他说:我是你的老公sin啊。cos说:你不是去听相声了吗?怎么成这幅摸样了?sin说:是啊,太乐了!故事讲完了。下面是sin函数的泰勒展式:(注:x取弧度值,而非角度值)用sin泰勒展式
999 0
耗资数十亿,Alphabet旗下生命科学机构Verily宣布终止泪液血糖监测项目
未来,这项技术还很有可能被应用于老年远视、白内障术后视力恢复的治疗中,是生物科学界的福音。
195 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载