先看看原图:

如图所示,这种侧滑效果以另一种方式替代了原先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了

Android仿新浪新闻SlidingMenu界面的实现 .的更多相关文章

  1. Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现

    UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...

  2. android仿新浪引导界面

    最近在研究如何做出仿微信,仿新浪等应用,第一次安装使用的使用展示应用程序的新特性和用法. 实现功能:左右手势滑屏 底部小圆点随当前显示页跳动 浮动按钮显示.当触屏事件发生显示,否则就渐渐消失 先转个文 ...

  3. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

  4. 门户级UGC系统的技术进化路线——新浪新闻评论系统的架构演进和经验总结(转)

    add by zhj:先收藏了 摘要:评论系统是所有门户网站的核心标准服务组件之一.本文作者曾负责新浪网评论系统多年,这套系统不仅服务于门户新闻业务,还包括调查.投票等产品,经历了从单机到多机再到集群 ...

  5. selenium+BeautifulSoup+phantomjs爬取新浪新闻

    一 下载phantomjs,把phantomjs.exe的文件路径加到环境变量中,也可以phantomjs.exe拷贝到一个已存在的环境变量路径中,比如我用的anaconda,我把phantomjs. ...

  6. Python_网络爬虫(新浪新闻抓取)

    爬取前的准备: BeautifulSoup的导入:pip install BeautifulSoup4 requests的导入:pip install requests 下载jupyter noteb ...

  7. 小爬新浪新闻AFCCL

    1.任务目标: 爬取新浪新闻AFCCL的文章:文章标题.时间.来源.内容.评论数等信息. 2.目标网页: http://sports.sina.com.cn/z/AFCCL/ 3.网页分析 4.源代码 ...

  8. Python爬虫:新浪新闻详情页的数据抓取(函数版)

    上一篇文章<Python爬虫:抓取新浪新闻数据>详细解说了如何抓取新浪新闻详情页的相关数据,但代码的构建不利于后续扩展,每次抓取新的详情页时都需要重新写一遍,因此,我们需要将其整理成函数, ...

  9. python3爬虫-爬取新浪新闻首页所有新闻标题

    准备工作:安装requests和BeautifulSoup4.打开cmd,输入如下命令 pip install requests pip install BeautifulSoup4 打开我们要爬取的 ...

随机推荐

  1. BZOJ1564 NOI2009二叉查找树(区间dp)

    首先按数据值排序,那么连续一段区间的dfs序一定也是连续的. 将权值离散化,设f[i][j][k]为i到j区间内所有点的权值都>=k的最小代价,转移时枚举根考虑是否修改权值即可. #includ ...

  2. 洛谷 P2055 [ZJOI2009]假期的宿舍

    洛谷 P2055 题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C ...

  3. 利用MSXSL.exe绕过AppLocker应用程序控制策略

    1.需要用到微软工具MSXSL.exe,msxsl.exe是微软用于命令行下处理XSL的一个程序,所以通过他,我们可以执行JavaScript进而执行系统命令,其下载地址为: https://www. ...

  4. 常用Transformation算子

    map 产生的键值对是tupple,      split分隔出来的是数组 一.常用Transformation算子 (map  .flatMap .filter .groupByKey .reduc ...

  5. 【bzoj4811】由乃的OJ

    Portal --> bzoj4811 Solution  这题可以用树剖+线段树做也可以用LCT做,不过大体思路是一样的  (接下来先讲的是树剖+线段树的做法,再提LCT的做法) ​  首先位 ...

  6. 《用Apache HttpClient实现URL重定向》

    作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 很多网站都使用了URL重定向技术,把一个原始请求从一个位置路由到另一个位置.原因可能是多方面的,比如域名转 ...

  7. Vue.js随笔四(方法的声明和使用)

    1.首先你需要新建路由,这个就不多说了 2.然后在你的新的.vue里面需要如下所示的添加methods:{方法},然后按钮的里面你会看到v-on:click,这就是点击这个按钮会触发的动作,这个就是触 ...

  8. JS中的匿名函数自执行、函数声明与函数表达式

    先看一段jQuery源码中匿名函数自执行的例子: (function( window, undefined ) { // jquery code })(window); 另外一种常见的写法: +fun ...

  9. NOIP 2015 提高组 Day2

    期望得分:100+10+60=170 实际得分:100+10+35=145 http://www.cogs.pro/cogs/page/page.php?aid=16 T1 跳石头 时间限制:1 s  ...

  10. 一张图搞懂Spring bean的完整生命周期

    一张图搞懂Spring bean的生命周期,从Spring容器启动到容器销毁bean的全过程,包括下面一系列的流程,了解这些流程对我们想在其中任何一个环节怎么操作bean的生成及修饰是非常有帮助的. ...