Android中Tab类型主界面大总结一共5种方式

转载的2篇文章出处:1、http://blog.csdn.net/lmj623565791/article/details/24740977

                                2、http://www.jianshu.com/p/adf7a994613a

Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结。目前写了:

1、传统的ViewPager实现

2、FragmentManager+Fragment实现

3、ViewPager+FragmentPagerAdapter实现

4、TabPageIndicator+ViewPager+FragmentPagerAdapter


1、传统的ViewPager实现

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

效果图:


代码:

[java]  view plain  copy
 
  1. package com.example.mainframework02;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.support.v4.view.PagerAdapter;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  11. import android.view.LayoutInflater;  
  12. import android.view.View;  
  13. import android.view.ViewGroup;  
  14. import android.widget.ImageButton;  
  15. import android.widget.ImageView;  
  16. import android.widget.LinearLayout;  
  17.   
  18. public class TraditionalViewPagerAcvitity extends Activity  
  19. {  
  20.   
  21.     /** 
  22.      * ViewPager 
  23.      */  
  24.     private ViewPager mViewPager;  
  25.     /** 
  26.      * ViewPager的适配器 
  27.      */  
  28.     private PagerAdapter mAdapter;  
  29.     private List mViews;  
  30.     private LayoutInflater mInflater;  
  31.       
  32.     private int currentIndex;  
  33.   
  34.     /** 
  35.      * 底部四个按钮 
  36.      */  
  37.     private LinearLayout mTabBtnWeixin;  
  38.     private LinearLayout mTabBtnFrd;  
  39.     private LinearLayout mTabBtnAddress;  
  40.     private LinearLayout mTabBtnSettings;  
  41.   
  42.     @Override  
  43.     protected void onCreate(Bundle savedInstanceState)  
  44.     {  
  45.         super.onCreate(savedInstanceState);  
  46.         setContentView(R.layout.activity_main);  
  47.         mInflater = LayoutInflater.from(this);  
  48.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  49.           
  50.         /** 
  51.          * 初始化View 
  52.          */  
  53.         initView();  
  54.           
  55.         mViewPager.setAdapter(mAdapter);  
  56.   
  57.         mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
  58.         {  
  59.   
  60.             @Override  
  61.             public void onPageSelected(int position)  
  62.             {  
  63.                 resetTabBtn();  
  64.                 switch (position)  
  65.                 {  
  66.                 case 0:  
  67.                     ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
  68.                             .setImageResource(R.drawable.tab_weixin_pressed);  
  69.                     break;  
  70.                 case 1:  
  71.                     ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
  72.                             .setImageResource(R.drawable.tab_find_frd_pressed);  
  73.                     break;  
  74.                 case 2:  
  75.                     ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
  76.                             .setImageResource(R.drawable.tab_address_pressed);  
  77.                     break;  
  78.                 case 3:  
  79.                     ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
  80.                             .setImageResource(R.drawable.tab_settings_pressed);  
  81.                     break;  
  82.                 }  
  83.   
  84.                 currentIndex = position;  
  85.             }  
  86.   
  87.             @Override  
  88.             public void onPageScrolled(int arg0, float arg1, int arg2)  
  89.             {  
  90.   
  91.             }  
  92.   
  93.             @Override  
  94.             public void onPageScrollStateChanged(int arg0)  
  95.             {  
  96.             }  
  97.         });  
  98.   
  99.     }  
  100.   
  101.     protected void resetTabBtn()  
  102.     {  
  103.         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
  104.                 .setImageResource(R.drawable.tab_weixin_normal);  
  105.         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
  106.                 .setImageResource(R.drawable.tab_find_frd_normal);  
  107.         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
  108.                 .setImageResource(R.drawable.tab_address_normal);  
  109.         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
  110.                 .setImageResource(R.drawable.tab_settings_normal);  
  111.     }  
  112.   
  113.     private void initView()  
  114.     {  
  115.   
  116.         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
  117.         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
  118.         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
  119.         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
  120.   
  121.         mViews = new ArrayList();  
  122.         View first = mInflater.inflate(R.layout.main_tab_01, null);  
  123.         View second = mInflater.inflate(R.layout.main_tab_02, null);  
  124.         View third = mInflater.inflate(R.layout.main_tab_03, null);  
  125.         View fourth = mInflater.inflate(R.layout.main_tab_04, null);  
  126.         mViews.add(first);  
  127.         mViews.add(second);  
  128.         mViews.add(third);  
  129.         mViews.add(fourth);  
  130.   
  131.         mAdapter = new PagerAdapter()  
  132.         {  
  133.             @Override  
  134.             public void destroyItem(ViewGroup container, int position, Object object)  
  135.             {  
  136.                 container.removeView(mViews.get(position));  
  137.             }  
  138.   
  139.             @Override  
  140.             public Object instantiateItem(ViewGroup container, int position)  
  141.             {  
  142.                 View view = mViews.get(position);  
  143.                 container.addView(view);  
  144.                 return view;  
  145.             }  
  146.   
  147.             @Override  
  148.             public boolean isViewFromObject(View arg0, Object arg1)  
  149.             {  
  150.                 return arg0 == arg1;  
  151.             }  
  152.   
  153.             @Override  
  154.             public int getCount()  
  155.             {  
  156.                 return mViews.size();  
  157.             }  
  158.         };  
  159.     }  
  160.   
  161. }  
