Android学习笔记（四）之碎片化Fragment实现仿人人客户端的侧边栏

其实一种好的UI布局，可以使用户感到更加的亲切与方便。最近非常流行的莫过于侧边栏了，其实我也做过很多侧边栏的应用，但是那些侧边栏的使用我 都不是很满意，现在重新整理，重新写了一个相对来说我比较满意的侧边栏，其中运用的就是android3.0版本之后新加的Fragment碎片化，碎片 化的使用将来也是一个趋势，所以通过我这个程序你既可以学到侧边栏，也能让你更加熟悉碎片化的使用，一举两得的事。哈哈……废话不多说了，直接上图。图片 如下：

①、自定义一个View,把左侧边栏视图，中间内容视图，右侧边栏视图放在里面，这里给这个View起名叫：SlidingMenu.java

代码如下：

1. package net.loonggg.view;
2. import android.content.Context;
3. import android.util.AttributeSet;
4. import android.view.View;
5. import android.widget.RelativeLayout;
6. public class SlidingMenu extends RelativeLayout {
7. private SlidingView mSlidingView;
8. private View mMenuView;
9. private View mDetailView;
10. public SlidingMenu(Context context) {
11. super(context);
12. }
13. public SlidingMenu(Context context, AttributeSet attrs) {
14. super(context, attrs);
15. }
16. public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {
17. super(context, attrs, defStyle);
18. }
19. public void addViews(View left, View center, View right) {
20. setLeftView(left);
21. setRightView(right);
22. setCenterView(center);
23. }
24. /**
25. * 添加左侧边栏的view
26. *
27. * @param view
28. */
29. @SuppressWarnings("deprecation")
30. public void setLeftView(View view) {
31. LayoutParams behindParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
32. LayoutParams.FILL_PARENT);
33. behindParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);// 在父控件的左边
34. addView(view, behindParams);
35. mMenuView = view;
36. }
37. /**
38. * 添加右侧边栏的view
39. *
40. * @param view
41. */
42. @SuppressWarnings("deprecation")
43. public void setRightView(View view) {
44. LayoutParams behindParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
45. LayoutParams.FILL_PARENT);
46. behindParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);// 在父控件的右边
47. addView(view, behindParams);
48. mDetailView = view;
49. }
50. /**
51. * 添加中间内容的view
52. *
53. * @param view
54. */
55. @SuppressWarnings("deprecation")
56. public void setCenterView(View view) {
57. LayoutParams aboveParams = new LayoutParams(LayoutParams.FILL_PARENT,
58. LayoutParams.FILL_PARENT);
59. mSlidingView = new SlidingView(getContext());
60. mSlidingView.setView(view);
61. addView(mSlidingView, aboveParams);
62. mSlidingView.setMenuView(mMenuView);
63. mSlidingView.setDetailView(mDetailView);
64. mSlidingView.invalidate();
65. }
66. public void showLeftView() {
67. mSlidingView.showLeftView();
68. }
69. public void showRightView() {
70. mSlidingView.showRightView();
71. }
72. }

②、通过一个中间的View,去控制左右侧边栏的滑进与滑出，这个也是自定义的一个View,名字叫：SlidingView.java

代码如下：

