高仿今日头条(转载)

高仿今日头条 --- 第一篇:(android高仿系列)今日头条
--新闻阅读器 (一)
   

上次,已经完成了头部新闻分类栏目的拖动效果。

这篇文章是继续去完善APP 今日头条  这个新闻阅读器的其他功能。

这次所实现的功能清单:

1.通过SlidingMenu实现左右侧拉菜单效果

2.通过重写CompoundButton实现--昼夜模式切换按钮效果。

3.通过PopupWindow控件实现了列表中更多菜单弹框操作效果。

4.通过universal-image-loader库实现了图片的加载和缓存。

5.通过列表中各个属性的判断,实现了头条新闻列表的相应布局和显示效果。

下面把每个功能和对应的实现方式相关博文都列出了,方便大家根据自身需求查看。

下面就是官方的效果截图,详细操作请继续向下看。

                

一.通过SlidingMenu实现左右侧拉菜单效果

在第一讲中,我们已经知道了,它使用了SlidingMenu 这个侧拉菜单开源库,所以我特地将 SlidingMenu的使用和配置写了一个文章,文章地址:Android
SlidingMenu 开源项目 侧拉菜单的使用(详细配置)

所以具体的配置就不在这里说明了,大家可以去看上面给的链接。

注意:由于 今日头条用的是左右都可以侧拉的菜单,所以设置侧拉模式为:SlidingMenu.LEFT_RIGHT,代码如下

[java] view plaincopy

  1. localSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//设置左右滑菜单    

由于左右可以拖出菜单,并且中间的ViewPager可以切换新闻页面,所以SlidingMenu的必须如此设置以下属性:

[java] view plaincopy

  1. localSlidingMenu.setTouchModeAbove(SlidingMenu.SLIDING_WINDOW);//设置要使菜单滑动,触碰屏幕的范围  

SLIDEING_WINDOW就是触摸边缘才会出发,这样的话滑动操作就不用冲突了。

为了方便代码的维护,我将SlidingMenu 自定义成了一个DrawerView类,这样的话所有菜单中的操作就和主界面分离开来,代码就不会显得那么臃肿了,并且在用到的地址直接实例化这个类就可以了。

代码如下:

