三种实现Android主界面Tab的方式

转载于:https://www.cnblogs.com/caobotao/p/5103673.html

在平时的Android开发中，我们经常会使用Tab来进行主界面的布局。由于手机屏幕尺寸的限制，合理使用Tab可以极大的利用屏幕资源，给用户带来良好的体验。学会Tab的使用方法已经成为学习Android开发必不可少的技能了。我们经常使用的微信、QQ就是使用Tab的方式进行主界面的布局的。

下面我们通过三种方式实现旧版的微信主界面以演示Tab的使用方式。

最终效果：

第一种：单纯使用ViewPager

MainActivity.java

public class MainActivity extends Activity implements OnClickListener {//声明ViewPagerprivate ViewPager mViewpager;//声明四个Tabprivate LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSetting;//声明四个ImageButtonprivate ImageButton mWeixinImg;private ImageButton mFrdImg;private ImageButton mAddressImg;private ImageButton mSettingImg;//声明ViewPager的适配器private PagerAdapter mAdpater;//用于装载四个Tab的Listprivate List<View> mTabs = new ArrayList<View>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//去掉TitleBarrequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initViews();//初始化控件initDatas();//初始化数据initEvents();//初始化事件}private void initEvents() {//设置四个Tab的点击事件mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSetting.setOnClickListener(this);//添加ViewPager的切换Tab的监听事件mViewpager.addOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {//获取ViewPager的当前Tabint currentItem = mViewpager.getCurrentItem();//将所以的ImageButton设置成灰色resetImgs();//将当前Tab对应的ImageButton设置成绿色switch (currentItem) {case 0:mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);break;case 1:mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);break;case 2:mAddressImg.setImageResource(R.mipmap.tab_address_pressed);break;case 3:mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);break;}}@Overridepublic void onPageScrollStateChanged(int state) {}});}private void initDatas() {//初始化ViewPager的适配器mAdpater = new PagerAdapter() {@Overridepublic int getCount() {return mTabs.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {View view = mTabs.get(position);container.addView(view);return view;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mTabs.get(position));}};//设置ViewPager的适配器mViewpager.setAdapter(mAdpater);}//初始化控件private void initViews() {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);mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);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_setting_img);//获取到四个TabLayoutInflater inflater = LayoutInflater.from(this);View tab1 = inflater.inflate(R.layout.tab1, null);View tab2 = inflater.inflate(R.layout.tab2, null);View tab3 = inflater.inflate(R.layout.tab3, null);View tab4 = inflater.inflate(R.layout.tab4, null);//将四个Tab添加到集合中mTabs.add(tab1);mTabs.add(tab2);mTabs.add(tab3);mTabs.add(tab4);}@Overridepublic void onClick(View v) {//先将四个ImageButton都设置成灰色resetImgs();switch (v.getId()) {case R.id.id_tab_weixin://设置viewPager的当前TabmViewpager.setCurrentItem(0);//将当前Tab对应的ImageButton设置成绿色mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);break;case R.id.id_tab_frd:mViewpager.setCurrentItem(1);mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);break;case R.id.id_tab_address:mViewpager.setCurrentItem(2);mAddressImg.setImageResource(R.mipmap.tab_address_pressed);break;case R.id.id_tab_setting:mViewpager.setCurrentItem(3);mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);break;}}//将四个ImageButton设置成灰色private void resetImgs () {mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal);mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal);mAddressImg.setImageResource(R.mipmap.tab_address_normal);mSettingImg.setImageResource(R.mipmap.tab_settings_normal);}
}

顶部布局文件

top.xm

四个Tab对应页面的布局文件

tabl1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Weixin Tab!"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Friend Tab!"/>
</LinearLayout>

tab3.xm

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Address Tab!"/>
</LinearLayout>

tab4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Setting Tab!"/>
</LinearLayout>

底部布局文件

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:gravity="center"android:background="@color/material_blue_grey_800"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:id="@+id/id_tab_weixin"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_weixin_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_weixin_pressed"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="微信"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_frd"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_frd_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_find_frd_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="朋友"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_address"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_address_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_address_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="通讯录"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_setting"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_setting_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_settings_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="设置"/></LinearLayout></LinearLayout>

主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><include layout="@layout/top"/><android.support.v4.view.ViewPagerandroid:id="@+id/id_viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></android.support.v4.view.ViewPager><include layout="@layout/bottom"/>
</LinearLayout>

完整源码 : 点击下载