1. package net.loonggg.view;
2. import android.content.Context;
3. import android.graphics.Canvas;
4. import android.util.AttributeSet;
5. import android.util.Log;
6. import android.view.MotionEvent;
7. import android.view.VelocityTracker;
8. import android.view.View;
9. import android.view.ViewConfiguration;
10. import android.view.ViewGroup;
11. import android.widget.FrameLayout;
12. import android.widget.Scroller;
13. public class SlidingView extends ViewGroup {
14. private FrameLayout mContainer;
15. private Scroller mScroller;
16. private VelocityTracker mVelocityTracker;
17. private int mTouchSlop;
18. private float mLastMotionX;
19. private float mLastMotionY;
20. private static final int SNAP_VELOCITY = 1000;
21. private View mMenuView;
22. private View mDetailView;
23. public SlidingView(Context context) {
24. super(context);
25. init();
26. }
27. public SlidingView(Context context, AttributeSet attrs) {
28. super(context, attrs);
29. init();
30. }
31. public SlidingView(Context context, AttributeSet attrs, int defStyle) {
32. super(context, attrs, defStyle);
33. init();
34. }
35. @Override
36. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
37. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
38. mContainer.measure(widthMeasureSpec, heightMeasureSpec);
39. }
40. @Override
41. protected void onLayout(boolean changed, int l, int t, int r, int b) {
42. final int width = r - l;
43. final int height = b - t;
44. mContainer.layout(0, 0, width, height);
45. }
46. private void init() {
47. mContainer = new FrameLayout(getContext());
48. mContainer.setBackgroundColor(0xff000000);
49. mScroller = new Scroller(getContext());
50. mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
51. super.addView(mContainer);
52. }
53. public void setView(View v) {
54. if (mContainer.getChildCount() > 0) {
55. mContainer.removeAllViews();
56. }
57. mContainer.addView(v);
58. }
59. @Override
60. public void scrollTo(int x, int y) {
61. super.scrollTo(x, y);
62. postInvalidate();
63. }
64. @Override
65. public void computeScroll() {
66. if (!mScroller.isFinished()) {
67. if (mScroller.computeScrollOffset()) {
68. int oldX = getScrollX();
69. int oldY = getScrollY();
70. int x = mScroller.getCurrX();
71. int y = mScroller.getCurrY();
72. if (oldX != x || oldY != y) {
73. scrollTo(x, y);
74. }
75. // Keep on drawing until the animation has finished.
76. invalidate();
77. } else {
78. clearChildrenCache();
79. }
80. } else {
81. clearChildrenCache();
82. }
83. }
84. private boolean mIsBeingDragged;
85. @Override
86. public boolean onInterceptTouchEvent(MotionEvent ev) {
87. final int action = ev.getAction();
88. final float x = ev.getX();
89. final float y = ev.getY();
90. switch (action) {
91. case MotionEvent.ACTION_DOWN:
92. mLastMotionX = x;
93. mLastMotionY = y;
94. mIsBeingDragged = false;
95. break;
96. case MotionEvent.ACTION_MOVE:
97. final float dx = x - mLastMotionX;
98. final float xDiff = Math.abs(dx);
99. final float yDiff = Math.abs(y - mLastMotionY);
100. if (xDiff > mTouchSlop && xDiff > yDiff) {
101. mIsBeingDragged = true;
102. mLastMotionX = x;
103. }
104. break;
105. }
106. return mIsBeingDragged;
107. }
108. @Override
109. public boolean onTouchEvent(MotionEvent ev) {
110. if (mVelocityTracker == null) {
111. mVelocityTracker = VelocityTracker.obtain();
112. }
113. mVelocityTracker.addMovement(ev);
114. final int action = ev.getAction();
115. final float x = ev.getX();
116. final float y = ev.getY();
117. switch (action) {
118. case MotionEvent.ACTION_DOWN:
119. if (!mScroller.isFinished()) {
120. mScroller.abortAnimation();
121. }
122. mLastMotionX = x;
123. mLastMotionY = y;
124. if (getScrollX() == -getMenuViewWidth()
125. && mLastMotionX < getMenuViewWidth()) {
126. return false;
127. }
128. if (getScrollX() == getDetailViewWidth()
129. && mLastMotionX > getMenuViewWidth()) {
130. return false;
131. }
132. break;
133. case MotionEvent.ACTION_MOVE:
134. if (mIsBeingDragged) {
135. enableChildrenCache();
136. final float deltaX = mLastMotionX - x;
137. mLastMotionX = x;
138. float oldScrollX = getScrollX();
139. float scrollX = oldScrollX + deltaX;
140. if (deltaX < 0 && oldScrollX < 0) { // left view
141. final float leftBound = 0;
142. final float rightBound = -getMenuViewWidth();
143. if (scrollX > leftBound) {
144. scrollX = leftBound;
145. } else if (scrollX < rightBound) {
146. scrollX = rightBound;
147. }
148. // mDetailView.setVisibility(View.INVISIBLE);
149. // mMenuView.setVisibility(View.VISIBLE);
150. } else if (deltaX > 0 && oldScrollX > 0) { // right view
151. final float rightBound = getDetailViewWidth();
152. final float leftBound = 0;
153. if (scrollX < leftBound) {
154. scrollX = leftBound;
155. } else if (scrollX > rightBound) {
156. scrollX = rightBound;
157. }
158. // mDetailView.setVisibility(View.VISIBLE);
159. // mMenuView.setVisibility(View.INVISIBLE);
160. }
161. scrollTo((int) scrollX, getScrollY());
162. }
163. break;
164. case MotionEvent.ACTION_CANCEL:
165. case MotionEvent.ACTION_UP:
166. if (mIsBeingDragged) {
167. final VelocityTracker velocityTracker = mVelocityTracker;
168. velocityTracker.computeCurrentVelocity(1000);
169. int velocityX = (int) velocityTracker.getXVelocity();
170. velocityX = 0;
171. Log.e("ad", "velocityX == " + velocityX);
172. int oldScrollX = getScrollX();
173. int dx = 0;
174. if (oldScrollX < 0) {
175. if (oldScrollX < -getMenuViewWidth() / 2
176. || velocityX > SNAP_VELOCITY) {
177. dx = -getMenuViewWidth() - oldScrollX;
178. } else if (oldScrollX >= -getMenuViewWidth() / 2
179. || velocityX < -SNAP_VELOCITY) {
180. dx = -oldScrollX;
181. }
182. } else {
183. if (oldScrollX > getDetailViewWidth() / 2
184. || velocityX < -SNAP_VELOCITY) {
185. dx = getDetailViewWidth() - oldScrollX;
186. } else if (oldScrollX <= getDetailViewWidth() / 2
187. || velocityX > SNAP_VELOCITY) {
188. dx = -oldScrollX;
189. }
190. }
191. smoothScrollTo(dx);
192. clearChildrenCache();
193. }
194. break;
195. }
196. if (mVelocityTracker != null) {
197. mVelocityTracker.recycle();
198. mVelocityTracker = null;
199. }
200. return true;
201. }
202. private int getMenuViewWidth() {
203. if (mMenuView == null) {
204. return 0;
205. }
206. return mMenuView.getWidth();
207. }
208. private int getDetailViewWidth() {
209. if (mDetailView == null) {
210. return 0;
211. }
212. return mDetailView.getWidth();
213. }
214. @Override
215. protected void onDraw(Canvas canvas) {
216. super.onDraw(canvas);
217. }
218. public View getDetailView() {
219. return mDetailView;
220. }
221. public void setDetailView(View mDetailView) {
222. this.mDetailView = mDetailView;
223. }
224. public View getMenuView() {
225. return mMenuView;
226. }
227. public void setMenuView(View mMenuView) {
228. this.mMenuView = mMenuView;
229. }
230. // void toggle() {
231. // int menuWidth = mMenuView.getWidth();
232. // int oldScrollX = getScrollX();
233. // if (oldScrollX == 0) {
234. // smoothScrollTo(-menuWidth);
235. // } else if (oldScrollX == -menuWidth) {
236. // smoothScrollTo(menuWidth);
237. // }
238. // }
239. /**
240. * 左侧边栏的关闭与显示
241. */
242. public void showLeftView() {
243. int menuWidth = mMenuView.getWidth();
244. int oldScrollX = getScrollX();
245. if (oldScrollX == 0) {
246. smoothScrollTo(-menuWidth);
247. } else if (oldScrollX == -menuWidth) {
248. smoothScrollTo(menuWidth);
249. }
250. }
251. /**
252. * 右侧边栏的关闭与显示
253. */
254. public void showRightView() {
255. int menuWidth = mDetailView.getWidth();
256. int oldScrollX = getScrollX();
257. if (oldScrollX == 0) {
258. smoothScrollTo(menuWidth);
259. } else if (oldScrollX == menuWidth) {
260. smoothScrollTo(-menuWidth);
261. }
262. }
263. void smoothScrollTo(int dx) {
264. int duration = 500;
265. int oldScrollX = getScrollX();
266. mScroller.startScroll(oldScrollX, getScrollY(), dx, getScrollY(),
267. duration);
268. invalidate();
269. }
270. void enableChildrenCache() {
271. final int count = getChildCount();
272. for (int i = 0; i < count; i++) {
273. final View layout = (View) getChildAt(i);
274. layout.setDrawingCacheEnabled(true);
275. }
276. }
277. void clearChildrenCache() {
278. final int count = getChildCount();
279. for (int i = 0; i < count; i++) {
280. final View layout = (View) getChildAt(i);
281. layout.setDrawingCacheEnabled(false);
282. }
283. }
284. }