评价:所有的代码都集中在一个Activity中,显得代码比较乱。

2、FragmentManager+Fragment实现

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

效果图:


代码:

主Activity

[java]  view plain  copy
 
  1. package com.example.mainframework02.fragment;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.app.Activity;  
  5. import android.app.FragmentManager;  
  6. import android.app.FragmentTransaction;  
  7. import android.os.Bundle;  
  8. import android.view.View;  
  9. import android.view.View.OnClickListener;  
  10. import android.widget.ImageButton;  
  11. import android.widget.LinearLayout;  
  12.   
  13. import com.example.mainframework02.R;  
  14.   
  15. public class FragmentMainActivity extends Activity implements OnClickListener  
  16. {  
  17.     private MainTab02 mTab02;  
  18.     private MainTab01 mTab01;  
  19.     private MainTab03 mTab03;  
  20.     private MainTab04 mTab04;  
  21.   
  22.     /** 
  23.      * 底部四个按钮 
  24.      */  
  25.     private LinearLayout mTabBtnWeixin;  
  26.     private LinearLayout mTabBtnFrd;  
  27.     private LinearLayout mTabBtnAddress;  
  28.     private LinearLayout mTabBtnSettings;  
  29.     /** 
  30.      * 用于对Fragment进行管理 
  31.      */  
  32.     private FragmentManager fragmentManager;  
  33.   
  34.     @SuppressLint("NewApi")  
  35.     @Override  
  36.     protected void onCreate(Bundle savedInstanceState)  
  37.     {  
  38.         super.onCreate(savedInstanceState);  
  39.         setContentView(R.layout.fragment_main);  
  40.         initViews();  
  41.         fragmentManager = getFragmentManager();  
  42.         setTabSelection(0);  
  43.     }  
  44.   
  45.       
  46.   
  47.     private void initViews()  
  48.     {  
  49.   
  50.         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
  51.         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
  52.         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
  53.         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
  54.   
  55.         mTabBtnWeixin.setOnClickListener(this);  
  56.         mTabBtnFrd.setOnClickListener(this);  
  57.         mTabBtnAddress.setOnClickListener(this);  
  58.         mTabBtnSettings.setOnClickListener(this);  
  59.     }  
  60.   
  61.     @Override  
  62.     public void onClick(View v)  
  63.     {  
  64.         switch (v.getId())  
  65.         {  
  66.         case R.id.id_tab_bottom_weixin:  
  67.             setTabSelection(0);  
  68.             break;  
  69.         case R.id.id_tab_bottom_friend:  
  70.             setTabSelection(1);  
  71.             break;  
  72.         case R.id.id_tab_bottom_contact:  
  73.             setTabSelection(2);  
  74.             break;  
  75.         case R.id.id_tab_bottom_setting:  
  76.             setTabSelection(3);  
  77.             break;  
  78.   
  79.         default:  
  80.             break;  
  81.         }  
  82.     }  
  83.   
  84.     /** 
  85.      * 根据传入的index参数来设置选中的tab页。 
  86.      *  
  87.      */  
  88.     @SuppressLint("NewApi")  
  89.     private void setTabSelection(int index)  
  90.     {  
  91.         // 重置按钮  
  92.         resetBtn();  
  93.         // 开启一个Fragment事务  
  94.         FragmentTransaction transaction = fragmentManager.beginTransaction();  
  95.         // 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况  
  96.         hideFragments(transaction);  
  97.         switch (index)  
  98.         {  
  99.         case 0:  
  100.             // 当点击了消息tab时,改变控件的图片和文字颜色  
  101.             ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
  102.                     .setImageResource(R.drawable.tab_weixin_pressed);  
  103.             if (mTab01 == null)  
  104.             {  
  105.                 // 如果MessageFragment为空,则创建一个并添加到界面上  
  106.                 mTab01 = new MainTab01();  
  107.                 transaction.add(R.id.id_content, mTab01);  
  108.             } else  
  109.             {  
  110.                 // 如果MessageFragment不为空,则直接将它显示出来  
  111.                 transaction.show(mTab01);  
  112.             }  
  113.             break;  
  114.         case 1:  
  115.             // 当点击了消息tab时,改变控件的图片和文字颜色  
  116.             ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
  117.                     .setImageResource(R.drawable.tab_find_frd_pressed);  
  118.             if (mTab02 == null)  
  119.             {  
  120.                 // 如果MessageFragment为空,则创建一个并添加到界面上  
  121.                 mTab02 = new MainTab02();  
  122.                 transaction.add(R.id.id_content, mTab02);  
  123.             } else  
  124.             {  
  125.                 // 如果MessageFragment不为空,则直接将它显示出来  
  126.                 transaction.show(mTab02);  
  127.             }  
  128.             break;  
  129.         case 2:  
  130.             // 当点击了动态tab时,改变控件的图片和文字颜色  
  131.             ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
  132.                     .setImageResource(R.drawable.tab_address_pressed);  
  133.             if (mTab03 == null)  
  134.             {  
  135.                 // 如果NewsFragment为空,则创建一个并添加到界面上  
  136.                 mTab03 = new MainTab03();  
  137.                 transaction.add(R.id.id_content, mTab03);  
  138.             } else  
  139.             {  
  140.                 // 如果NewsFragment不为空,则直接将它显示出来  
  141.                 transaction.show(mTab03);  
  142.             }  
  143.             break;  
  144.         case 3:  
  145.             // 当点击了设置tab时,改变控件的图片和文字颜色  
  146.             ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
  147.                     .setImageResource(R.drawable.tab_settings_pressed);  
  148.             if (mTab04 == null)  
  149.             {  
  150.                 // 如果SettingFragment为空,则创建一个并添加到界面上  
  151.                 mTab04 = new MainTab04();  
  152.                 transaction.add(R.id.id_content, mTab04);  
  153.             } else  
  154.             {  
  155.                 // 如果SettingFragment不为空,则直接将它显示出来  
  156.                 transaction.show(mTab04);  
  157.             }  
  158.             break;  
  159.         }  
  160.         transaction.commit();  
  161.     }  
  162.   
  163.     /** 
  164.      * 清除掉所有的选中状态。 
  165.      */  
  166.     private void resetBtn()  
  167.     {  
  168.         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
  169.                 .setImageResource(R.drawable.tab_weixin_normal);  
  170.         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
  171.                 .setImageResource(R.drawable.tab_find_frd_normal);  
  172.         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
  173.                 .setImageResource(R.drawable.tab_address_normal);  
  174.         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
  175.                 .setImageResource(R.drawable.tab_settings_normal);  
  176.     }  
  177.   
  178.     /** 
  179.      * 将所有的Fragment都置为隐藏状态。 
  180.      *  
  181.      * @param transaction 
  182.      *            用于对Fragment执行操作的事务 
  183.      */  
  184.     @SuppressLint("NewApi")  
  185.     private void hideFragments(FragmentTransaction transaction)  
  186.     {  
  187.         if (mTab01 != null)  
  188.         {  
  189.             transaction.hide(mTab01);  
  190.         }  
  191.         if (mTab02 != null)  
  192.         {  
  193.             transaction.hide(mTab02);  
  194.         }  
  195.         if (mTab03 != null)  
  196.         {  
  197.             transaction.hide(mTab03);  
  198.         }  
  199.         if (mTab04 != null)  
  200.         {  
  201.             transaction.hide(mTab04);  
  202.         }  
  203.           
  204.     }  
  205.   
  206. }  

