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在CODE上查看代码片派生到我的代码片
 
  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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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了

posted @ 2015-03-04 11:21  网络虫  阅读(412)  评论(0)  编辑  收藏  举报