[java] view plaincopy

  1. public class DrawerView implements OnClickListener{  
  2.     private final Activity activity;  
  3.     SlidingMenu localSlidingMenu;  
  4.     private SwitchButton night_mode_btn;  
  5.     private TextView night_mode_text;  
  6.     private RelativeLayout setting_btn;  
  7.     public DrawerView(Activity activity) {  
  8.         this.activity = activity;  
  9.     }  
  10.   
  11.     public SlidingMenu initSlidingMenu() {  
  12.         localSlidingMenu = new SlidingMenu(activity);  
  13.         localSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//设置左右滑菜单  
  14.         localSlidingMenu.setTouchModeAbove(SlidingMenu.SLIDING_WINDOW);//设置要使菜单滑动,触碰屏幕的范围  
  15. //      localSlidingMenu.setTouchModeBehind(SlidingMenu.RIGHT);  
  16.         localSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度  
  17.         localSlidingMenu.setShadowDrawable(R.drawable.shadow);//设置阴影图片  
  18.         localSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度  
  19.         localSlidingMenu.setFadeDegree(0.35F);//SlidingMenu滑动时的渐变程度  
  20.         localSlidingMenu.attachToActivity(activity, SlidingMenu.RIGHT);//使SlidingMenu附加在Activity右边  
  21. //      localSlidingMenu.setBehindWidthRes(R.dimen.left_drawer_avatar_size);//设置SlidingMenu菜单的宽度  
  22.         localSlidingMenu.setMenu(R.layout.left_drawer_fragment);//设置menu的布局文件  
  23. //      localSlidingMenu.toggle();//动态判断自动关闭或开启SlidingMenu  
  24.         localSlidingMenu.setSecondaryMenu(R.layout.profile_drawer_right);  
  25.         localSlidingMenu.setSecondaryShadowDrawable(R.drawable.shadowright);  
  26.         localSlidingMenu.setOnOpenedListener(new SlidingMenu.OnOpenedListener() {  
  27.                     public void onOpened() {  
  28.                           
  29.                     }  
  30.                 });  
  31.           
  32.         initView();  
  33.         return localSlidingMenu;  
  34.     }  
  35.   
  36.     private void initView() {  
  37.         night_mode_btn = (SwitchButton)localSlidingMenu.findViewById(R.id.night_mode_btn);  
  38.         night_mode_text = (TextView)localSlidingMenu.findViewById(R.id.night_mode_text);  
  39.         night_mode_btn.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
  40.               
  41.             @Override  
  42.             public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
  43.                 // TODO Auto-generated method stub  
  44.                 if(isChecked){  
  45.                     night_mode_text.setText(activity.getResources().getString(R.string.action_night_mode));  
  46.                 }else{  
  47.                     night_mode_text.setText(activity.getResources().getString(R.string.action_day_mode));  
  48.                 }  
  49.             }  
  50.         });  
  51.         night_mode_btn.setChecked(false);  
  52.         if(night_mode_btn.isChecked()){  
  53.             night_mode_text.setText(activity.getResources().getString(R.string.action_night_mode));  
  54.         }else{  
  55.             night_mode_text.setText(activity.getResources().getString(R.string.action_day_mode));  
  56.         }  
  57.           
  58.         setting_btn =(RelativeLayout)localSlidingMenu.findViewById(R.id.setting_btn);  
  59.         setting_btn.setOnClickListener(this);  
  60.     }  
  61.   
  62.     @Override  
  63.     public void onClick(View v) {  
  64.         switch (v.getId()) {  
  65.         case R.id.setting_btn:  
  66.             activity.startActivity(new Intent(activity,SettingsActivity.class));  
  67.             activity.overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);  
  68.             break;  
  69.   
  70.         default:  
  71.             break;  
  72.         }  
  73.     }  
  74. }  

2.通过重写CompoundButton实现--昼夜模式切换按钮效果

看源码发现,今日头条的中的是SwitchButton昼夜模式选择控件,是通过重写CompoundButton实现的,以下便是实现对应方法的相关帖子:

SwitchButton
开关按钮 的多种实现方式 (附源码DEMO)

根据需求选择你喜欢的SwitchButton去修改和使用。

3.通过PopupWindow控件实现了列表中更多菜单弹框操作效果。

在开发中发现,每个新闻列表中对应的ITEM中按钮出发的弹框效果其实是通过PopupWindow实现的,相关博文如下

android
仿 新闻阅读器 菜单弹出效果(附源码DEMO)

4.通过universal-image-loader库实现了图片的加载和缓存。

一个新闻客户端肯定涉及到一个图片异步加载缓存的方法,所以这里使用开发中最常用的开源库之一

universal-image-loader来实现相关的需求。如果你对这个库的使用不是很了解的话,可以查看以下链接:

Android-Universal-Image-Loader
图片异步加载类库的使用(超详细配置)

---根据你需求配置相应的属性即可。

5.通过列表中各个属性的判断,实现了头条新闻列表的相应布局和显示效果。

新闻客户端中,每个新闻的布局都可能不一样,所以你可以选择2种最常用的方式去根据需求改变一个LISTVIEW里面的布局。

1.操作上会麻烦一点,维护起来很方便

BaseAdapter中有个自带的方法,就是getViewTypeCount() ,用户可以使用这个方法获取ITEM的种类数量,之后在getView()的时候判断对应到额种类type之后设给他对应的布局即可,常见的例子有:唱吧中的名人榜

2.操作上很方便,只用根据需求设置布局的显示隐藏效果,缺点:如果控件一多,不在注释的话,可能维护起来就很麻烦。

在这里,其实采用第2种方式就可以了,分析它对应的以下布大致的5种局:


 

布局---1 

布局---2

布局---3

布局---4

布局---5