单纯使用ViewPager的方式可以实现左右滑动切换页面和点击Tab切换页面的效果。但是大家发现，这种方式需要在Activity完成所有的代码实现，包括初始化Tab及其对应页面的初始化控件、数据、事件及业务逻辑的处理。这样会使得Activity看起来非常臃肿，进而造成代码的可读性和可维护性变得极差。

谷歌在Android 3.0时推出了Fragment。可以分别使用Fragment来管理每个Tab对应的页面的布局及功能的实现。然后将Fragment与Android关联，这样Android只需要管理Fragment就行了，起到了调度器的作用，不再关心每个Fragment里的内容及功能实现是什么。这样就极大的解放了Activity，使代码变得简单、易读。

下面我们通过使用Fragment的方式来实现Tab。

第二种：单纯使用Fragment

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener {//声明四个Tab的布局文件private LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSetting;//声明四个Tab的ImageButtonprivate ImageButton mWeixinImg;private ImageButton mFrdImg;private ImageButton mAddressImg;private ImageButton mSettingImg;//声明四个Tab分别对应的Fragmentprivate Fragment mFragWeinxin;private Fragment mFragFrd;private Fragment mFragAddress;private Fragment mFragSetting;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initViews();//初始化控件initEvents();//初始化事件selectTab(0);//默认选中第一个Tab}private void initEvents() {//初始化四个Tab的点击事件mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSetting.setOnClickListener(this);}private void initViews() {//初始化四个Tab的布局文件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_setting);//初始化四个ImageButtonmWeixinImg = (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_setting_img);}//处理Tab的点击事件@Overridepublic void onClick(View v) {//先将四个ImageButton置为灰色resetImgs();switch (v.getId()) {case R.id.id_tab_weixin:selectTab(0);//当点击的是微信的Tab就选中微信的Tabbreak;case R.id.id_tab_frd:selectTab(1);break;case R.id.id_tab_address:selectTab(2);break;case R.id.id_tab_setting:selectTab(3);break;}}//进行选中Tab的处理private void selectTab(int i) {//获取FragmentManager对象FragmentManager manager = getSupportFragmentManager();//获取FragmentTransaction对象FragmentTransaction transaction = manager.beginTransaction();//先隐藏所有的FragmenthideFragments(transaction);switch (i) {//当选中点击的是微信的Tab时case 0://设置微信的ImageButton为绿色mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);//如果微信对应的Fragment没有实例化，则进行实例化，并显示出来if (mFragWeinxin == null) {mFragWeinxin = new WeixinFragment();transaction.add(R.id.id_content, mFragWeinxin);} else {//如果微信对应的Fragment已经实例化，则直接显示出来transaction.show(mFragWeinxin);}break;case 1:mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);if (mFragFrd == null) {mFragFrd = new FrdFragment();transaction.add(R.id.id_content, mFragFrd);} else {transaction.show(mFragFrd);}break;case 2:mAddressImg.setImageResource(R.mipmap.tab_address_pressed);if (mFragAddress == null) {mFragAddress = new AddressFragment();transaction.add(R.id.id_content, mFragAddress);} else {transaction.show(mFragAddress);}break;case 3:mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);if (mFragSetting == null) {mFragSetting = new SettingFragment();transaction.add(R.id.id_content, mFragSetting);} else {transaction.show(mFragSetting);}break;}//不要忘记提交事务transaction.commit();}//将四个的Fragment隐藏private void hideFragments(FragmentTransaction transaction) {if (mFragWeinxin != null) {transaction.hide(mFragWeinxin);}if (mFragFrd != null) {transaction.hide(mFragFrd);}if (mFragAddress != null) {transaction.hide(mFragAddress);}if (mFragSetting != null) {transaction.hide(mFragSetting);}}//将四个ImageButton置为灰色private void resetImgs() {mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal);mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal);mAddressImg.setImageResource(R.mipmap.tab_address_normal);mSettingImg.setImageResource(R.mipmap.tab_settings_normal);}
}

“微信”、“朋友”、“通讯录”、“设置”所对应的Fragment

WeixinFragment.java

public class WeixinFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab1, container, false);return view;}
}

FrdFragmen.java

public class FrdFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab2, container, false);return view;}
}

AddressFragmen.java

public class AddressFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab3, container, false);return view;}
}

SettingFragment.java

public class SettingFragment extends Fragment{@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab4, container, false);return view;}
}

顶部布局文件