③、在MainActivity的布局文件中，引用咱们自定义的侧边栏View,MainActivity的布局文件代码如下：activity_main.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <net.loonggg.view.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/slidingMenu"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent" />

④、MainActivity继承碎片化FragmentActivity，其代码如下:

1. package net.loonggg.fragment;
2. import net.loonggg.view.SlidingMenu;
3. import android.content.Intent;
4. import android.os.Bundle;
5. import android.support.v4.app.FragmentActivity;
6. import android.support.v4.app.FragmentTransaction;
7. import android.view.View;
8. import android.view.Window;
9. public class MainActivity extends FragmentActivity {
10. private SlidingMenu mSlidingMenu;// 侧边栏的view
11. private LeftFragment leftFragment; // 左侧边栏的碎片化view
12. private RightFragment rightFragment; // 右侧边栏的碎片化view
13. private SampleListFragment centerFragment;// 中间内容碎片化的view
14. private FragmentTransaction ft; // 碎片化管理的事务
15. @Override
16. protected void onCreate(Bundle savedInstanceState) {
17. super.onCreate(savedInstanceState);
18. // 去标题栏
19. requestWindowFeature(Window.FEATURE_NO_TITLE);
20. setContentView(R.layout.activity_main);
21. mSlidingMenu = (SlidingMenu) findViewById(R.id.slidingMenu);
22. mSlidingMenu.setLeftView(getLayoutInflater().inflate(
23. R.layout.left_frame, null));
24. mSlidingMenu.setRightView(getLayoutInflater().inflate(
25. R.layout.right_frame, null));
26. mSlidingMenu.setCenterView(getLayoutInflater().inflate(
27. R.layout.center_frame, null));
28. ft = this.getSupportFragmentManager().beginTransaction();
29. leftFragment = new LeftFragment();
30. rightFragment = new RightFragment();
31. ft.replace(R.id.left_frame, leftFragment);
32. ft.replace(R.id.right_frame, rightFragment);
33. centerFragment = new SampleListFragment();
34. ft.replace(R.id.center_frame, centerFragment);
35. ft.commit();
36. }
37. public void llronclick(View v) {
38. switch (v.getId()) {
39. case R.id.llr_energy_management:
40. Intent intent = new Intent(this, DetailsActivity.class);
41. startActivity(intent);
42. break;
43. default:
44. break;
45. }
46. }
47. public void showLeft() {
48. mSlidingMenu.showLeftView();
49. }
50. public void showRight() {
51. mSlidingMenu.showRightView();
52. }
53. }

⑤、左中右，左侧边栏，中间内容部分，右侧边栏，分别用Fragment代替，呈现出你想要的界面，这里我们只需要写Fragment就可以了，中间部分我们用SampleListFragment代替其中间内容部分，SampleListFragment的代码如下：