各个TabFragment,一共四个TabFragment,下面贴出两个,基本都一样。

[java]  view plain  copy
 
  1. package com.example.mainframework02.fragment;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.app.Fragment;  
  5. import android.os.Bundle;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9.   
  10. @SuppressLint("NewApi")  
  11. public class MainTab01 extends Fragment  
  12. {  
  13.   
  14.     @Override  
  15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  16.     {  
  17.         return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);  
  18.   
  19.     }  
  20.   
  21. }  

[java]  view plain  copy
 
  1. package com.example.mainframework02.fragment;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.app.Fragment;  
  5. import android.os.Bundle;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9.   
  10. import com.example.mainframework02.R;  
  11.   
  12. @SuppressLint("NewApi")  
  13. public class MainTab02 extends Fragment  
  14. {  
  15.   
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  17.     {  
  18.         return inflater.inflate(R.layout.main_tab_02, container, false);  
  19.   
  20.     }  
  21.   
  22. }  
评价:每个Fragment中的控件的处理,都是独立到各自的类中,相对来说主Activity简化了不少,可惜没有左右滑动的效果了。


3、ViewPager+Fragment实现

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

效果图:


代码:

主Activity

[java]  view plain  copy
 
  1. package com.example.mainframework03;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentActivity;  
  9. import android.support.v4.app.FragmentPagerAdapter;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  12. import android.widget.ImageButton;  
  13. import android.widget.LinearLayout;  
  14.   
  15. public class MainActivity extends FragmentActivity  
  16. {  
  17.   
  18.     private ViewPager mViewPager;  
  19.     private FragmentPagerAdapter mAdapter;  
  20.     private List mFragments = new ArrayList();  
  21.       
  22.       
  23.     /** 
  24.      * 底部四个按钮 
  25.      */  
  26.     private LinearLayout mTabBtnWeixin;  
  27.     private LinearLayout mTabBtnFrd;  
  28.     private LinearLayout mTabBtnAddress;  
  29.     private LinearLayout mTabBtnSettings;  
  30.   
  31.   
  32.     @Override  
  33.     protected void onCreate(Bundle savedInstanceState)  
  34.     {  
  35.         super.onCreate(savedInstanceState);  
  36.         setContentView(R.layout.activity_main);  
  37.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  38.   
  39.           
  40.         initView();  
  41.           
  42.           
  43.   
  44.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
  45.         {  
  46.   
  47.             @Override  
  48.             public int getCount()  
  49.             {  
  50.                 return mFragments.size();  
  51.             }  
  52.   
  53.             @Override  
  54.             public Fragment getItem(int arg0)  
  55.             {  
  56.                 return mFragments.get(arg0);  
  57.             }  
  58.         };  
  59.           
  60.         mViewPager.setAdapter(mAdapter);  
  61.           
  62.           
  63.         mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
  64.         {  
  65.   
  66.             private int currentIndex;  
  67.   
  68.             @Override  
  69.             public void onPageSelected(int position)  
  70.             {  
  71.                 resetTabBtn();  
  72.                 switch (position)  
  73.                 {  
  74.                 case 0:  
  75.                     ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
  76.                             .setImageResource(R.drawable.tab_weixin_pressed);  
  77.                     break;  
  78.                 case 1:  
  79.                     ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
  80.                             .setImageResource(R.drawable.tab_find_frd_pressed);  
  81.                     break;  
  82.                 case 2:  
  83.                     ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
  84.                             .setImageResource(R.drawable.tab_address_pressed);  
  85.                     break;  
  86.                 case 3:  
  87.                     ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
  88.                             .setImageResource(R.drawable.tab_settings_pressed);  
  89.                     break;  
  90.                 }  
  91.   
  92.                 currentIndex = position;  
  93.             }  
  94.   
  95.             @Override  
  96.             public void onPageScrolled(int arg0, float arg1, int arg2)  
  97.             {  
  98.   
  99.             }  
  100.   
  101.             @Override  
  102.             public void onPageScrollStateChanged(int arg0)  
  103.             {  
  104.             }  
  105.         });  
  106.   
  107.     }  
  108.       
  109.     protected void resetTabBtn()  
  110.     {  
  111.         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
  112.                 .setImageResource(R.drawable.tab_weixin_normal);  
  113.         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
  114.                 .setImageResource(R.drawable.tab_find_frd_normal);  
  115.         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
  116.                 .setImageResource(R.drawable.tab_address_normal);  
  117.         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
  118.                 .setImageResource(R.drawable.tab_settings_normal);  
  119.     }  
  120.   
  121.     private void initView()  
  122.     {  
  123.   
  124.         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
  125.         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
  126.         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
  127.         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
  128.   
  129.         MainTab01 tab01 = new MainTab01();  
  130.         MainTab02 tab02 = new MainTab02();  
  131.         MainTab03 tab03 = new MainTab03();  
  132.         MainTab04 tab04 = new MainTab04();  
  133.         mFragments.add(tab01);  
  134.         mFragments.add(tab02);  
  135.         mFragments.add(tab03);  
  136.         mFragments.add(tab04);  
  137.     }  
  138. }  

