几种Tab的实现方法-白红宇

几种Tab的实现方法

阅读量：5810 次

发布时间：2019-06-18

本文共 16873 字，大约阅读时间需要 56 分钟。

转载请注明出处，谢谢！

学了这久Android，今天来总结一下几种Tab的实现方法

实现方法一：

ViewPage来实现

首先创建一个top.xml布局和一个bottom.xml布局，然后在主界面中通过Include属性加入

top.xml

bottom.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="55dp" android:background="@drawable/bottom_bar" android:orientation="horizontal" > <LinearLayout android:id="@+id/id_tab_weixin" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_weixin_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_weixin_pressed" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_frd" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_frd_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_find_frd_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_address" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_address_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_address_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_settings" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_settings_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_settings_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#ffffff" /> </LinearLayout> </LinearLayout>

main.xml,通过include引入，中间使用ViewPager

然后写几个界面的布局：用于切换的时候显示。这里我就写一个，其它类似

tob01.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:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Weixin Tab" android:textSize="30sp" android:textStyle="bold" /> </LinearLayout>

MainActivity.java

package com.imooc.tab01;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.View.OnClickListener;import android.view.ViewGroup;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout;public class MainActivity extends Activity implements OnClickListener{	private ViewPager mViewPager;	private PagerAdapter mAdapter;	private List
     
       mViews = new ArrayList
      
       ();	// TAB	private LinearLayout mTabWeixin;	private LinearLayout mTabFrd;	private LinearLayout mTabAddress;	private LinearLayout mTabSetting;	private ImageButton mWeixinImg;	private ImageButton mFrdImg;	private ImageButton mAddressImg;	private ImageButton mSettingImg;	@Override	protected void onCreate(Bundle savedInstanceState)	{		super.onCreate(savedInstanceState);		requestWindowFeature(Window.FEATURE_NO_TITLE);		setContentView(R.layout.activity_main);		initView();		initEvents();	}	private void initEvents()	{		mTabWeixin.setOnClickListener(this);		mTabFrd.setOnClickListener(this);		mTabAddress.setOnClickListener(this);		mTabSetting.setOnClickListener(this);		mViewPager.setOnPageChangeListener(new OnPageChangeListener()		{			@Override			public void onPageSelected(int arg0)			{				int currentItem = mViewPager.getCurrentItem();				resetImg();				switch (currentItem)				{				case 0:					mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);					break;				case 1:					mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);					break;				case 2:					mAddressImg.setImageResource(R.drawable.tab_address_pressed);					break;				case 3:					mSettingImg.setImageResource(R.drawable.tab_settings_pressed);					break;				}			}			@Override			public void onPageScrolled(int arg0, float arg1, int arg2)			{			}			@Override			public void onPageScrollStateChanged(int arg0)			{			}		});	}	private void initView()	{		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);		// tabs		mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);		mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);		mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);		mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);		// ImageButton		mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);		mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);		mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);		mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);		LayoutInflater mInflater = LayoutInflater.from(this);		View tab01 = mInflater.inflate(R.layout.tab01, null);		View tab02 = mInflater.inflate(R.layout.tab02, null);		View tab03 = mInflater.inflate(R.layout.tab03, null);		View tab04 = mInflater.inflate(R.layout.tab04, null);		mViews.add(tab01);		mViews.add(tab02);		mViews.add(tab03);		mViews.add(tab04);		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();			}		};		mViewPager.setAdapter(mAdapter);	}	@Override	public void onClick(View v)	{		resetImg();		switch (v.getId())		{		case R.id.id_tab_weixin:			mViewPager.setCurrentItem(0);			mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);			break;		case R.id.id_tab_frd:			mViewPager.setCurrentItem(1);			mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);			break;		case R.id.id_tab_address:			mViewPager.setCurrentItem(2);			mAddressImg.setImageResource(R.drawable.tab_address_pressed);			break;		case R.id.id_tab_settings:			mViewPager.setCurrentItem(3);			mSettingImg.setImageResource(R.drawable.tab_settings_pressed);			break;		default:			break;		}	}	/**	 * 将全部的图片切换为暗色的	 */	private void resetImg()	{		mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);		mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);		mAddressImg.setImageResource(R.drawable.tab_address_normal);		mSettingImg.setImageResource(R.drawable.tab_settings_normal);	}}

不懂得能够看一下我之前写的ViewPager的文章。那个比較具体

ViewPager第一个课：http://blog.csdn.net/wei_chong_chong/article/details/50468832

第二课：http://blog.csdn.net/wei_chong_chong/article/details/50488328

可是第这样的方法有非常大缺点：

四个界面的代码都会集中在MainActivity中，显得mainActivity和冗长不宜于代码的改善后期的维护

另外一种实现方法

使用Fragment

实现思路：上面top标题。以下四个button，中间採用Fragment进行界面切换

參看我的博客Fragment基础：http://blog.csdn.net/wei_chong_chong/article/details/50935411

Fragment页面切换案例：http://blog.csdn.net/wei_chong_chong/article/details/50766663

这样的方法实现的仅仅能通过点击切换不同的界面，不能通过滑动切换界面

关键代码：使用Fragment须要注意，导入的包一定要一致。mainActivity.中导入的Fragment与Fragment界面导入的Fragment要一致例如以下，一定要是同一个包下的Fragment

import android.support.v4.app.Fragment;

package com.imooc.tab02;import android.os.Bundle;import android.support.v4.app.Fragment;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.ImageButton;import android.widget.LinearLayout;public class MainActivity extends FragmentActivity implements OnClickListener{	private LinearLayout mTabWeixin;	private LinearLayout mTabFrd;	private LinearLayout mTabAddress;	private LinearLayout mTabSettings;	private ImageButton mImgWeixin;	private ImageButton mImgFrd;	private ImageButton mImgAddress;	private ImageButton mImgSettings;	private Fragment mTab01;	private Fragment mTab02;	private Fragment mTab03;	private Fragment mTab04;	@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 initEvent()	{		mTabWeixin.setOnClickListener(this);		mTabFrd.setOnClickListener(this);		mTabAddress.setOnClickListener(this);		mTabSettings.setOnClickListener(this);	}	private void initView()	{		mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);		mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);		mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);		mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);		mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);		mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);		mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);		mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);	}	private void setSelect(int i)	{		FragmentManager fm = getSupportFragmentManager();		FragmentTransaction transaction = fm.beginTransaction();		hideFragment(transaction);		// 把图片设置为亮的		// 设置内容区域		switch (i)		{		case 0:			if (mTab01 == null)			{				mTab01 = new WeixinFragment();				transaction.add(R.id.id_content, mTab01);			} else			{				transaction.show(mTab01);			}			mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);			break;		case 1:			if (mTab02 == null)			{				mTab02 = new FrdFragment();transaction.add(R.id.id_content, mTab02);			} else			{				transaction.show(mTab02);							}			mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);			break;		case 2:			if (mTab03 == null)			{				mTab03 = new AddressFragment();				transaction.add(R.id.id_content, mTab03);			} else			{				transaction.show(mTab03);			}			mImgAddress.setImageResource(R.drawable.tab_address_pressed);			break;		case 3:			if (mTab04 == null)			{				mTab04 = new SettingFragment();				transaction.add(R.id.id_content, mTab04);			} else			{				transaction.show(mTab04);			}			mImgSettings.setImageResource(R.drawable.tab_settings_pressed);			break;		default:			break;		}		transaction.commit();	}	private void hideFragment(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);		}	}	@Override	public void onClick(View v)	{		resetImgs();		switch (v.getId())		{		case R.id.id_tab_weixin:			setSelect(0);			break;		case R.id.id_tab_frd:			setSelect(1);			break;		case R.id.id_tab_address:			setSelect(2);			break;		case R.id.id_tab_settings:			setSelect(3);			break;		default:			break;		}	}	/**	 * 切换图片至暗色	 */	private void resetImgs()	{		mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);		mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);		mImgAddress.setImageResource(R.drawable.tab_address_normal);		mImgSettings.setImageResource(R.drawable.tab_settings_normal);	}}

主界面

第三种实现方法

ViewPager+FragmentPagerAdapter

事实上这样的实现方式和第一种PageAdapter实现方式非常类似。

第一种实现方式PagerAdapter,每一个界面放的是一个View

private List
     
       mViews = new ArrayList
      
       ();

而FragmentPagerAdapter实现每一个界面放的是一个Fragment界面

private List
     
       mFragments;

Fragment作为内容布局优势：实现代码的分离。易于代码的维护

ViewPager能够实现滑动，两者结合就是FragmentPagerAdapter

package com.imooc.tab03;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.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout;public class MainActivity extends FragmentActivity implements OnClickListener{	private ViewPager mViewPager;	private FragmentPagerAdapter mAdapter;	private List
     
       mFragments;	private LinearLayout mTabWeixin;	private LinearLayout mTabFrd;	private LinearLayout mTabAddress;	private LinearLayout mTabSettings;	private ImageButton mImgWeixin;	private ImageButton mImgFrd;	private ImageButton mImgAddress;	private ImageButton mImgSettings;	@Override	protected void onCreate(Bundle savedInstanceState)	{		super.onCreate(savedInstanceState);		requestWindowFeature(Window.FEATURE_NO_TITLE);		setContentView(R.layout.activity_main);		initView();		initEvent();				setSelect(1);	}	private void initEvent()	{		mTabWeixin.setOnClickListener(this);		mTabFrd.setOnClickListener(this);		mTabAddress.setOnClickListener(this);		mTabSettings.setOnClickListener(this);	}	private void initView()	{		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);		mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);		mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);		mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);		mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);		mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);		mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);		mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);		mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);		mFragments = new ArrayList
      
       ();		Fragment mTab01 = new WeixinFragment();		Fragment mTab02 = new FrdFragment();		Fragment mTab03 = new AddressFragment();		Fragment mTab04 = new SettingFragment();		mFragments.add(mTab01);		mFragments.add(mTab02);		mFragments.add(mTab03);		mFragments.add(mTab04);		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()		{						@Override			public void onPageSelected(int arg0)			{				int currentItem = mViewPager.getCurrentItem();				setTab(currentItem);			}						@Override			public void onPageScrolled(int arg0, float arg1, int arg2)			{				// TODO Auto-generated method stub							}						@Override			public void onPageScrollStateChanged(int arg0)			{				// TODO Auto-generated method stub							}		});	}	@Override	public void onClick(View v)	{		switch (v.getId())		{		case R.id.id_tab_weixin:			setSelect(0);			break;		case R.id.id_tab_frd:			setSelect(1);			break;		case R.id.id_tab_address:			setSelect(2);			break;		case R.id.id_tab_settings:			setSelect(3);			break;		default:			break;		}	}	private void setSelect(int i)	{		setTab(i);		mViewPager.setCurrentItem(i);	}	private void setTab(int i)	{		resetImgs();		// 设置图片为亮色		// 切换内容区域		switch (i)		{		case 0:			mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);			break;		case 1:			mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);			break;		case 2:			mImgAddress.setImageResource(R.drawable.tab_address_pressed);			break;		case 3:			mImgSettings.setImageResource(R.drawable.tab_settings_pressed);			break;		}	}	/**	 * 切换图片至暗色	 */	private void resetImgs()	{		mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);		mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);		mImgAddress.setImageResource(R.drawable.tab_address_normal);		mImgSettings.setImageResource(R.drawable.tab_settings_normal);	}}

第四种实现方式：

使用第三方的ViewPagerIndicator实现指示器+Viewpager FragmentAdapter

这里临时不写了，以后有机会再补充

你可能感兴趣的文章