1. package net.loonggg.fragment;
2. import java.util.ArrayList;
3. import java.util.HashMap;
4. import java.util.List;
5. import java.util.Map;
6. import android.content.Intent;
7. import android.os.Bundle;
8. import android.support.v4.app.ListFragment;
9. import android.util.Log;
10. import android.view.LayoutInflater;
11. import android.view.View;
12. import android.view.View.OnClickListener;
13. import android.view.ViewGroup;
14. import android.widget.ImageView;
15. import android.widget.ListView;
16. import android.widget.SimpleAdapter;
17. public class SampleListFragment extends ListFragment {
18. private ImageView lv_left;
19. private ImageView iv_right;
20. public View onCreateView(LayoutInflater inflater, ViewGroup container,
21. Bundle savedInstanceState) {
22. View mView = inflater.inflate(R.layout.list, null);
23. lv_left = (ImageView) mView.findViewById(R.id.iv_left);
24. iv_right = (ImageView) mView.findViewById(R.id.iv_right);
25. return mView;
26. }
27. public void onActivityCreated(Bundle savedInstanceState) {
28. super.onActivityCreated(savedInstanceState);
29. Map<String, Object> item1 = new HashMap<String, Object>();
30. item1.put("list_title", getString(R.string.title1));
31. item1.put("list_image", R.drawable.p1);
32. item1.put("list_contect", getString(R.string.test));
33. Map<String, Object> item2 = new HashMap<String, Object>();
34. item2.put("list_title", getString(R.string.title1));
35. item2.put("list_image", R.drawable.p2);
36. item2.put("list_contect", getString(R.string.test));
37. Map<String, Object> item3 = new HashMap<String, Object>();
38. item3.put("list_title", getString(R.string.title1));
39. item3.put("list_image", R.drawable.p3);
40. item3.put("list_contect", getString(R.string.test));
41. Map<String, Object> item4 = new HashMap<String, Object>();
42. item4.put("list_title", getString(R.string.title1));
43. item4.put("list_image", R.drawable.p4);
44. item4.put("list_contect", getString(R.string.test));
45. Map<String, Object> item5 = new HashMap<String, Object>();
46. item5.put("list_title", getString(R.string.title1));
47. item5.put("list_image", R.drawable.p5);
48. item5.put("list_contect", getString(R.string.test));
49. Map<String, Object> item6 = new HashMap<String, Object>();
50. item6.put("list_title", getString(R.string.title1));
51. item6.put("list_image", R.drawable.p6);
52. item6.put("list_contect", getString(R.string.test));
53. Map<String, Object> item7 = new HashMap<String, Object>();
54. item7.put("list_title", getString(R.string.title1));
55. item7.put("list_image", R.drawable.p7);
56. item7.put("list_contect", getString(R.string.test));
57. List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
58. data.add(item1);
59. data.add(item2);
60. data.add(item3);
61. data.add(item4);
62. data.add(item5);
63. data.add(item6);
64. data.add(item7);
65. String[] from = new String[] { "list_title", "list_image",
66. "list_contect" };
67. int[] to = new int[] { R.id.list_title, R.id.list_image,
68. R.id.list_contect };
69. SimpleAdapter adapter = new SimpleAdapter(getActivity(), data,
70. R.layout.list_item, from, to);
71. setListAdapter(adapter);
72. lv_left.setOnClickListener(new OnClickListener() {
73. public void onClick(View v) {
74. ((MainActivity) getActivity()).showLeft();
75. }
76. });
77. iv_right.setOnClickListener(new OnClickListener() {
78. public void onClick(View v) {
79. ((MainActivity) getActivity()).showRight();
80. }
81. });
82. }
83. @Override
84. public void onListItemClick(ListView l, View v, int position, long id) {
85. super.onListItemClick(l, v, position, id);
86. Intent intent = new Intent(getActivity(), DetailsActivity.class);
87. startActivity(intent);
88. }
89. }

其相应的布局文件代码如下：list.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:background="#fff"
6. android:orientation="vertical" >
7. <LinearLayout
8. android:layout_width="fill_parent"
9. android:layout_height="wrap_content"
10. android:background="@drawable/banner_unit"
11. android:padding="7dip" >
12. <ImageView
13. android:id="@+id/iv_left"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_weight="0.1"
17. android:clickable="true"
18. android:src="@drawable/booklist_menu_normal" />
19. <TextView
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:layout_gravity="center_vertical"
23. android:gravity="center_horizontal"
24. android:textColor="#000"
25. android:layout_weight="0.8"
26. android:text="Fragment"
27. android:textSize="17dp" />
28. <ImageView
29. android:id="@+id/iv_right"
30. android:clickable="true"
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:layout_gravity="right"
34. android:layout_weight="0.1"
35. android:src="@drawable/back_normal" />
36. </LinearLayout>
37. <ListView
38. android:id="@android:id/list"
39. android:layout_width="fill_parent"
40. android:layout_height="fill_parent" >
41. </ListView>
42. </LinearLayout>

