Android仿新浪新闻SlidingMenu界面的实现 .

先看看原图：

如图所示，这种侧滑效果以另一种方式替代了原先tab导航的那种用户体验方式

给人耳目一新的感觉，现已被广大知名应用所效仿，如新浪新闻，网易新闻，人人网等

那么这种效果该如何实现呢？那就需要用到一个开源库SlidingMenu

Github地址：https://github.com/jfeinstein10/SlidingMenu

里面包含了demo示例，相关效果图如下：

同时该库又依赖另一个开源库ActionBarSherkLock ,有关该库的介绍，请看此博文http://blog.csdn.net/geniuseoe2012/article/details/9046487

大家最好先把官方demo跑一遍，理清里边的依赖关系以及对库的基本使用，这样自己运用到项目当中就可以得心应手了

OK，最后言归正传，看看新浪新闻的侧滑实现，先上山寨版效果图：

代码片段：

[cpp] view plaincopy

 

1. public class MainActivity extends SlidingFragmentActivity implements OnClickListener{
2. private static final CommonLog log = LogFactory.createLog();
3. private String mTitle;
4. private Fragment mContent;
5. private ImageView mLeftIcon;
6. private ImageView mRightIcon;
7. private TextView mTitleTextView;
8. private FragmentControlCenter mControlCenter;
9. @Override
10. public void onCreate(Bundle savedInstanceState) {
11. // TODO Auto-generated method stub
12. super.onCreate(savedInstanceState);
13. mControlCenter = FragmentControlCenter.getInstance(this);
14. setupViews();
15. initData();
16. }
17. private void setupViews(){
18. setContentView(R.layout.main_slidemenu_layout);
19. initActionBar();
20. initSlideMenu();
21. }
22. private void initSlideMenu(){
23. FragmentModel fragmentModel = mControlCenter.getTouTiaoFragmentModel();
24. switchContent(fragmentModel);
25. SlidingMenu sm = getSlidingMenu();
26. sm.setMode(SlidingMenu.LEFT_RIGHT);
27. setBehindContentView(R.layout.left_menu_frame);
28. sm.setSlidingEnabled(true);
29. sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
30. sm.setShadowWidthRes(R.dimen.shadow_width);
31. sm.setShadowDrawable(R.drawable.shadow);
32. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
33. getSupportFragmentManager()
34. .beginTransaction()
35. .replace(R.id.left_menu_frame, new NavigationFragment())
36. .commit();
37. sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
38. sm.setBehindScrollScale(0);
39. sm.setFadeDegree(0.25f);
40. sm.setSecondaryMenu(R.layout.right_menu_frame);
41. sm.setSecondaryShadowDrawable(R.drawable.shadow);
42. getSupportFragmentManager()
43. .beginTransaction()
44. .replace(R.id.right_menu_frame, new SettingFragment())
45. .commit();
46. }
47. private void initActionBar(){
48. ActionBar actionBar = getSupportActionBar();
49. actionBar.setCustomView(R.layout.actionbar_layout);
50. actionBar.setDisplayShowCustomEnabled(true);
51. actionBar.setDisplayShowHomeEnabled(false);
52. mLeftIcon = (ImageView) findViewById(R.id.iv_left_icon);
53. mRightIcon = (ImageView) findViewById(R.id.iv_right_icon);
54. mLeftIcon.setOnClickListener(this);
55. mRightIcon.setOnClickListener(this);
56. mTitleTextView = (TextView) findViewById(R.id.tv_title);
57. }
58. private void initData(){
59. }
60. public void switchContent(final FragmentModel fragment) {
61. mTitle = fragment.mTitle;
62. mContent = fragment.mFragment;
63. getSupportFragmentManager()
64. .beginTransaction()
65. .replace(R.id.content_frame, mContent)
66. .commit();
67. Handler h = new Handler();
68. h.postDelayed(new Runnable() {
69. public void run() {
70. getSlidingMenu().showContent();
71. }
72. }, 50);
73. mTitleTextView.setText(mTitle);
74. }
75. @Override
76. public void onClick(View view) {
77. switch(view.getId()){
78. case R.id.iv_left_icon:
79. toggle();
80. break;
81. case R.id.iv_right_icon:
82. showSecondaryMenu();
83. break;
84. }
85. }
86. }

这里actionbar使用自定义布局，主要是使用ActionBarSherklock里的默认布局不知道怎么把title标题居中

找了半天没发现相关属性，如果有童鞋知道麻烦告知

NavigationFragment是左侧菜单

[cpp] view plaincopy

 

