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

先看看原图：

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

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

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

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

 

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

 

 

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

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

 

 

 

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

代码片段：

[cpp]  view plain copy

 

 

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

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

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

 

 

NavigationFragment是左侧菜单

[cpp]  view plain copy

 

 

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

SettingFragment是右侧菜单

[cpp]  view plain copy

 

 

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

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

附上链接工程：

 

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

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

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