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

今天蓝老师要讲的是关于新浪新闻侧滑界面的实现。先看看原图:

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

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

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

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

里面包含了demo示例,相关效果图如下:

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

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

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

代码片段:

  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. private void setupViews(){
  27.  
  28. setContentView(R.layout.main_slidemenu_layout);
  29.  
  30. initActionBar();
  31.  
  32. initSlideMenu();
  33.  
  34. }
  35.  
  36. private void initSlideMenu(){
  37. FragmentModel fragmentModel = mControlCenter.getTouTiaoFragmentModel();
  38. switchContent(fragmentModel);
  39.  
  40. SlidingMenu sm = getSlidingMenu();
  41. sm.setMode(SlidingMenu.LEFT_RIGHT);
  42.  
  43. setBehindContentView(R.layout.left_menu_frame);
  44. sm.setSlidingEnabled(true);
  45. sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
  46. sm.setShadowWidthRes(R.dimen.shadow_width);
  47. sm.setShadowDrawable(R.drawable.shadow);
  48. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  49. getSupportFragmentManager()
  50. .beginTransaction()
  51. .replace(R.id.left_menu_frame, new NavigationFragment())
  52. .commit();
  53. sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
  54. sm.setBehindScrollScale(0);
  55. sm.setFadeDegree(0.25f);
  56.  
  57. sm.setSecondaryMenu(R.layout.right_menu_frame);
  58. sm.setSecondaryShadowDrawable(R.drawable.shadow);
  59. getSupportFragmentManager()
  60. .beginTransaction()
  61. .replace(R.id.right_menu_frame, new SettingFragment())
  62. .commit();
  63. }
  64.  
  65. private void initActionBar(){
  66. ActionBar actionBar = getSupportActionBar();
  67. actionBar.setCustomView(R.layout.actionbar_layout);
  68. actionBar.setDisplayShowCustomEnabled(true);
  69. actionBar.setDisplayShowHomeEnabled(false);
  70.  
  71. mLeftIcon = (ImageView) findViewById(R.id.iv_left_icon);
  72. mRightIcon = (ImageView) findViewById(R.id.iv_right_icon);
  73. mLeftIcon.setOnClickListener(this);
  74. mRightIcon.setOnClickListener(this);
  75.  
  76. mTitleTextView = (TextView) findViewById(R.id.tv_title);
  77. }
  78.  
  79. private void initData(){
  80.  
  81. }
  82.  
  83. public void switchContent(final FragmentModel fragment) {
  84. mTitle = fragment.mTitle;
  85. mContent = fragment.mFragment;
  86.  
  87. getSupportFragmentManager()
  88. .beginTransaction()
  89. .replace(R.id.content_frame, mContent)
  90. .commit();
  91. Handler h = new Handler();
  92. h.postDelayed(new Runnable() {
  93. public void run() {
  94. getSlidingMenu().showContent();
  95. }
  96. }, 50);
  97.  
  98. mTitleTextView.setText(mTitle);
  99. }
  100.  
  101. @Override
  102. public void onClick(View view) {
  103. switch(view.getId()){
  104. case R.id.iv_left_icon:
  105. toggle();
  106. break;
  107. case R.id.iv_right_icon:
  108. showSecondaryMenu();
  109. break;
  110. }
  111. }
  112.  
  113. }

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

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

NavigationFragment是左侧菜单

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

SettingFragment是右侧菜单

  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. @Override
  12. public void onCreate(Bundle savedInstanceState) {
  13. // TODO Auto-generated method stub
  14. super.onCreate(savedInstanceState);
  15. log.e("SettingFragment onCreate");
  16. }
  17.  
  18. @Override
  19. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  20. Bundle savedInstanceState) {
  21. log.e("SettingFragment onCreateView");
  22. View view = inflater.inflate(R.layout.setting_layout, null);
  23.  
  24. return view;
  25. }
  26.  
  27. @Override
  28. public void onActivityCreated(Bundle savedInstanceState) {
  29. super.onActivityCreated(savedInstanceState);
  30. log.e("SettingFragment onActivityCreated");
  31.  
  32. setupViews();
  33. }
  34.  
  35. private void setupViews(){
  36.  
  37. }
  38.  
  39. @Override
  40. public void onDestroy() {
  41. // TODO Auto-generated method stub
  42. super.onDestroy();
  43. log.e("SettingFragment onDestroy");
  44. }
  45. }

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