还有4个TabFragment,下面贴一个,四个基本一样

[java]  view plain  copy
 
  1. package com.example.mainframework03;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class MainTab01 extends Fragment  
  10. {  
  11.   
  12.     @Override  
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  14.     {  
  15.         return  inflater.inflate(R.layout.main_tab_01, container, false);  
  16.       
  17.     }  
  18.   
  19. }  
评价:实现效果和第一种效果一模一样,每个Fragment独自处理自己内部的逻辑,代码整洁很多,并且支持左右滑动。感觉是第一种和第二种的结合版本。


4、TabPageIndicator+ViewPager+FragmentPagerAdapter

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

效果图:


参考Android 使用Fragment,ViewPagerIndicator 制作csdn app主要框架


好了,就总结了这么多,肯定还有很多别的实现方式,大家可以留言,有时间会继续完善这篇总结的。



第一种和第二种的源码

第三种方式的源码

本来想一起,无奈,一会v4.Fragment一会Fragment就分开了,嘿嘿,各位留个言,赞一个,算是对我的支持。
5、TabLayout+ViewPager+FragmentPagerAdapter

  在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐。然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多是把以前的一些第三方开源库官方化,实现起来更为简便,简直是开发者的福音。其中的TabLayout控件让我想到了app底部的tab布局,而且TabLayout用法更加简单,为何不试试用TabLayout实现简单的实现呢?好了,话不多说,先看看效果:

