仿安智市場UI框架佈局之fragment+tabhost底部菜單

第一部分就是大家如今看的這個貼，主要功能：實現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對象進行交互的接口，其餘的看代碼撒。