⑥、左侧边栏的View用LeftFragment替代，LeftFragment代码如下：

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.support.v4.app.FragmentTransaction;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup;
8. import android.widget.LinearLayout;
9. public class LeftFragment extends Fragment {
10. public View onCreateView(LayoutInflater inflater, ViewGroup container,
11. Bundle savedInstanceState) {
12. View view = inflater.inflate(R.layout.left_fragment, null);
13. LinearLayout userLayout = (LinearLayout) view
14. .findViewById(R.id.userLayout);
15. userLayout.setOnClickListener(new View.OnClickListener() {
16. public void onClick(View v) {
17. UserFragment user = new UserFragment();
18. FragmentTransaction ft = getActivity()
19. .getSupportFragmentManager().beginTransaction();
20. ft.replace(R.id.center_frame, user);
21. ft.commit();
22. ((MainActivity) getActivity()).showLeft();
23. }
24. });
25. LinearLayout mainPage = (LinearLayout) view.findViewById(R.id.mainPage);
26. mainPage.setOnClickListener(new View.OnClickListener() {
27. @Override
28. public void onClick(View v) {
29. FragmentTransaction ft = getActivity()
30. .getSupportFragmentManager().beginTransaction();
31. ft.replace(R.id.center_frame, new SampleListFragment());
32. ft.commit();
33. ((MainActivity) getActivity()).showLeft();
34. }
35. });
36. return view;
37. }
38. public void onActivityCreated(Bundle savedInstanceState) {
39. super.onActivityCreated(savedInstanceState);
40. }
41. }

其对应的布局文件代码如下：left_fragment.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/mlist"
4. android:layout_width="wrap_content"
5. android:layout_height="fill_parent"
6. android:orientation="vertical" >
7. <LinearLayout
8. android:id="@+id/mainPage"
9. android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. android:background="@drawable/oper_title2"
12. android:gravity="center"
13. android:orientation="vertical" >
14. <TextView
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_gravity="center"
18. android:gravity="center"
19. android:text="主页"
20. android:textColor="#000"
21. android:textSize="17dip" />
22. </LinearLayout>
23. <LinearLayout
24. android:layout_width="wrap_content"
25. android:layout_height="fill_parent"
26. android:background="@drawable/booklist_menu_bg_unit2"
27. android:orientation="vertical" >
28. <LinearLayout
29. android:id="@+id/userLayout"
30. android:layout_width="match_parent"
31. android:layout_height="wrap_content"
32. android:layout_weight="0.2"
33. android:clickable="true"
34. android:orientation="vertical"
35. android:padding="5dip" >
36. <ImageView
37. android:layout_width="wrap_content"
38. android:layout_height="wrap_content"
39. android:layout_gravity="center"
40. android:gravity="center"
41. android:src="@drawable/booklist_menu_user" />
42. <TextView
43. android:layout_width="wrap_content"
44. android:layout_height="wrap_content"
45. android:layout_gravity="center"
46. android:gravity="center"
47. android:text="用户"
48. android:textColor="#000" />
49. </LinearLayout>
50. <LinearLayout
51. android:layout_width="match_parent"
52. android:layout_height="wrap_content"
53. android:layout_weight="0.2"
54. android:clickable="true"
55. android:orientation="vertical"
56. android:padding="5dip" >
57. <ImageView
58. android:layout_width="wrap_content"
59. android:layout_height="wrap_content"
60. android:layout_gravity="center"
61. android:gravity="center"
62. android:src="@drawable/booklist_menu_synchronize" />
63. <TextView
64. android:layout_width="wrap_content"
65. android:layout_height="wrap_content"
66. android:layout_gravity="center"
67. android:gravity="center"
68. android:text="收藏"
69. android:textColor="#000" />
70. </LinearLayout>
71. <LinearLayout
72. android:layout_width="match_parent"
73. android:layout_height="wrap_content"
74. android:layout_weight="0.2"
75. android:clickable="true"
76. android:orientation="vertical"
77. android:padding="5dip" >
78. <ImageView
79. android:layout_width="wrap_content"
80. android:layout_height="wrap_content"
81. android:layout_gravity="center"
82. android:gravity="center"
83. android:src="@drawable/booklist_menu_std" />
84. <TextView
85. android:layout_width="wrap_content"
86. android:layout_height="wrap_content"
87. android:layout_gravity="center"
88. android:gravity="center"
89. android:text="标准"
90. android:textColor="#000" />
91. </LinearLayout>
92. <LinearLayout
93. android:layout_width="match_parent"
94. android:layout_height="wrap_content"
95. android:layout_weight="0.2"
96. android:clickable="true"
97. android:orientation="vertical"
98. android:padding="5dip" >
99. <ImageView
100. android:layout_width="wrap_content"
101. android:layout_height="wrap_content"
102. android:layout_gravity="center"
103. android:gravity="center"
104. android:src="@drawable/booklist_menu_help" />
105. <TextView
106. android:layout_width="wrap_content"
107. android:layout_height="wrap_content"
108. android:layout_gravity="center"
109. android:gravity="center"
110. android:text="帮助"
111. android:textColor="#000" />
112. </LinearLayout>
113. <LinearLayout
114. android:layout_width="match_parent"
115. android:layout_height="wrap_content"
116. android:layout_weight="0.2"
117. android:clickable="true"
118. android:orientation="vertical"
119. android:padding="5dip" >
120. <ImageView
121. android:layout_width="wrap_content"
122. android:layout_height="wrap_content"
123. android:layout_gravity="center"
124. android:gravity="center"
125. android:src="@drawable/booklist_menu_about" />
126. <TextView
127. android:layout_width="wrap_content"
128. android:layout_height="wrap_content"
129. android:layout_gravity="center"
130. android:gravity="center"
131. android:text="关于"
132. android:textColor="#000" />
133. </LinearLayout>
134. </LinearLayout>
135. </LinearLayout>

