Android项目Tab类型主界面大总结

Android如今实现Tab类型的界面方式愈来愈多，今天就把常见的实现方式给你们来个总结。目前写了：

一、传统的ViewPager实现

二、FragmentManager+Fragment实现

三、ViewPager+FragmentPagerAdapter实现

四、TabPageIndicator+ViewPager+FragmentPagerAdapter

一、传统的ViewPager实现

主要就是ViewPager+ViewAdapter这个仍是比较常见的，就很少说了

效果图：

代码：

[java] view plaincopy

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<View> 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<View>();  

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中，显得代码比较乱。

二、FragmentManager+Fragment实现

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

效果图：

代码：

主Activity

[java] view plaincopy

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 plaincopy

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 plaincopy

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简化了很多，惋惜没有左右滑动的效果了。

三、ViewPager+Fragment实现

主要经过ViewPager和FragmentPagerAdapter一块儿来实现。

效果图：

代码：

主Activity

[java] view plaincopy

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<Fragment> mFragments = new ArrayList<Fragment>();  

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 plaincopy

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独自处理本身内部的逻辑，代码整洁不少，而且支持左右滑动。感受是第一种和第二种的结合版本。

四、TabPageIndicator+ViewPager+FragmentPagerAdapter

实现方式和3是一致的，可是使用了TabPageIndicator做为tab的指示器，效果仍是不错的，这个以前写过，就再也不贴代码了。

效果图：

参考：Android 使用Fragment，ViewPagerIndicator 制做csdn app主要框架

好了，就总结了这么多，确定还有不少别的实现方式，你们能够留言，有时间会继续完善这篇总结的。

第一种和第二种的源码

第三种方式的源码