Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
今天蓝老师要讲的是关于新浪新闻侧滑界面的实现。先看看原图:
如图所示,这种侧滑效果以另一种方式替代了原先tab导航的那种用户体验方式
给人耳目一新的感觉,现已被广大知名应用所效仿,如新浪新闻,网易新闻,人人网等
那么这种效果该如何实现呢?那就需要用到一个开源库SlidingMenu
Github地址:https://github.com/jfeinstein10/SlidingMenu
里面包含了demo示例,相关效果图如下:
同时该库又依赖另一个开源库ActionBarSherkLock ,有关该库的介绍,请看此博文http://blog.csdn.net/geniuseoe2012/article/details/9046487
大家最好先把官方demo跑一遍,理清里边的依赖关系以及对库的基本使用,这样自己运用到项目当中就可以得心应手了
OK,最后言归正传,看看新浪新闻的侧滑实现,先上山寨版效果图:
代码片段:
public class MainActivity extends SlidingFragmentActivity implements OnClickListener{ private static final CommonLog log = LogFactory.createLog(); private String mTitle;
private Fragment mContent; private ImageView mLeftIcon;
private ImageView mRightIcon;
private TextView mTitleTextView; private FragmentControlCenter mControlCenter; @Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState); mControlCenter = FragmentControlCenter.getInstance(this); setupViews(); initData();
} private void setupViews(){ setContentView(R.layout.main_slidemenu_layout); initActionBar(); initSlideMenu(); } private void initSlideMenu(){
FragmentModel fragmentModel = mControlCenter.getTouTiaoFragmentModel();
switchContent(fragmentModel); SlidingMenu sm = getSlidingMenu();
sm.setMode(SlidingMenu.LEFT_RIGHT); setBehindContentView(R.layout.left_menu_frame);
sm.setSlidingEnabled(true);
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
sm.setShadowWidthRes(R.dimen.shadow_width);
sm.setShadowDrawable(R.drawable.shadow);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.left_menu_frame, new NavigationFragment())
.commit();
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
sm.setBehindScrollScale(0);
sm.setFadeDegree(0.25f); sm.setSecondaryMenu(R.layout.right_menu_frame);
sm.setSecondaryShadowDrawable(R.drawable.shadow);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.right_menu_frame, new SettingFragment())
.commit();
} private void initActionBar(){
ActionBar actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.actionbar_layout);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowHomeEnabled(false); mLeftIcon = (ImageView) findViewById(R.id.iv_left_icon);
mRightIcon = (ImageView) findViewById(R.id.iv_right_icon);
mLeftIcon.setOnClickListener(this);
mRightIcon.setOnClickListener(this); mTitleTextView = (TextView) findViewById(R.id.tv_title);
} private void initData(){ } public void switchContent(final FragmentModel fragment) {
mTitle = fragment.mTitle;
mContent = fragment.mFragment; getSupportFragmentManager()
.beginTransaction()
.replace(R.id.content_frame, mContent)
.commit();
Handler h = new Handler();
h.postDelayed(new Runnable() {
public void run() {
getSlidingMenu().showContent();
}
}, 50); mTitleTextView.setText(mTitle);
} @Override
public void onClick(View view) {
switch(view.getId()){
case R.id.iv_left_icon:
toggle();
break;
case R.id.iv_right_icon:
showSecondaryMenu();
break;
}
} }
这里actionbar使用自定义布局,主要是使用ActionBarSherklock里的默认布局不知道怎么把title标题居中
找了半天没发现相关属性,如果有童鞋知道麻烦告知
NavigationFragment是左侧菜单
public class NavigationFragment extends Fragment implements OnCheckedChangeListener, OnClickListener{ private static final CommonLog log = LogFactory.createLog(); private View mView;
private RadioGroup m_radioGroup;
private ImageButton m_AddButton; private FragmentControlCenter mControlCenter; public NavigationFragment(){ } @Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState); log.e("NavigationFragment onCreate"); mControlCenter = FragmentControlCenter.getInstance(getActivity());
} @Override
public void onDestroy() {
// TODO Auto-generated method stub
super.onDestroy(); log.e("NavigationFragment onDestroy");
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
log.e("NavigationFragment onCreateView"); mView = inflater.inflate(R.layout.navitation_channel_layout, null);
return mView;
} @Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
log.e("NavigationFragment onActivityCreated"); setupViews();
} private void setupViews(){
m_radioGroup = (RadioGroup) mView.findViewById(R.id.nav_radiogroup);
((RadioButton) m_radioGroup.getChildAt(0)).toggle(); m_radioGroup.setOnCheckedChangeListener(this); m_AddButton = (ImageButton) mView.findViewById(R.id.ib_add_content);
m_AddButton.setOnClickListener(this);
} @Override
public void onCheckedChanged(RadioGroup arg0, int id) {
switch(id){
case R.id.rb_toutiao:
goTouTiaoFragment();
break;
case R.id.rb_yule:
goYuLeFragment();
break;
case R.id.rb_tech:
goTechFragment();
break;
case R.id.rb_blog:
goBlogFragment();
break;
}
} private void goTouTiaoFragment(){
if (getActivity() == null)
return; FragmentModel fragmentModel = mControlCenter.getTouTiaoFragmentModel();
if (getActivity() instanceof MainActivity) {
MainActivity ra = (MainActivity) getActivity();
ra.switchContent(fragmentModel);
}
} private void goYuLeFragment(){
if (getActivity() == null)
return; FragmentModel fragmentModel = mControlCenter.getYuLeFragmentModel();
if (getActivity() instanceof MainActivity) {
MainActivity ra = (MainActivity) getActivity();
ra.switchContent(fragmentModel);
}
} private void goTechFragment(){
if (getActivity() == null)
return; FragmentModel fragmentModel = mControlCenter.getTechFragmentModel();
if (getActivity() instanceof MainActivity) {
MainActivity ra = (MainActivity) getActivity();
ra.switchContent(fragmentModel);
}
} private void goBlogFragment(){
if (getActivity() == null)
return; FragmentModel fragmentModel = mControlCenter.getBlogFragmentModel();
if (getActivity() instanceof MainActivity) {
MainActivity ra = (MainActivity) getActivity();
ra.switchContent(fragmentModel);
}
} @Override
public void onClick(View v) {
switch(v.getId()){
case R.id.ib_add_content:
Toast.makeText(getActivity(), "添加尼妹,现在没内容!!!", Toast.LENGTH_SHORT).show();
break;
}
} }
SettingFragment是右侧菜单
public class SettingFragment extends Fragment{ private static final CommonLog log = LogFactory.createLog(); private View mView; public SettingFragment(){ } @Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
log.e("SettingFragment onCreate");
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
log.e("SettingFragment onCreateView");
View view = inflater.inflate(R.layout.setting_layout, null); return view;
} @Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
log.e("SettingFragment onActivityCreated"); setupViews();
} private void setupViews(){ } @Override
public void onDestroy() {
// TODO Auto-generated method stub
super.onDestroy();
log.e("SettingFragment onDestroy");
}
}
两个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界面的实现的更多相关文章
- Lance老师UI系列教程第九课->高仿比特币监控大师
http://blog.csdn.net/lancees/article/details/22898971
- Java NIO系列教程(八)JDK AIO编程
目录: Reactor(反应堆)和Proactor(前摄器) <I/O模型之三:两种高性能 I/O 设计模式 Reactor 和 Proactor> <[转]第8章 前摄器(Proa ...
- spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息
spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息 本文主要内容: 1:管理页面主机名及访问ip信息提示修改 2:获取当前注册中心的服务列表及每个服务对于的服务提供者列表 ...
- ComicEnhancerPro 系列教程十八:JPG文件长度与质量
作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十八:JPG文件长度 ...
- 数据挖掘入门系列教程(八)之使用神经网络(基于pybrain)识别数字手写集MNIST
目录 数据挖掘入门系列教程(八)之使用神经网络(基于pybrain)识别数字手写集MNIST 下载数据集 加载数据集 构建神经网络 反向传播(BP)算法 进行预测 F1验证 总结 参考 数据挖掘入门系 ...
- NeHe OpenGL教程 第八课:混合
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable
大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...
- ionic新手教程第八课-(加更)从无到有说Ionic、绘图说明MVC-U-S
这节课的内容,有些前面几节已经说过了. 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic. 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,认为还是挺适合零基础的朋友学习的. 有些前 ...
- 【Morn UI系列教程】Morn简介及使用教程
网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Morn UI学习了Flash IDE使用的方便性(比如图层功能, ...
随机推荐
- MyEclipse设置默认的文档注释
- 重学《C#高级编程》(对象与类型)
昨天重看了下<C#高级编程>里面的对象与类型一章,发现自己有许多遗漏没懂的地方重新弄清楚明白了 先说说什么是对象吧,我个人的感觉是:在编程的世界里,一段程序就是一个事物的处理逻辑,而对象就 ...
- adb服务无法启动
今天学习android编程发现调试出错 The connection to adb is down, and a severe error has occured. You must restart ...
- css书写步骤
CSS整体书写步骤1:CSS RESET 重置2:CSS GLABAL 全局属性3: CSS分模块属性,(先写默认样式和设计图相差最大的部分,先大块布局,后细致调整) <style>/*C ...
- 问题: Type mismatch in key from map: expected org.apache.hadoop.io.Text, recieved org.apache.hadoop.io.LongWritable 解决方案
在Job中添加相应的输入类型,例如: job.setMapOutputKeyClass(Text.class); job.setMapOutputValueClass(IntWritable.clas ...
- 类似百度音乐唱片播放时CD图片不停旋转的实现
类似百度音乐唱片播放时CD图片不停旋转的实现 效果图 1 html代码 2 <imgsrc="img/logo.png"class="img-responsive& ...
- Android基本组件-Activity
什么是Activity 在Android程序中,每个Activity继承自android.app.Activity, 有一个与之对应的xml布局文件, 一个界面对应一个Activity, 每个Acti ...
- ueditor从excel粘贴过来的表格不显示问题
这是设置表格边框可见的办法
- HTML5 web开发时遇到的一个奇葩问题。
昨天做了一个手机端的H5 页面. 首先就是各种兼容测试,调整修复..一系列操作之后,拿过来N多手机神马华为.小米.三星.水果5.6.plus,一番测试之后.嗯,还不错,稍作等待之后就上线了. 这是分割 ...
- 工作中用到的Jquery特效
jQuery缓慢弹出下拉tab导航 http://sc.chinaz.com/jiaoben/130811578701.htm