⑦、右侧边栏的View用RightFragment替代，RightFragment代码如下：

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. public class RightFragment extends Fragment {
8. public View onCreateView(LayoutInflater inflater, ViewGroup container,
9. Bundle savedInstanceState) {
10. View view = inflater.inflate(R.layout.right_fragment, null);
11. return view;
12. }
13. public void onActivityCreated(Bundle savedInstanceState) {
14. super.onActivityCreated(savedInstanceState);
15. }
16. }

其对应的布局文件代码如下：right_fragment.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="wrap_content"
4. android:layout_height="match_parent"
5. android:orientation="vertical" >
6. <LinearLayout
7. android:layout_width="match_parent"
8. android:layout_height="wrap_content"
9. android:background="@drawable/oper_title"
10. android:gravity="center"
11. android:orientation="vertical" >
12. <TextView
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_gravity="center"
16. android:gravity="center"
17. android:text="服   务"
18. android:textColor="#000"
19. android:textSize="17dip" />
20. </LinearLayout>
21. <ScrollView
22. android:layout_width="wrap_content"
23. android:layout_height="fill_parent"
24. android:background="@drawable/booklist_menu_bg_unit" >
25. <LinearLayout
26. android:layout_width="wrap_content"
27. android:layout_height="fill_parent"
28. android:orientation="vertical"
29. android:padding="5dip" >
30. <LinearLayout
31. android:id="@+id/llr_energy_management"
32. android:layout_width="match_parent"
33. android:layout_height="60dp"
34. android:clickable="true"
35. android:onClick="llronclick" >
36. <ImageView
37. android:layout_width="wrap_content"
38. android:layout_height="wrap_content"
39. android:layout_gravity="center"
40. android:layout_weight="0.1"
41. android:src="@drawable/lxqg" />
42. <TextView
43. android:layout_width="wrap_content"
44. android:layout_height="wrap_content"
45. android:layout_gravity="center"
46. android:layout_weight="0.8"
47. android:text="能源管理"
48. android:textColor="#000" />
49. <ImageView
50. android:layout_width="wrap_content"
51. android:layout_height="wrap_content"
52. android:layout_gravity="center"
53. android:layout_weight="0.1"
54. android:gravity="center"
55. android:src="@drawable/arrow_to_right" />
56. </LinearLayout>
57. <ImageView
58. android:layout_width="fill_parent"
59. android:layout_height="fill_parent"
60. android:layout_gravity="center"
61. android:src="@drawable/line_read_option" />
62. <LinearLayout
63. android:id="@+id/llr_hr_management"
64. android:layout_width="match_parent"
65. android:layout_height="60dp"
66. android:clickable="true"
67. android:onClick="llronclick" >
68. <ImageView
69. android:layout_width="wrap_content"
70. android:layout_height="wrap_content"
71. android:layout_gravity="center"
72. android:layout_weight="0.1"
73. android:src="@drawable/lxqg" />
74. <TextView
75. android:layout_width="wrap_content"
76. android:layout_height="wrap_content"
77. android:layout_gravity="center"
78. android:layout_weight="0.8"
79. android:text="人力管理"
80. android:textColor="#000" />
81. <ImageView
82. android:layout_width="wrap_content"
83. android:layout_height="wrap_content"
84. android:layout_gravity="center"
85. android:layout_weight="0.1"
86. android:gravity="center"
87. android:src="@drawable/arrow_to_right" />
88. </LinearLayout>
89. <ImageView
90. android:layout_width="fill_parent"
91. android:layout_height="fill_parent"
92. android:layout_gravity="center"
93. android:src="@drawable/line_read_option" />
94. <LinearLayout
95. android:id="@+id/llr_business_management"
96. android:layout_width="match_parent"
97. android:layout_height="60dp"
98. android:clickable="true"
99. android:onClick="llronclick" >
100. <ImageView
101. android:layout_width="wrap_content"
102. android:layout_height="wrap_content"
103. android:layout_gravity="center"
104. android:layout_weight="0.1"
105. android:src="@drawable/lxqg" />
106. <TextView
107. android:layout_width="wrap_content"
108. android:layout_height="wrap_content"
109. android:layout_gravity="center"
110. android:layout_weight="0.8"
111. android:text="商务管理"
112. android:textColor="#000" />
113. <ImageView
114. android:layout_width="wrap_content"
115. android:layout_height="wrap_content"
116. android:layout_gravity="center"
117. android:layout_weight="0.1"
118. android:gravity="center"
119. android:src="@drawable/arrow_to_right" />
120. </LinearLayout>
121. <ImageView
122. android:layout_width="fill_parent"
123. android:layout_height="fill_parent"
124. android:layout_gravity="center"
125. android:src="@drawable/line_read_option" />
126. <LinearLayout
127. android:id="@+id/llr_financial_management"
128. android:layout_width="match_parent"
129. android:layout_height="60dp"
130. android:clickable="true"
131. android:onClick="llronclick" >
132. <ImageView
133. android:layout_width="wrap_content"
134. android:layout_height="wrap_content"
135. android:layout_gravity="center"
136. android:layout_weight="0.1"
137. android:src="@drawable/lxqg" />
138. <TextView
139. android:layout_width="wrap_content"
140. android:layout_height="wrap_content"
141. android:layout_gravity="center"
142. android:layout_weight="0.8"
143. android:text="金融管理"
144. android:textColor="#000" />
145. <ImageView
146. android:layout_width="wrap_content"
147. android:layout_height="wrap_content"
148. android:layout_gravity="center"
149. android:layout_weight="0.1"
150. android:gravity="center"
151. android:src="@drawable/arrow_to_right" />
152. </LinearLayout>
153. <ImageView
154. android:layout_width="fill_parent"
155. android:layout_height="fill_parent"
156. android:layout_gravity="center"
157. android:src="@drawable/line_read_option" />
158. <LinearLayout
159. android:id="@+id/llr_purchasing_management"
160. android:layout_width="match_parent"
161. android:layout_height="60dp"
162. android:clickable="true"
163. android:onClick="llronclick" >
164. <ImageView
165. android:layout_width="wrap_content"
166. android:layout_height="wrap_content"
167. android:layout_gravity="center"
168. android:layout_weight="0.1"
169. android:src="@drawable/lxqg" />
170. <TextView
171. android:layout_width="wrap_content"
172. android:layout_height="wrap_content"
173. android:layout_gravity="center"
174. android:layout_weight="0.8"
175. android:text="采购管理"
176. android:textColor="#000" />
177. <ImageView
178. android:layout_width="wrap_content"
179. android:layout_height="wrap_content"
180. android:layout_gravity="center"
181. android:layout_weight="0.1"
182. android:gravity="center"
183. android:src="@drawable/arrow_to_right" />
184. </LinearLayout>
185. <ImageView
186. android:layout_width="fill_parent"
187. android:layout_height="fill_parent"
188. android:layout_gravity="center"
189. android:src="@drawable/line_read_option" />
190. <LinearLayout
191. android:id="@+id/llr_supply_management"
192. android:layout_width="match_parent"
193. android:layout_height="60dp"
194. android:clickable="true"
195. android:onClick="llronclick" >
196. <ImageView
197. android:layout_width="wrap_content"
198. android:layout_height="wrap_content"
199. android:layout_gravity="center"
200. android:layout_weight="0.1"
201. android:src="@drawable/lxqg" />
202. <TextView
203. android:layout_width="wrap_content"
204. android:layout_height="wrap_content"
205. android:layout_gravity="center"
206. android:layout_weight="0.8"
207. android:text="供应管理"
208. android:textColor="#000" />
209. <ImageView
210. android:layout_width="wrap_content"
211. android:layout_height="wrap_content"
212. android:layout_gravity="center"
213. android:layout_weight="0.1"
214. android:gravity="center"
215. android:src="@drawable/arrow_to_right" />
216. </LinearLayout>
217. <ImageView
218. android:layout_width="fill_parent"
219. android:layout_height="fill_parent"
220. android:layout_gravity="center"
221. android:src="@drawable/line_read_option" />
222. <LinearLayout
223. android:id="@+id/llr_project_management"
224. android:layout_width="match_parent"
225. android:layout_height="60dp"
226. android:clickable="true"
227. android:onClick="llronclick" >
228. <ImageView
229. android:layout_width="wrap_content"
230. android:layout_height="wrap_content"
231. android:layout_gravity="center"
232. android:layout_weight="0.1"
233. android:src="@drawable/lxqg" />
234. <TextView
235. android:layout_width="wrap_content"
236. android:layout_height="wrap_content"
237. android:layout_gravity="center"
238. android:layout_weight="0.8"
239. android:text="项目管理"
240. android:textColor="#000" />
241. <ImageView
242. android:layout_width="wrap_content"
243. android:layout_height="wrap_content"
244. android:layout_gravity="center"
245. android:layout_weight="0.1"
246. android:gravity="center"
247. android:src="@drawable/arrow_to_right" />
248. </LinearLayout>
249. <ImageView
250. android:layout_width="fill_parent"
251. android:layout_height="fill_parent"
252. android:layout_gravity="center"
253. android:src="@drawable/line_read_option" />
254. <Button
255. android:layout_width="wrap_content"
256. android:layout_height="wrap_content"
257. android:text="说明我是宽度自适应的..." />
258. </LinearLayout>
259. </ScrollView>
260. </LinearLayout>