分析上述布局,其实他们的大体布局是一样的,知识根据图片的张数,图片的大小,以及新闻类别的评论来判断布局的对应显示隐藏问题,只要根据相对应的属性便可以很好的实现这个效果,所以方法2是最合适的。

其他操作就是根据服务器返回的数据类型,是否为空等作相应操作即可。

上述就是目前完成的进度,虽然数据啥都是在本地写死的,可是已经大体的算得上是的一个新闻阅读器了,之后会继续完善其他为完成的功能。

开发中的几个问题总结:

关于Fragment

1)

[java] view plaincopy

  1. @Override  
  2. public void onAttach(Activity activity) {  
  3. // TODO Auto-generated method stub  
  4. this.activity = activity;  
  5. super.onAttach(activity);  
  6. }  

通过onAttach()方法获取父类ACTIVITY,如果在调用getActivity()方法获取的话,可能会在FRAGMENT被回收后报空指针错误。

2)

看今日头条的效果是,没切换至类型界面后,才去刷新数据,Fragment自带了这个方法,如下:

[java] view plaincopy

  1. public void setUserVisibleHint(boolean isVisibleToUser) {}  

你可以判断isVisibleToUser属性来知道是否是切换的界面已经完全可见,之后进行操作。代码中也注释了。

下面看看这次的效果图:

            

           

最后附上源码DEMO地址:下载地址

可能在代码方面写的不是很好,优化不足,希望大家提出来,共同进步。转载请注明http://blog.csdn.net/vipzjyno1/article/details/23619269

谢谢。

时间: 2024-08-03 07:24:21

高仿今日头条(转载)的相关文章

android高仿今日头条 --新闻阅读器

开发流程 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一) 涉及到的知识点有 1.slidingmenu.lib  (侧拉菜单包)   使用方法配置以及下载:点击这里   实现:客户端中左右2边侧拉菜单 2.命名规范可以参考:android命名规范   实现:源码中包.类.方法名称的统一 3.如何反编译:反编译就这么简单   实现:客户端中资源文件的获取 4.Fragment以及HorizontalScrollView的使用,以及重写HorizontalScrollView  

高仿今日头条(1)

本片博客主要实现今日头条的主题框架.后面我会慢慢完善,欢迎大家持续关注 git下载地址:https://github.com/xiangzhihong/topNews/tree/master 先上两张图 直接贴代码: @InjectView(android.R.id.tabcontent) FrameLayout tabcontent; @InjectView(android.R.id.tabs) TabWidget tabs; @InjectView(R.id.tabhost) TabHost

高仿今日头条(2)

接上一篇博客:http://blog.csdn.net/xiangzhihong8/article/details/51262939 这部分主要是实现频道管理页面,先上两张图片, 自定义拖动控件,onInterceptTouchEvent事件拦截,dispatchTouchEvent事件分发,onTouchEvent(对于View而言) 想要具体了解android的事件拦截机制,请访问下面的地址:http://blog.csdn.net/xiangzhihong8/article/details

iOS仿今日头条滑动导航

之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的偏移量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanGesture

Android仿今日头条滑动页面导航效果_Android

最近项目中用到了滑动页面,也就是和目前市场上很火的"今日头条"页面滑动类似,在网上找了一下,大部分都是用ViewPager来实现的,刚开始我用的是ViewPager+ViewGroup,上面的标题按钮用的是HorizontalScrollView,写完之后感觉效果比较生硬,果断换掉,发现了一个效果比较好的第三方,也就是今天的主题:PagerSlidingTabStrip.好了,下面来具体介绍一下PagerSlidingTabStrip,进行一下源码解析. 一.看一下demo的样子吧 二

Android 仿今日头条简单的刷新效果实例代码_Android

点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

Android仿今日头条APP实现下拉导航选择菜单效果_Android

本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView

Android 仿今日头条简单的刷新效果实例代码

点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

Android 仿今日头条评论时键盘自动弹出的效果(推荐)

Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: <style name="inputDialog" parent="@android:style/Theme.Holo.Light.Dialog"> <item name="android:windowBackground">@col