附上链接工程:

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

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

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

OK,本节课到此为止!欲知更多Android-UI技巧,请关注窝的下一堂课~

更多精彩尽在http://blog.csdn.net/geniuseoe2012

welcome to join android develop group:298044305

上一课:Lance老师UI系列教程第七课->自定义spinner下拉框实现的实现

Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现的更多相关文章

  1. Lance老师UI系列教程第九课->高仿比特币监控大师

    http://blog.csdn.net/lancees/article/details/22898971

  2. Java NIO系列教程(八)JDK AIO编程

    目录: Reactor(反应堆)和Proactor(前摄器) <I/O模型之三:两种高性能 I/O 设计模式 Reactor 和 Proactor> <[转]第8章 前摄器(Proa ...

  3. spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息

    spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息 本文主要内容: 1:管理页面主机名及访问ip信息提示修改 2:获取当前注册中心的服务列表及每个服务对于的服务提供者列表 ...

  4. ComicEnhancerPro 系列教程十八:JPG文件长度与质量

    作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十八:JPG文件长度 ...

  5. 数据挖掘入门系列教程(八)之使用神经网络(基于pybrain)识别数字手写集MNIST

    目录 数据挖掘入门系列教程(八)之使用神经网络(基于pybrain)识别数字手写集MNIST 下载数据集 加载数据集 构建神经网络 反向传播(BP)算法 进行预测 F1验证 总结 参考 数据挖掘入门系 ...

  6. NeHe OpenGL教程 第八课:混合

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable

    大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...

  8. ionic新手教程第八课-(加更)从无到有说Ionic、绘图说明MVC-U-S

    这节课的内容,有些前面几节已经说过了. 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic. 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,认为还是挺适合零基础的朋友学习的. 有些前 ...

  9. 【Morn UI系列教程】Morn简介及使用教程

    网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Morn UI学习了Flash IDE使用的方便性(比如图层功能, ...

随机推荐

  1. Oracle 学习笔记(一)Oracle的基本介绍与语法

    1.1 Oracle基础知识 1.1.1 介绍 Oracle数据库的主要特点: 支持多用户.大事务量的事务处理 在保持数据安全性和完整性方面性能优越 支持分布式数据处理 具有可移植性 1.1.2 Or ...

  2. hdu 2156

    #include <iostream> #include <stdio.h> using namespace std; int main() { int i,n; while( ...

  3. ADB错误“more than one device and emulator”(转)

    当我连着手机充电的时候,启动模拟器调试,执行ADB指令时,报错.C:\Users\gaojs>adb shellerror: more than one device and emulatorC ...

  4. An attempt to attach an auto-named database for file

    在用VS自带的 .mdf读取(joint)时,报错: Server Error in '/' Application. An attempt to attach an auto-named datab ...

  5. ORA-00214: controlfile '/u01/app/oracle/oradata/[sid]/control01.ctl' version inconsistent with file '/u01/app/oracle/oradata/[sid]/control03.ctl'

    Sample error: SQL> startupORACLE instance started. Total System Global Area 285212672 bytesFixed ...

  6. 武汉科技大学ACM :1004: 零起点学算法74——Palindromes _easy version

    Problem Description “回文串”是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串.请写一个程序判断读入的字符串是否是“回文”. Input 输入包含多 ...

  7. Apache 2.x+jboss6.1反向代理session共享问题设置

    2016年8月4日,第一次开笔写博客园,今天在公司解决了一个问题. apache+jboss做负载均衡的问题一直困扰了很久.问题描述如下,使用apche做反向代理转发给3台jboss 的app,app ...

  8. InnoDB概览

    InnoDB 采用了MVCC来支持高并发,并且实现了四个标准的隔离级别.其默认级别是REPEATABLE READ(可重复读) ,并且,通过间隙锁(next-key locking)策略防止幻读的出现 ...

  9. CentOS下几种软件安装方式

    1.rpmRPM RedHat Package Manager(RedHat软件包管理工具)的缩写,这一文件格式名称虽然打上了RedHat的标志, 但是其原始设计理念是开放式的,现在包括OpenLin ...

  10. Graphics2D 中文乱码

    今天遇到了一个乱码问题,合成的小票图片上的中文全部变成了口口口,后来在网上查了资料,发现是Graphics2D用了宋体字,而linux服务器上没有对应的字体库. 把本地的字体库上传上去就解决了. 本地 ...