Android Fragment 完全解析

参考文章：http://blog.csdn.net/guolin_blog/article/details/8881711
http://blog.csdn.net/guolin_blog/article/details/13171191
Android Fragment应用实战，使用碎片向ActivityGroup说再见

界面如下：

实现步骤：

程序结构：

Android Fragment 完全解析

编写主界面的xml文件
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent">
7. <FrameLayout
8. android:layout_width="match_parent"
9. android:layout_height="0dp"
10. android:layout_weight="1"
11. android:id="@+id/content">
12. </FrameLayout>
13. <LinearLayout
14. android:layout_width="match_parent"
15. android:layout_height="60dp"
16. android:background="@drawable/tab_bg">
17. <RelativeLayout
18. android:layout_width="0dp"
19. android:layout_height="match_parent"
20. android:layout_weight="1"
21. android:id="@+id/message_layout">
22. <LinearLayout
23. android:layout_width="match_parent"
24. android:layout_height="wrap_content"
25. android:layout_centerVertical="true"
26. android:orientation="vertical">
27. <ImageView
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:layout_gravity="center_horizontal"
31. android:src="@drawable/message_unselected"
32. android:id="@+id/message_image"/>
33. <TextView
34. android:layout_width="wrap_content"
35. android:layout_height="wrap_content"
36. android:layout_gravity="center_horizontal"
37. android:text="消息"
38. android:id="@+id/message_text"
39. android:textColor="#82858b"/>
40. </LinearLayout>
41. </RelativeLayout>
42. <RelativeLayout
43. android:layout_width="0dp"
44. android:layout_height="match_parent"
45. android:layout_weight="1"
46. android:id="@+id/contacts_layout">
47. <LinearLayout
48. android:layout_width="match_parent"
49. android:layout_height="wrap_content"
50. android:layout_centerVertical="true"
51. android:orientation="vertical">
52. <ImageView
53. android:layout_width="wrap_content"
54. android:layout_height="wrap_content"
55. android:layout_gravity="center_horizontal"
56. android:src="@drawable/contacts_unselected"
57. android:id="@+id/contacts_image"/>
58. <TextView
59. android:layout_width="wrap_content"
60. android:layout_height="wrap_content"
61. android:layout_gravity="center_horizontal"
62. android:text="联系人"
63. android:id="@+id/contacts_text"
64. android:textColor="#82858b"/>
65. </LinearLayout>
66. </RelativeLayout>
67. <RelativeLayout
68. android:layout_width="0dp"
69. android:layout_height="match_parent"
70. android:layout_weight="1"
71. android:id="@+id/news_layout">
72. <LinearLayout
73. android:layout_width="match_parent"
74. android:layout_height="wrap_content"
75. android:layout_centerVertical="true"
76. android:orientation="vertical">
77. <ImageView
78. android:layout_width="wrap_content"
79. android:layout_height="wrap_content"
80. android:layout_gravity="center_horizontal"
81. android:src="@drawable/news_unselected"
82. android:id="@+id/news_image"/>
83. <TextView
84. android:layout_width="wrap_content"
85. android:layout_height="wrap_content"
86. android:layout_gravity="center_horizontal"
87. android:text="动态"
88. android:id="@+id/news_text"
89. android:textColor="#82858b"/>
90. </LinearLayout>
91. </RelativeLayout>
92. <RelativeLayout
93. android:layout_width="0dp"
94. android:layout_height="match_parent"
95. android:layout_weight="1"
96. android:id="@+id/setting_layout">
97. <LinearLayout
98. android:layout_width="match_parent"
99. android:layout_height="wrap_content"
100. android:layout_centerVertical="true"
101. android:orientation="vertical">
102. <ImageView
103. android:layout_width="wrap_content"
104. android:layout_height="wrap_content"
105. android:layout_gravity="center_horizontal"
106. android:src="@drawable/setting_unselected"
107. android:id="@+id/setting_image"/>
108. <TextView
109. android:layout_width="wrap_content"
110. android:layout_height="wrap_content"
111. android:layout_gravity="center_horizontal"
112. android:text="设置"
113. android:id="@+id/setting_text"
114. android:textColor="#82858b"/>
115. </LinearLayout>
116. </RelativeLayout>
117. </LinearLayout>
119. </LinearLayout>
效果图如下:

这里面最上方是一个frameLayout，下面是一个大的LinearLayout套了四个RelativeLayout，每个RelativeLayout 里面有套了一个LinearLayout，然后此线性布局下面放了一个imageview和Textview。