1. public class NavigationFragment extends Fragment implements OnCheckedChangeListener, OnClickListener{
2. private static final CommonLog log = LogFactory.createLog();
3. private View mView;
4. private RadioGroup  m_radioGroup;
5. private ImageButton m_AddButton;
6. private FragmentControlCenter mControlCenter;
7. public NavigationFragment(){
8. }
9. @Override
10. public void onCreate(Bundle savedInstanceState) {
11. // TODO Auto-generated method stub
12. super.onCreate(savedInstanceState);
13. log.e("NavigationFragment onCreate");
14. mControlCenter = FragmentControlCenter.getInstance(getActivity());
15. }
16. @Override
17. public void onDestroy() {
18. // TODO Auto-generated method stub
19. super.onDestroy();
20. log.e("NavigationFragment onDestroy");
21. }
22. @Override
23. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
24. log.e("NavigationFragment onCreateView");
25. mView = inflater.inflate(R.layout.navitation_channel_layout, null);
26. return mView;
27. }
28. @Override
29. public void onActivityCreated(Bundle savedInstanceState) {
30. super.onActivityCreated(savedInstanceState);
31. log.e("NavigationFragment onActivityCreated");
32. setupViews();
33. }
34. private void setupViews(){
35. m_radioGroup = (RadioGroup) mView.findViewById(R.id.nav_radiogroup);
36. ((RadioButton) m_radioGroup.getChildAt(0)).toggle();
37. m_radioGroup.setOnCheckedChangeListener(this);
38. m_AddButton = (ImageButton) mView.findViewById(R.id.ib_add_content);
39. m_AddButton.setOnClickListener(this);
40. }
41. @Override
42. public void onCheckedChanged(RadioGroup arg0, int id) {
43. switch(id){
44. case R.id.rb_toutiao:
45. goTouTiaoFragment();
46. break;
47. case R.id.rb_yule:
48. goYuLeFragment();
49. break;
50. case R.id.rb_tech:
51. goTechFragment();
52. break;
53. case R.id.rb_blog:
54. goBlogFragment();
55. break;
56. }
57. }
58. private void goTouTiaoFragment(){
59. if (getActivity() == null)
60. return;
61. FragmentModel fragmentModel = mControlCenter.getTouTiaoFragmentModel();
62. if (getActivity() instanceof MainActivity) {
63. MainActivity ra = (MainActivity) getActivity();
64. ra.switchContent(fragmentModel);
65. }
66. }
67. private void goYuLeFragment(){
68. if (getActivity() == null)
69. return;
70. FragmentModel fragmentModel = mControlCenter.getYuLeFragmentModel();
71. if (getActivity() instanceof MainActivity) {
72. MainActivity ra = (MainActivity) getActivity();
73. ra.switchContent(fragmentModel);
74. }
75. }
76. private void goTechFragment(){
77. if (getActivity() == null)
78. return;
79. FragmentModel fragmentModel = mControlCenter.getTechFragmentModel();
80. if (getActivity() instanceof MainActivity) {
81. MainActivity ra = (MainActivity) getActivity();
82. ra.switchContent(fragmentModel);
83. }
84. }
85. private void goBlogFragment(){
86. if (getActivity() == null)
87. return;
88. FragmentModel fragmentModel = mControlCenter.getBlogFragmentModel();
89. if (getActivity() instanceof MainActivity) {
90. MainActivity ra = (MainActivity) getActivity();
91. ra.switchContent(fragmentModel);
92. }
93. }
94. @Override
95. public void onClick(View v) {
96. switch(v.getId()){
97. case R.id.ib_add_content:
98. Toast.makeText(getActivity(), "添加尼妹,现在没内容！！！", Toast.LENGTH_SHORT).show();
99. break;
100. }
101. }
102. }

SettingFragment是右侧菜单

[cpp] view plaincopy

 

1. public class SettingFragment extends Fragment{
2. private static final CommonLog log = LogFactory.createLog();
3. private View mView;
4. public SettingFragment(){
5. }
6. @Override
7. public void onCreate(Bundle savedInstanceState) {
8. // TODO Auto-generated method stub
9. super.onCreate(savedInstanceState);
10. log.e("SettingFragment onCreate");
11. }
12. @Override
13. public View onCreateView(LayoutInflater inflater, ViewGroup container,
14. Bundle savedInstanceState) {
15. log.e("SettingFragment onCreateView");
16. View view = inflater.inflate(R.layout.setting_layout, null);
17. return view;
18. }
19. @Override
20. public void onActivityCreated(Bundle savedInstanceState) {
21. super.onActivityCreated(savedInstanceState);
22. log.e("SettingFragment onActivityCreated");
23. setupViews();
24. }
25. private void setupViews(){
26. }
27. @Override
28. public void onDestroy() {
29. // TODO Auto-generated method stub
30. super.onDestroy();
31. log.e("SettingFragment onDestroy");
32. }
33. }

两个fragment是附在主activity上的，其它的大伙自个儿down代码看吧

附上链接工程：

http://download.csdn.net/detail/geniuseoe2012/5832027

压缩包解开后有如下目录：

前面三个都是链接库，彼此又有依赖，最后工程再依赖前面三者，添加完毕后就可以正常running了