⑧、在左侧边栏中有一个点击事件，点击用户，进入用户界面，这里的用户界面也是一个Fragment，点击事件的具体代码在⑥中已经有了，现在我把用户界面的Fragment代码贴出来：UserFragment.java:

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.ImageView;
8. public class UserFragment extends Fragment {
9. @Override
10. public View onCreateView(LayoutInflater inflater, ViewGroup container,
11. Bundle savedInstanceState) {
12. View view = inflater.inflate(R.layout.user, null);
13. ImageView left = (ImageView) view.findViewById(R.id.iv_user_left);
14. left.setOnClickListener(new View.OnClickListener() {
15. public void onClick(View v) {
16. ((MainActivity) getActivity()).showLeft();
17. }
18. });
19. return view;
20. }
21. public void onActivityCreated(Bundle savedInstanceState) {
22. super.onActivityCreated(savedInstanceState);
23. }
24. }

其对应的布局代码如下:user.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffffff"
6. android:orientation="vertical" >
7. <LinearLayout
8. android:layout_width="fill_parent"
9. android:layout_height="wrap_content"
10. android:background="@drawable/banner_unit"
11. android:padding="7dip" >
12. <ImageView
13. android:id="@+id/iv_user_left"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_weight="0.1"
17. android:clickable="true"
18. android:src="@drawable/booklist_menu_normal" />
19. <TextView
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:layout_gravity="center_vertical"
23. android:layout_weight="0.8"
24. android:gravity="center_horizontal"
25. android:text="Fragment"
26. android:textColor="#000"
27. android:textSize="17dp" />
28. <ImageView
29. android:id="@+id/iv_right"
30. android:layout_width="wrap_content"
31. android:layout_height="wrap_content"
32. android:layout_gravity="right"
33. android:layout_weight="0.1"
34. android:clickable="true"
35. android:src="@drawable/back_normal" />
36. </LinearLayout>
37. <TextView
38. android:layout_width="fill_parent"
39. android:layout_height="fill_parent"
40. android:gravity="center"
41. android:text="用户管理"
42. android:textColor="#000000"
43. android:textSize="24sp" />
44. </LinearLayout>

