仿安智市场UI框架布局之fragment+tabhost底部菜单

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

第一部分就是你们现在看的这个贴，主要功能：实现fragment_+tabhost来搭建整个app的大体UI框架，底部是一个可切换的选项卡（安智市场中的底部选项卡的切换动画效果略过，没写，太困了，码完字去睡觉）。

第二部分：也就是这个即将写的下一个帖子，因为今天实在太晚了，明天还要上班（Zzzzz...），主要功能：使用viewpagerindicator控件，实现左右滑动加载分页数据，还有android 4.2更新的新特性：Fragment in fragment（嵌套）。    这部分很快会更新。真的。 

<br>现在来看看安智市场的app效果   
<br>然后来看看现在这个帖子要实现的功能的demo效果    不会很难看吧，见笑了！呵呵！！！动画效果没做。木有时间。

<br>现在来说说代码，其实我之前在eoe写过一个类似的，不过现在理解更深刻，有改进一部分。
首先必须是布局文件啦，主要的布局文件是：activity_main.xml

1. <TabHost
   
2.     xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:id="@android :id/tabhost"
   
4.     android:layout_width="match_parent"
   
5.     android:layout_height="match_parent">
   
6. 
   
7.     <LinearLayout
   
8.         android:orientation="vertical"
   
9.         android:layout_width="match_parent"
   
10.         android:layout_height="match_parent">
    
11. 
    
12.         <FrameLayout
    
13.             android:id="@+id/realtabcontent"
    
14.             android:layout_width="match_parent"
    
15.             android:layout_height="0dp"
    
16.             android:layout_weight="1"/>  
    
17.         
    
18.         <TabWidget
    
19.             android:id="@android :id/tabs"
    
20.             android:layout_width="match_parent"
    
21.             android:layout_height="wrap_content"
    
22.             android:tabStripEnabled="false"
    
23.             android:background="@drawable/bg_nav"
    
24.             android:layout_weight="0"/>
    
25.         
    
26.         <FrameLayout
    
27.             android:id="@android :id/tabcontent"
    
28.             android:layout_width="0dp"
    
29.             android:layout_height="0dp"
    
30.             android:layout_weight="0"/>
    
31. 
    
32.     </LinearLayout>
    
33. </TabHost>

复制代码

也木有啥，就是一个tabwidget控件，是底部的选项卡按钮的，然后，第一个frameLayout是上图中实际内容的部分。
接下来，最重要的，当然是fragment咯，首先如果有和我一样无知的孩子，还是得先了解一下什么是fragment吧。
传送门：http://developer.android.com/reference/android/support/v4/app/Fragment.html
然后，我小小的说明一下咯，fragment是在android sdk 3.0之后出现的，为了给用户带来更好的UE，解决不同屏幕分辩率的动态和灵活UI设计。大屏幕如平板小屏幕如手机，平板电脑的设计使得其有更多的空间来放更多的UI组件，而多出来的空间存放UI使其会产生更多的交互，从而诞生了fragments。fragment有它自己的一套生命周期机制，和activity一样。不过它必须拥有一个activity宿主，以此管理这些fragments。要使用fragment，必须引入v4类库包（android-support-v4.jar），这样虽然fragment是在3.0以后出现的，也同样可以在低版本中使用。
上代码吧，我词穷。

1. package org.mcdull.activity;
   
2. 
   
3. import org.mcdull.mainfragment.FifthFragment;
   
4. import org.mcdull.mainfragment.FourthFragment;
   
5. import org.mcdull.mainfragment.FristFragment;
   
6. import org.mcdull.mainfragment.SecondFragment;
   
7. import org.mcdull.mainfragment.ThirdFragment;
   
8. import org.mcdull.util.DummyTabContent;
   
9. 
   
10. import android.os.Bundle;
    
11. import android.support.v4.app.FragmentActivity;
    
12. import android.support.v4.app.FragmentManager;
    