其中，四个相对布局都是用的weight权重来实现的。
分别编写每个fragment的xml。
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
3. android:layout_height="match_parent">
5. <LinearLayout
6. android:layout_width="wrap_content"
7. android:layout_height="wrap_content"
8. android:orientation="vertical"
9. android:layout_centerInParent="true">
10. <ImageView
11. android:layout_width="wrap_content"
12. android:layout_height="wrap_content"
13. android:layout_gravity="center_horizontal"
14. android:src="@drawable/message_selected"/>
15. <TextView
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:layout_gravity="center_horizontal"
19. android:padding="10dp"
20. android:text="这是消息界面"
21. android:textSize="20sp"/>
22. </LinearLayout>
23. </RelativeLayout>
只举一个实例，其他一样。
为每个xml 定义各自的Fragment
1. package com.example.FragmentDemo;
3. import android.app.Fragment;
4. import android.os.Bundle;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup;
9. /**
10. * Created by zhuxuekui on 2015/5/18.
11. */
12. public
  class MessageFragment extends Fragment {
13. @Override
14. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
15. View messageLayout = inflater.inflate(R.layout.message_layout,container,false);
16. return messageLayout;
17. }
18. }
编写业务逻辑层
1. /**
2. * 项目的主Activity，所有的Fragment都嵌入在这里。
3. *
4. * @author guolin
5. */
6. public
  class MainActivity extends Activity implements OnClickListener {
8. /**
9. * 用于展示消息的Fragment
10. */
11. private MessageFragment messageFragment;
13. /**
14. * 用于展示联系人的Fragment
15. */
16. private ContactsFragment contactsFragment;
18. /**
19. * 用于展示动态的Fragment
20. */
21. private NewsFragment newsFragment;
23. /**
24. * 用于展示设置的Fragment
25. */
26. private SettingFragment settingFragment;
28. /**
29. * 消息界面布局
30. */
31. private View messageLayout;
33. /**
34. * 联系人界面布局
35. */
36. private View contactsLayout;
38. /**
39. * 动态界面布局
40. */
41. private View newsLayout;
43. /**
44. * 设置界面布局
45. */
46. private View settingLayout;
48. /**
49. * 在Tab布局上显示消息图标的控件
50. */
51. private ImageView messageImage;
53. /**
54. * 在Tab布局上显示联系人图标的控件
55. */
56. private ImageView contactsImage;
58. /**
59. * 在Tab布局上显示动态图标的控件
60. */
61. private ImageView newsImage;
63. /**
64. * 在Tab布局上显示设置图标的控件
65. */
66. private ImageView settingImage;
68. /**
69. * 在Tab布局上显示消息标题的控件
70. */
71. private TextView messageText;
73. /**
74. * 在Tab布局上显示联系人标题的控件
75. */
76. private TextView contactsText;
78. /**
79. * 在Tab布局上显示动态标题的控件
80. */
81. private TextView newsText;
83. /**
84. * 在Tab布局上显示设置标题的控件
85. */
86. private TextView settingText;
88. /**
89. * 用于对Fragment进行管理
90. */
91. private FragmentManager fragmentManager;
93. @Override
94. protected
  void onCreate(Bundle savedInstanceState) {
95. super.onCreate(savedInstanceState);
96. requestWindowFeature(Window.FEATURE_NO_TITLE);
97. setContentView(R.layout.activity_main);
98. // 初始化布局元素
99. initViews();
100. fragmentManager = getFragmentManager();
101. // 第一次启动时选中第0个tab
102. setTabSelection(0);
103. }
105. /**
106. * 在这里获取到每个需要用到的控件的实例，并给它们设置好必要的点击事件。
107. */
108. private
  void initViews() {
109. messageLayout = findViewById(R.id.message_layout);
110. contactsLayout = findViewById(R.id.contacts_layout);
111. newsLayout = findViewById(R.id.news_layout);
112. settingLayout = findViewById(R.id.setting_layout);
113. messageImage = (ImageView) findViewById(R.id.message_image);
114. contactsImage = (ImageView) findViewById(R.id.contacts_image);
115. newsImage = (ImageView) findViewById(R.id.news_image);
116. settingImage = (ImageView) findViewById(R.id.setting_image);
117. messageText = (TextView) findViewById(R.id.message_text);
118. contactsText = (TextView) findViewById(R.id.contacts_text);
119. newsText = (TextView) findViewById(R.id.news_text);
120. settingText = (TextView) findViewById(R.id.setting_text);
121. messageLayout.setOnClickListener(this);
122. contactsLayout.setOnClickListener(this);
123. newsLayout.setOnClickListener(this);
124. settingLayout.setOnClickListener(this);
125. }
127. @Override
128. public
  void onClick(View v) {
129. switch (v.getId()) {
130. case R.id.message_layout:
131. // 当点击了消息tab时，选中第1个tab
132. setTabSelection(0);
133. break;
134. case R.id.contacts_layout:
135. // 当点击了联系人tab时，选中第2个tab
136. setTabSelection(1);
137. break;
138. case R.id.news_layout:
139. // 当点击了动态tab时，选中第3个tab
140. setTabSelection(2);
141. break;
142. case R.id.setting_layout:
143. // 当点击了设置tab时，选中第4个tab
144. setTabSelection(3);
145. break;
146. default:
147. break;
148. }
149. }
151. /**
152. * 根据传入的index参数来设置选中的tab页。
153. *
154. * @param index
155. * 每个tab页对应的下标。0表示消息，1表示联系人，2表示动态，3表示设置。
156. */
157. private
  void setTabSelection(int index) {
158. // 每次选中之前先清楚掉上次的选中状态
159. clearSelection();
160. // 开启一个Fragment事务
161. FragmentTransaction transaction = fragmentManager.beginTransaction();
162. // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
163. hideFragments(transaction);
164. switch (index) {
165. case 0:
166. // 当点击了消息tab时，改变控件的图片和文字颜色
167. messageImage.setImageResource(R.drawable.message_selected);
168. messageText.setTextColor(Color.WHITE);
169. if (messageFragment == null) {
170. // 如果MessageFragment为空，则创建一个并添加到界面上
171. messageFragment = new MessageFragment();
172. transaction.add(R.id.content, messageFragment);
173. } else {
174. // 如果MessageFragment不为空，则直接将它显示出来
175. transaction.show(messageFragment);
176. }
177. break;
178. case 1:
179. // 当点击了联系人tab时，改变控件的图片和文字颜色
180. contactsImage.setImageResource(R.drawable.contacts_selected);
181. contactsText.setTextColor(Color.WHITE);
182. if (contactsFragment == null) {
183. // 如果ContactsFragment为空，则创建一个并添加到界面上
184. contactsFragment = new ContactsFragment();
185. transaction.add(R.id.content, contactsFragment);
186. } else {
187. // 如果ContactsFragment不为空，则直接将它显示出来
188. transaction.show(contactsFragment);
189. }
190. break;
191. case 2:
192. // 当点击了动态tab时，改变控件的图片和文字颜色
193. newsImage.setImageResource(R.drawable.news_selected);
194. newsText.setTextColor(Color.WHITE);
195. if (newsFragment == null) {
196. // 如果NewsFragment为空，则创建一个并添加到界面上
197. newsFragment = new NewsFragment();
198. transaction.add(R.id.content, newsFragment);
199. } else {
200. // 如果NewsFragment不为空，则直接将它显示出来
201. transaction.show(newsFragment);
202. }
203. break;
204. case 3:
205. default:
206. // 当点击了设置tab时，改变控件的图片和文字颜色
207. settingImage.setImageResource(R.drawable.setting_selected);
208. settingText.setTextColor(Color.WHITE);
209. if (settingFragment == null) {
210. // 如果SettingFragment为空，则创建一个并添加到界面上
211. settingFragment = new SettingFragment();
212. transaction.add(R.id.content, settingFragment);
213. } else {
214. // 如果SettingFragment不为空，则直接将它显示出来
215. transaction.show(settingFragment);
216. }
217. break;
218. }
219. transaction.commit();
220. }
222. /**
223. * 清除掉所有的选中状态。
224. */
225. private
  void clearSelection() {
226. messageImage.setImageResource(R.drawable.message_unselected);
227. messageText.setTextColor(Color.parseColor("#82858b"));
228. contactsImage.setImageResource(R.drawable.contacts_unselected);
229. contactsText.setTextColor(Color.parseColor("#82858b"));
230. newsImage.setImageResource(R.drawable.news_unselected);
231. newsText.setTextColor(Color.parseColor("#82858b"));
232. settingImage.setImageResource(R.drawable.setting_unselected);
233. settingText.setTextColor(Color.parseColor("#82858b"));
234. }
236. /**
237. * 将所有的Fragment都置为隐藏状态。
238. *
239. * @param transaction
240. * 用于对Fragment执行操作的事务
241. */
242. private
  void hideFragments(FragmentTransaction transaction) {
243. if (messageFragment != null) {
244. transaction.hide(messageFragment);
245. }
246. if (contactsFragment != null) {
247. transaction.hide(contactsFragment);
248. }
249. if (newsFragment != null) {
250. transaction.hide(newsFragment);
251. }
252. if (settingFragment != null) {
253. transaction.hide(settingFragment);
254. }
255. }
256. }

首先在oncreate方法里面initview() 初始化各个控件，然后为每个layout 设置监听事件（相对布局的layout），当我们点击到某个layout时候，执行SetTabSelection(index)方法。

在刚刚的方法里面，我们首先执行clearSelection，将所有的imageview都设置为不选中状态，然后并隐藏hideFragment，这里我们用FragmentManager里面的FragmentTransaction来实现的。

这两个方法执行完之后，我们进入到switch条件语句，改变某个选中的图标的图片以及文字，这里面我们显示的是Fragment,没有用replace而是用的add，show，hide方法来实现。这样程序执行的效率会高一点，不然，用replace的话，被替换掉的fragment会彻底的被干掉，即声明周期结束，当我们又一次选中的时候，还要重新加载，这样变得麻烦。

秒客网

Android Fragment 完全解析

相关文章