Android中Tab类型主界面大总结一共5种方式_第1张图片
底部tab布局.png

是不是和以前的方法实现的效果一样呢?下面我们来看看怎么简单实现。

过程

  因为TabLayout和ViewPager分别是属于design和v4包下的,所以我们先在app的build.gradle中添加:

compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'

然后在主布局文件activity_main.xml中添加布局控件:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbars="none">
    android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FF4081"
        app:tabTextColor="#000">
    android.support.design.widget.TabLayout>

LinearLayout>

  就仅一个ViewPager和TabLayout就可以实现,是不是比以前的方法繁琐的布局简便很多?上面TabLayout中app:tabIndicatorHeight="0dp"是为了不显示tab底部的横线,app:tabMode="fixed"是让底部tab布局不可滑动。

接下来就和往常一样在MainActivity.java中初始化布局,设置适配器:

    private void initViews() {

        mTablayout= (TabLayout) findViewById(R.id.tabLayout);
        mViewPager= (ViewPager) findViewById(R.id.viewPager);

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};

            @Override
            public Fragment getItem(int position) {
                if (position == 1) {
                    return new TwoFragment();
                } else if (position == 2) {
                    return new ThreeFragment();
                }else if (position==3){
                    return new FourFragment();
                }
                return new OneFragment();
            }

            @Override
            public int getCount() {
                return mTitles.length;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }

        });

        mTablayout.setupWithViewPager(mViewPager);

        one = mTablayout.getTabAt(0);
        two = mTablayout.getTabAt(1);
        three = mTablayout.getTabAt(2);
        four = mTablayout.getTabAt(3);

        one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
        two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
        three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
        four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

    }