13. import android.support.v4.app.FragmentTransaction;
    
14. import android.view.LayoutInflater;
    
15. import android.widget.ImageView;
    
16. import android.widget.LinearLayout;
    
17. import android.widget.RelativeLayout;
    
18. import android.widget.TabHost;
    
19. import android.widget.TabWidget;
    
20. import android.widget.TextView;
    
21. 
    
22. /**
    
23. * @description： 
    
24. 
    
25. *
    
26. * @author： hades
    
27. *
    
28. * @update： 2013-3-7
    
29. *
    
30. * @version： 1.0
    
31. * 
    
32. * @email：mcdull525@foxmail.com
    
33. */
    
34. public class MainActivity extends FragmentActivity {
    
35. 
    
36.         private TabHost mTabHost;
    
37.         TabWidget tabWidget;
    
38.         private FragmentTransaction mFt;
    
39.         private RelativeLayout mTabIndicator_home, mTabIndicator_app,
    
40.                         mTabIndicator_game, mTabIndicator_top, mTabIndicator_setting;
    
41.         private FristFragment mFristFragment;
    
42.         private SecondFragment mSecondFragment;
    
43.         private ThirdFragment mThirdFragment;
    
44.         private FourthFragment mFourthFragment;
    
45.         private FifthFragment mFifthFragment;
    
46.         private FragmentManager mFm = getSupportFragmentManager();
    
47. 
    
48.         @Override
    
49.         protected void onCreate(Bundle savedInstanceState) {
    
50.                 super.onCreate(savedInstanceState);
    
51.                 setContentView(R.layout.activity_main);
    
52.                 findTabView();
    
53.                 mTabHost.setup();
    
54. 
    
55.                 TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {
    
56. 
    
57.                         @Override
    
58.                         public void onTabChanged(String tabId) {
    
59. 
    
60.                                 mFt = mFm.beginTransaction();
    
61. 
    
62.                                 // TODO Auto-generated method stub
    
63.                                 if (mFristFragment != null) {
    
64.                                         mFt.hide(mFristFragment);
    
65.                                 }
    
66.                                 if (mSecondFragment != null) {
    
67.                                         mFt.hide(mSecondFragment);
    
68.                                 }
    
69.                                 if (mThirdFragment != null) {
    
70.                                         mFt.hide(mThirdFragment);
    
71.                                 }
    
72.                                 if (mFourthFragment != null) {
    
73.                                         mFt.hide(mFourthFragment);
    
74.                                 }
    
75.                                 if (mFifthFragment != null) {
    
76.                                         mFt.hide(mFifthFragment);
    
77.                                 }
    
78. 
    
79.                                 if (tabId.equalsIgnoreCase("home")) {
    
80.                                         attachTabHome();
    
81.                                 } else if (tabId.equalsIgnoreCase("app")) {
    
82.                                         attachTabApp();
    
83.                                 } else if (tabId.equalsIgnoreCase("game")) {
    
84.                                         attachTabGame();
    
85.                                 } else if (tabId.equalsIgnoreCase("top")) {
    
86.                                         attachTabTop();
    
87.                                 } else if (tabId.equalsIgnoreCase("setting")) {
    
88.                                         attachTabSetting();
    
89.                                 }
    
90.                                 // 执行Fragment事务（添加。移除，替换fragment）
    
91.                                 mFt.commit();
    
92.                         }
    
93.                 };
    
94.                 mTabHost.setOnTabChangedListener(tabChangeListener);
    
95.                 initTab();
    
96.                 //默认跳到第几个选项卡
    
97.                 mTabHost.setCurrentTab(0);
    
98.         }
    
99. 
    
100.         /**
     
101.          * 找到TabHost的相关布局，并绘制每一个选项卡
     
102. 
     
103.          */
     
104.         private void findTabView() {
     
105. 
     
106.                 mTabHost = (TabHost) findViewById(android.R.id.tabhost);
     
107.                 tabWidget = (TabWidget) findViewById(android.R.id.tabs);
     
108.                 LinearLayout layout = (LinearLayout) mTabHost.getChildAt(0);
     
109.                 TabWidget tabWidget = (TabWidget) layout.getChildAt(1);
     
110. 
     
111.                 mTabIndicator_home = (RelativeLayout) LayoutInflater.from(this)
     
112.                                 .inflate(R.layout.tab_indicator, tabWidget, false);
     
113.                 ImageView ivTab1 = (ImageView) mTabIndicator_home.getChildAt(0);
     
114.                 ivTab1.setImageResource(R.drawable.selector_menu_home_btu);
     
115.                 TextView tvTab1 = (TextView) mTabIndicator_home.getChildAt(1);
     
116.                 tvTab1.setText(R.string.home);
     
117. 
     
118.                 mTabIndicator_app = (RelativeLayout) LayoutInflater.from(this).inflate(
     
119.                                 R.layout.tab_indicator, tabWidget, false);
     
120.                 ImageView ivTab2 = (ImageView) mTabIndicator_app.getChildAt(0);
     
121.                 ivTab2.setImageResource(R.drawable.selector_menu_app_btu);
     
122.                 TextView tvTab2 = (TextView) mTabIndicator_app.getChildAt(1);
     
123.                 tvTab2.setText(R.string.app);
     
124. 
     
125.                 mTabIndicator_game = (RelativeLayout) LayoutInflater.from(this)
     
126.                                 .inflate(R.layout.tab_indicator, tabWidget, false);
     
127.                 ImageView ivTab3 = (ImageView) mTabIndicator_game.getChildAt(0);
     
128.                 ivTab3.setImageResource(R.drawable.selector_menu_game_btu);
     
129.                 TextView tvTab3 = (TextView) mTabIndicator_game.getChildAt(1);
     
130.                 tvTab3.setText(R.string.game);
     
131. 
     
132.                 mTabIndicator_top = (RelativeLayout) LayoutInflater.from(this).inflate(
     
133.                                 R.layout.tab_indicator, tabWidget, false);
     
134.                 ImageView ivTab4 = (ImageView) mTabIndicator_top.getChildAt(0);
     
135.                 ivTab4.setImageResource(R.drawable.selector_menu_top_btu);
     
136.                 TextView tvTab4 = (TextView) mTabIndicator_top.getChildAt(1);
     
137.                 tvTab4.setText(R.string.top);
     
138. 
     
139.                 mTabIndicator_setting = (RelativeLayout) LayoutInflater.from(this)
     
140.                                 .inflate(R.layout.tab_indicator, tabWidget, false);
     
141.                 ImageView ivTab5 = (ImageView) mTabIndicator_setting.getChildAt(0);
     
142.                 ivTab5.setImageResource(R.drawable.selector_menu_setting_btu);
     
143.                 TextView tvTab5 = (TextView) mTabIndicator_setting.getChildAt(1);
     
144.                 tvTab5.setText(R.string.setting);
     
145. 
     
146.         }
     
147. 
     
148.         /**
     
149.          * 以下一系列方法都是判断fragment是否已经创建，防止重复add进FragmentTransaction 
     
150. 
     
151.          * FragmentTransaction中提供了show,add,replace,hide等一系列方法，可以根据不同的需求 
     
152. 
     
153.          * 使用,这里demo使用了show方法，是因为避免使用replace之后会重新创建fragment,重新加载数据 
     
154. 
     
155.          */
     
156.         private void attachTabHome() {
     
157. 
     
158.                 if (mFristFragment == null) {
     
159.                         mFristFragment = new FristFragment();
     
160.                         mFt.add(R.id.realtabcontent, mFristFragment, "home");
     
161.                 } else {
     
162.                         mFt.show(mFristFragment);
     
163.                         
     
164.                 }
     
165.         }
     
166. 
     
167.         private void attachTabApp() {
     
168. 
     
169.                 if (mSecondFragment == null) {
     
170.                         mSecondFragment = new SecondFragment();
     
171.                         mFt.add(R.id.realtabcontent, mSecondFragment, "app");
     
172.                 } else {
     
173.                         mFt.show(mSecondFragment);
     
174.                 }
     
175.         }
     
176. 
     
177.         private void attachTabGame() {
     
178. 
     
179.                 if (mThirdFragment == null) {
     
180.                         mThirdFragment = new ThirdFragment();
     
181.                         mFt.add(R.id.realtabcontent, mThirdFragment, "game");
     
182.                 } else {
     
183.                         mFt.show(mThirdFragment);
     
184.                 }
     
185.         }
     
186. 
     
187.         private void attachTabTop() {
     
188. 
     
189.                 if (mFourthFragment == null) {
     
190.                         mFourthFragment = new FourthFragment();
     
191.                         mFt.add(R.id.realtabcontent, mFourthFragment, "top");
     
192.                 } else {
     
193.                         mFt.show(mFourthFragment);
     
194.                 }
     
195.         }
     
196. 
     
197.         private void attachTabSetting() {
     
198. 
     
199.                 if (mFifthFragment == null) {
     
200.                         mFifthFragment = new FifthFragment();
     
201.                         mFt.add(R.id.realtabcontent, mFifthFragment, "setting");
     
202.                 } else {
     
203.                         mFt.show(mFifthFragment);
     
204.                 }
     
205.         }
     
206. 
     
207.         /**
     
208.          * 初始化选项卡 
     
209. 
     
210.          */
     
211.         private void initTab() {
     
212. 
     
213.                 TabHost.TabSpec tSpecHome = mTabHost.newTabSpec("home");
     
214.                 tSpecHome.setIndicator(mTabIndicator_home);
     
215.                 tSpecHome.setContent(new DummyTabContent(getBaseContext()));
     
216.                 mTabHost.addTab(tSpecHome);
     
217. 
     
218.                 TabHost.TabSpec tSpecApp = mTabHost.newTabSpec("app");
     
219.                 tSpecApp.setIndicator(mTabIndicator_app);
     
220.                 tSpecApp.setContent(new DummyTabContent(getBaseContext()));
     
221.                 mTabHost.addTab(tSpecApp);
     
222. 
     
223.                 TabHost.TabSpec tSpecGame = mTabHost.newTabSpec("game");
     
224.                 tSpecGame.setIndicator(mTabIndicator_game);
     
225.                 tSpecGame.setContent(new DummyTabContent(getBaseContext()));
     
226.                 mTabHost.addTab(tSpecGame);
     
227. 
     
228.                 TabHost.TabSpec tSpecTop = mTabHost.newTabSpec("top");
     
229.                 tSpecTop.setIndicator(mTabIndicator_top);
     
230.                 tSpecTop.setContent(new DummyTabContent(getBaseContext()));
     
231.                 mTabHost.addTab(tSpecTop);
     
232. 
     
233.                 TabHost.TabSpec tSpecSetting = mTabHost.newTabSpec("setting");
     
234.                 tSpecSetting.setIndicator(mTabIndicator_setting);
     
235.                 tSpecSetting.setContent(new DummyTabContent(getBaseContext()));
     
236.                 mTabHost.addTab(tSpecSetting);
     
237. 
     
238.         }
     
239. 
     
240. }
     

复制代码

这里需要提醒几点：第一，这个mainActivity继承与fragmentActivity；
第二：        private FragmentManager mFm = getSupportFragmentManager(); 第一点继承了fragmentActivity后，可通过 getSupportFragmentManager方法拿到FragmentManager， 这个类提供了与Activity内部的Fragment对象进行交互的接口，其他的看代码撒。

来源：oschina

链接：https://my.oschina.net/u/924450/blog/181996