top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:background="@android:drawable/title_bar"android:gravity="center"android:layout_width="match_parent"android:layout_height="45dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="微信"android:textColor="#ffffff"android:textSize="20sp"android:textStyle="bold"/></LinearLayout>

四个Tab对应页面的布局文件

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Weixin Tab!"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Friend Tab!"/>
</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Address Tab!"/>
</LinearLayout>

tab4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Setting Tab!"/>
</LinearLayout>

底部布局文件

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:gravity="center"android:background="@color/material_blue_grey_800"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:id="@+id/id_tab_weixin"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_weixin_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_weixin_pressed"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="微信"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_frd"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_frd_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_find_frd_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="朋友"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_address"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_address_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_address_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="通讯录"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_setting"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_setting_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_settings_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="设置"/></LinearLayout></LinearLayout>

主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><include layout="@layout/top"/><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom"/>
</LinearLayout>

完整源码 : 点击下载

可以看出，使用Fragment实现了Activity与Tab对应的页面分离，特别是当Tab对应的页面的布局和逻辑比较复杂时更能体会到使用Fragment的好处。但是单纯使用Fragment只能通过点击Tab来切换页面，并不能实现左右滑动进行切换。

下面我们通过使用 ViewPager + Fragment 的方式实现Tab，这也是开发中使用比较广泛的一种方式。

第三种：使用 ViewPager + Fragment

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener {//声明ViewPagerprivate ViewPager mViewPager;//适配器private FragmentPagerAdapter mAdapter;//装载Fragment的集合private List<Fragment> mFragments;//四个Tab对应的布局private LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSetting;//四个Tab对应的ImageButtonprivate ImageButton mImgWeixin;private ImageButton mImgFrd;private ImageButton mImgAddress;private ImageButton mImgSetting;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initViews();//初始化控件initEvents();//初始化事件initDatas();//初始化数据}private void initDatas() {mFragments = new ArrayList<>();//将四个Fragment加入集合中mFragments.add(new WeixinFragment());mFragments.add(new FrdFragment());mFragments.add(new AddressFragment());mFragments.add(new SettingFragment());//初始化适配器mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int position) {//从集合中获取对应位置的Fragmentreturn mFragments.get(position);}@Overridepublic int getCount() {//获取集合中Fragment的总数return mFragments.size();}};//不要忘记设置ViewPager的适配器mViewPager.setAdapter(mAdapter);//设置ViewPager的切换监听mViewPager.addOnPageChangeListener(new OnPageChangeListener() {@Override//页面滚动事件public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}//页面选中事件@Overridepublic void onPageSelected(int position) {//设置position对应的集合中的FragmentmViewPager.setCurrentItem(position);resetImgs();selectTab(position);}@Override//页面滚动状态改变事件public void onPageScrollStateChanged(int state) {}});}private void initEvents() {//设置四个Tab的点击事件mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSetting.setOnClickListener(this);}//初始化控件private void initViews() {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);mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);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);mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);}@Overridepublic void onClick(View v) {//先将四个ImageButton置为灰色resetImgs();//根据点击的Tab切换不同的页面及设置对应的ImageButton为绿色switch (v.getId()) {case R.id.id_tab_weixin:selectTab(0);break;case R.id.id_tab_frd:selectTab(1);break;case R.id.id_tab_address:selectTab(2);break;case R.id.id_tab_setting:selectTab(3);break;}}private void selectTab(int i) {//根据点击的Tab设置对应的ImageButton为绿色switch (i) {case 0:mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed);break;case 1:mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed);break;case 2:mImgAddress.setImageResource(R.mipmap.tab_address_pressed);break;case 3:mImgSetting.setImageResource(R.mipmap.tab_settings_pressed);break;}//设置当前点击的Tab所对应的页面mViewPager.setCurrentItem(i);}//将四个ImageButton设置为灰色private void resetImgs() {mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal);mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal);mImgAddress.setImageResource(R.mipmap.tab_address_normal);mImgSetting.setImageResource(R.mipmap.tab_settings_normal);}
}

“微信”、“朋友”、“通讯录”、“设置”所对应的Fragment

WeixinFragment.java

public class WeixinFragment extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab1, container, false);return view;}
}

FrdFragment.java

public class FrdFragment extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab2, container, false);return view;}
}

AddressFragment.java

public class AddressFragment extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab3, container, false);return view;}
}

SettingFragment.java

public class SettingFragment extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.tab4, container, false);return view;}
}

顶部布局文件