⑨、其他不重要的代码如下：

DetailsActivity.java：

1. package net.loonggg.fragment;
2. import android.app.Activity;
3. import android.os.Bundle;
4. public class DetailsActivity extends Activity {
5. protected void onCreate(Bundle savedInstanceState) {
6. super.onCreate(savedInstanceState);
7. setContentView(R.layout.details);
8. }
9. }

其对应的布局文件代码如下：details.xml:

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="fill_parent"
3. android:layout_height="fill_parent"
4. android:background="#fff"
5. android:orientation="vertical" >
6. <ImageView
7. android:layout_width="match_parent"
8. android:layout_height="200dp"
9. android:scaleType="fitXY"
10. android:src="@drawable/p1" />
11. </LinearLayout>

还有就是string.xml的代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <string name="app_name">碎片化侧边栏</string>
4. <string name="action_settings">Settings</string>
5. <string name="title1">这种导弹的平均航速为5倍音速</string>
6. <string name="title2">这种导弹的平均航速为5倍音速</string>
7. <string name="title3">这种导弹的平均航速为5倍音速</string>
8. <string name="title4">这种导弹的平均航速为5倍音速</string>
9. <string name="title5">这种导弹的平均航速为5倍音速</string>
10. <string name="title6">这种导弹的平均航速为5倍音速</string>
11. <string name="title7">这种导弹的平均航速为5倍音速</string>
12. <string name="test">美国《空军》杂志、西班牙《世界报》等媒体报道，美军计划在今年内多次试射高超音速导弹，从而将其作为威慑中俄的强力武器。有外媒指出，解放军已开发出可拦截高速导弹的防控系统，而且有潜力进一步开发拦截高超音速导弹的防空武器。
13. 美
    国《空军》杂志报道，美军将在2013年继续试射高超音速巡航导弹，这种导弹的平均航速为5倍音速，最高瞬时航速达到7倍音速。对于目前全球所有的防卫系
    统来说，它都是无法防御的导弹。美国《防务新闻》更是声称，美军的“高超音速攻击时代”即将来临，目前各国军队尚无能力对这种高速攻击目标进行有效拦截，
    任何导弹防御系统在它面前都形同虚设。
14. 西班牙《世界报》报道，从2013年3月到12月，美军可能进行3次重要的实验，如果一切顺利，美军可能于2014年尝试装备少量的高超音速导弹，这种导弹有望在未来5年内形成战斗力。
15. 报道认为，美军高超音速导弹所形成的威胁以及对世界格局的影响难以估量。美国可能在一些“敏感区域”部署这种导弹，例如东亚地区，而朝鲜和伊朗的核设施也可能成为它的攻击目标。报道强调，美军高超音速导弹的主要作用是对其他军事大国实施威慑，主要是中国和俄罗斯。
16. 据
    俄罗斯《军工信使》周刊指出，解放军在防范超音速导弹攻击方面“已经追赶上来”，中国某国防工业公开发的代号为LD-2000的陆基防空系统，已经被证实
    具备实战能力。这种防空系统可为高价值目标，包括指挥所、弹道导弹发射装置等提供保护。LD-2000防空系统发射的导弹拦截高速飞行的导弹和飞机，尤其
    擅长对付雷达反射面积较小的隐身巡航导弹及高速巡航导弹。报道揣测，它可以准确拦截飞行速度超过两倍音速的超音速导弹。通过改进其控制软件，该系统还可用
    来拦截高速火箭弹和迫击炮弹。
17. 报道称，LD-2000系统可加装在军用卡车底盘上，从而实现机动部署，在需要它的地方构建防范超音速导弹的密集导弹阵。这种导弹集群的火力可与美军著名的“密集阵”(专门防御来袭空中目标的防空导弹集群)媲美。
18. 报道称，LD-2000是一款针对出口市场的产品，解放军肯定同步开发了自用型号，而且其性能必然优于LD-2000，应该可以防范速度更快的来袭目标，例如航速达到三四倍音速的巡航导弹。报道认为，这表明解放军有能力开发用来对付美军高超音速导弹的防御系统。</string>
19. </resources>

到这里就基本完成了。可能你现在没有看懂，我把源码放出来，供大家参考。源代码下载地址如下：

源代码