上面要注意的地方是别忘了在FragmentPagerAdapter中手动添加:

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }

不然不显示底部的文字。
mTablayout.setupWithViewPager(mViewPager);将TabLayout和ViewPager关联起来。
one = mTablayout.getTabAt(0);获取底部单个tab,用来添加初始化图片,注意下标都是从0开始的。

初始化监听事件

    private void initEvents() {

        mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (tab == mTablayout.getTabAt(0)) {
                    one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(0);
                } else if (tab == mTablayout.getTabAt(1)) {
                    two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(1);
                } else if (tab == mTablayout.getTabAt(2)) {
                    three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(2);
                }else if (tab == mTablayout.getTabAt(3)){
                    four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(3);
                }

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if (tab == mTablayout.getTabAt(0)) {
                    one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                } else if (tab == mTablayout.getTabAt(1)) {
                    two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                } else if (tab == mTablayout.getTabAt(2)) {
                    three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                }else if (tab == mTablayout.getTabAt(3)){
                    four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

  在onTabSelected中设置选中tab时切换的图片,onTabUnselected中设置没有被选中时的图片。别忘了mViewPager.setCurrentItem(0);这句,这是用来点击tab时切换ViewPager,如果不加这一句的话滑动ViewPager底部tab可以切换,但是点击tab而ViewPager不会切换。

Fragment中的简单布局

fragment_one.xml

<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="wrap_content"
        android:layout_height="wrap_content"
        android:text="唐僧"
        android:layout_marginTop="100dp"
        android:layout_gravity="center"
        android:textSize="30sp"/>

LinearLayout>
OneFragment.java
public class OneFragment extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_one,container,false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

MainActivity.java完整代码:

public class MainActivity extends AppCompatActivity {

    private TabLayout mTablayout;
    private ViewPager mViewPager;

    private TabLayout.Tab one;
    private TabLayout.Tab two;
    private TabLayout.Tab three;
    private TabLayout.Tab four;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initEvents();
    }

    private void initEvents() {

        mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (tab == mTablayout.getTabAt(0)) {
                    one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(0);
                } else if (tab == mTablayout.getTabAt(1)) {
                    two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(1);
                } else if (tab == mTablayout.getTabAt(2)) {
                    three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(2);
                }else if (tab == mTablayout.getTabAt(3)){
                    four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
                    mViewPager.setCurrentItem(3);
                }

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if (tab == mTablayout.getTabAt(0)) {
                    one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                } else if (tab == mTablayout.getTabAt(1)) {
                    two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                } else if (tab == mTablayout.getTabAt(2)) {
                    three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                }else if (tab == mTablayout.getTabAt(3)){
                    four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

    private void initViews() {

        mTablayout= (TabLayout) findViewById(R.id.tabLayout);
        mViewPager= (ViewPager) findViewById(R.id.viewPager);

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};

            @Override
            public Fragment getItem(int position) {
                if (position == 1) {
                    return new TwoFragment();
                } else if (position == 2) {
                    return new ThreeFragment();
                }else if (position==3){
                    return new FourFragment();
                }
                return new OneFragment();
            }

            @Override
            public int getCount() {
                return mTitles.length;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }

        });

        mTablayout.setupWithViewPager(mViewPager);

        one = mTablayout.getTabAt(0);
        two = mTablayout.getTabAt(1);
        three = mTablayout.getTabAt(2);
        four = mTablayout.getTabAt(3);

        one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
        two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
        three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
        four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

    }
}

结束语

  以上就是简单用TabLayout+ViewPager实现app底部Tab布局的整个过程,如果你有更好的方法,或者文章中存在错误或不足的地方,欢迎在文章下面评论交流!



文/backkomyoung(简书作者)
原文链接:http://www.jianshu.com/p/adf7a994613a
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

你可能感兴趣的:(Android开发实践)