top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:background="@android:drawable/title_bar"android:gravity="center"android:layout_width="match_parent"android:layout_height="45dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="微信"android:textColor="#ffffff"android:textSize="20sp"android:textStyle="bold"/></LinearLayout>

四个Tab对应页面的布局文件

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Weixin Tab!"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Friend Tab!"/>
</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Address Tab!"/>
</LinearLayout>

tab4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"android:text="The Setting Tab!"/>
</LinearLayout>

底部布局文件

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:gravity="center"android:background="@color/material_blue_grey_800"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:id="@+id/id_tab_weixin"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_weixin_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_weixin_pressed"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="微信"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_frd"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_frd_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_find_frd_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="朋友"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_address"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_address_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_address_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="通讯录"/></LinearLayout><LinearLayoutandroid:id="@+id/id_tab_setting"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_setting_img"android:clickable="false"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/tab_settings_normal"android:background="#00000000"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffffff"android:text="设置"/></LinearLayout></LinearLayout>

主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><include layout="@layout/top"/><android.support.v4.view.ViewPagerandroid:id="@+id/id_viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></android.support.v4.view.ViewPager><include layout="@layout/bottom"/>
</LinearLayout>

完整源码 :点击下载

使用 ViewPager + Fragment 的方式综合了使用ViewPager和使用Fragment的优势，即：既能使用Fragment管理Tab对应页面的布局及业务逻辑的实现，使得Activity与Tab对应的页面分离，又能使用ViewPager实现左右滑动切换页面的效果。这种方式需要为ViewPager设置FragmentPagerAdapter适配器，关于适配器的知识可参考我之前写的一篇文章：Android必学之数据适配器BaseAdapter

作者：caobotao

出处： http://www.cnblogs.com/caobotao/p/5103673.html

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

三种实现Android主界面Tab的方式相关推荐

Kotlin项目实战之手机影音---主界面tab切换、home界面适配、获得首页网络数据
主界面tab切换: 添加点击事件: 接下来需要处理一下主界面TAB的切换了,这里先添加BottomBar的监听事件: class MainActivity : BaseActivity(), Tool ...
android+主界面所有应用程序图标添加统一背景主题,Android 4.0替Launcher主界面所有应用程序图标添加统一背景主题...
当前位置:我的异常网» Android » Android 4.0替Launcher主界面所有应用程序图标添加 Android 4.0替Launcher主界面所有应用程序图标添加统一背景主题 www. ...
在.NET Core中三种实现“可插拔”AOP编程方式（附源码）
一看标题肯定会联想到使用动态编织的方式实现AOP编程,不过这不是作者本文讨论的重点. 本文讨论另外三种在netcore中可实现的方式,Filter(过滤器,严格意义上它算是AOP方式),Dynamic ...
1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
1.请介绍下Android中常用的5种布局 Android中常用的5种布局分别为:FrameLaout(框架布局).LinearLayout(线性布局).AbsoluteLayout(绝对布局).Re ...
多种多样的App主界面Tab实现方法（二）：Fragment
hyman老师慕课网视频连接 http://www.imooc.com/learn/264 上一篇博文说了利用ViewPager实现Tab的方法,每个tab页面的内容只有一个TextView,但是如 ...
java光标移动函数_文件内光标的移动函数基础定义函数的三种形式函数的返回值调用方式...
# with open(r'a.txt', 'r', encoding='utf-8')as f: # data1=f.read() # print('>1>:',data1) # pri ...
苹果手机滑动光标怎么设置_iPhone手机三种方便又准确的移动光标方式
相比电脑的鼠标和触控板,只有一块屏幕的iPhone手机移动光标就没有那么方便.而手机又是我们现在常用的一个主力设备,甚至我们使用手机的时间已经超过电脑的时间,那么我们怎么让iPhone手机更好的移动光 ...
三种保证URL地址可信的加密方式
近日接到一个需求,要求一台资源服务器不仅在可以暴露在公网环境下的同时,还要保证只接受并处理可信的http访问请求. 需求场景如图: 为了访问资源文件,用户需要首先访问某一台Frontend Serve ...
C++之string类（2）：三种访问遍历string类对象的方式
目录前言 1. 下标+[] 1.1 代码实现 1.2 细节解析 1.3 题目应用 2. 迭代器 2.1 begin+end 正向迭代器 2.1.1 代码实现 2.1.2 细节解析 2.2 反向迭代器 ...

三种实现Android主界面Tab的方式

三种实现Android主界面Tab的方式相关推荐

最新文章

热门文章