您当前的位置： 首页 > 

xiangzhihong8

暂无认证

  • 3浏览

    0关注

    1324博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

仿今日头条顶部导航效果

xiangzhihong8 发布时间：2014-04-17 10:52:43 ，浏览量：3

 之前发现很多人在群里面、论坛上求网易新闻客户端的源码，之后我就去下了个网易新闻客户端和今日头条新闻客户端，发现他们的大体是一样的，于是在最近的空闲时间，便去琢磨如何去实现这样一个APP。

要知道它们是如何实现的，用到了什么第三方库文件，反编译便是很好的一个了解方法，如果你想要了解如何反编译可以点击这个链接：反编译就这么简单

只是一般的APK打包后都是被混淆过的，所以没那么好了解他的每个界面是如何实现的，没事，那就自己慢慢摸索或则从它的资源文件中提取布局了解下整体的大概情况。

我通过反编译 --今日头条：

知道了它用到的架包有，提取了有用的部分：

1.android-support-v4.jar （最常用的官方架包之一）

2.android-support-v7.jar （主要用于ActionBar的低版本兼容）

3.handmark.pulltorefresh.library  (图片的下拉刷新包)

4.slidingmenu.lib  (侧拉菜单包)   使用方法配置以及下载：点击这里

5.umeng (友盟的官方架包)

自己要在加用上的架包有：

1.Android-Universal-Image-Loader  (图片的异步加载包)   使用方法配置以及下载：点击这里

注：发现架包中有aaa什么的命名，说明它被混淆过，所以要想进一步获取它的源码很困难，只能按照自己的思路去走。

好的，大体了解了它的整体结构，下面就开始它是如何开发的把：

注：本代码内用到的资源文件和属性配置部分从APK反编译的资源（SRC文件）中提取，为了达到更好的实现效果。

一.首先构建大体的框架，架包等用到的时候在导入

命名规范可以参考：android命名规范

二.进行配置

首先去掉应用的title栏目：

采取修改AndroidManifest.xml文件中application的android:theme="@style/AppTheme"属性：

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1.   
  2.     true  
  3.   
三.开始开发
设置欢迎界面的调整动画，2秒
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1.   start_anima = new AlphaAnimation(0.3f, 1.0f);  
  2. start_anima.setDuration(2000);  
  3. view.startAnimation(start_anima);  
  4. start_anima.setAnimationListener(new AnimationListener() {  
  5.       
  6.     @Override  
  7.     public void onAnimationStart(Animation animation) {  
  8.         // TODO Auto-generated method stub  
  9.           
  10.     }  
  11.       
  12.     @Override  
  13.     public void onAnimationRepeat(Animation animation) {  
  14.         // TODO Auto-generated method stub  
  15.           
  16.     }  
  17.       
  18.     @Override  
  19.     public void onAnimationEnd(Animation animation) {  
  20.         // TODO Auto-generated method stub  
  21.         redirectTo();//跳转  
  22.     }  
  23. });  
之后便是主界面：
可以发现主界面上方的栏目栏是可以横向拖动的，并且选择。

下面就首先来实现上部栏目拖动这个效果：

大体思路结构图：

整体的布局文件是如下这样：

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1.   
  2.   
  3.       
  4.   
  5.       
  6.   
  7.           
  8.   
  9.               
  10.   
  11.                   
  12.               
  13.   
  14.               
  15.   
  16.               
  17.           
  18.   
  19.           
  20.   
  21.               
  22.           
  23.       
  24.   
  25.       
  26.   
  27.       
  28.   
  29.   
由于发现HorizontalScrollView左右拖动的时候没有那种阴影效果，所以在这里，我们发现了头条的资源文件下有这么2个文件：

这个就是它在白天模式和黑夜模式下用的阴影图片。那我们可以采取重写HorizontalScrollView来判断滚动，如果滚动时候不是在最左边，显示左边阴影，不是在最右边，显示右边阴影。

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. public class ColumnHorizontalScrollView extends HorizontalScrollView {  
  2.     /** 传入整体布局  */  
  3.     private View ll_content;  
  4.     /** 传入更多栏目选择布局 */  
  5.     private View ll_more;  
  6.     /** 传入拖动栏布局 */  
  7.     private View rl_column;  
  8.     /** 左阴影图片 */  
  9.     private ImageView leftImage;  
  10.     /** 右阴影图片 */  
  11.     private ImageView rightImage;  
  12.     /** 屏幕宽度 */  
  13.     private int mScreenWitdh = 0;  
  14.     /** 父类的活动activity */  
  15.     private Activity activity;  
  16.       
  17.     public ColumnHorizontalScrollView(Context context) {  
  18.         super(context);  
  19.     }  
  20.   
  21.     public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {  
  22.         super(context, attrs);  
  23.     }  
  24.   
  25.     public ColumnHorizontalScrollView(Context context, AttributeSet attrs,  
  26.             int defStyle) {  
  27.         super(context, attrs, defStyle);  
  28.     }  
  29.     /**  
  30.      * 在拖动的时候执行 
  31.      * */  
  32.     @Override  
  33.     protected void onScrollChanged(int paramInt1, int paramInt2, int paramInt3, int paramInt4) {  
  34.         // TODO Auto-generated method stub  
  35.         super.onScrollChanged(paramInt1, paramInt2, paramInt3, paramInt4);  
  36.         shade_ShowOrHide();  
  37.         if(!activity.isFinishing() && ll_content !=null && leftImage!=null && rightImage!=null && ll_more!=null && rl_column !=null){  
  38.             if(ll_content.getWidth() = getMeasuredWidth()) {  
  39.                 leftImage.setVisibility(View.GONE);  
  40.                 rightImage.setVisibility(View.GONE);  
  41.             }  
  42.         } else {  
  43.             return;  
  44.         }  
  45.         //如果滑动在最左边时候，左边阴影隐藏，右边显示  
  46.         if (getLeft() == 0) {  
  47.             leftImage.setVisibility(View.GONE);  
  48.             rightImage.setVisibility(View.VISIBLE);  
  49.             return;  
  50.         }  
  51.         //如果滑动在最右边时候，左边阴影显示，右边隐藏  
  52.         if (getRight() == getMeasuredWidth() - mScreenWitdh) {  
  53.             leftImage.setVisibility(View.VISIBLE);  
  54.             rightImage.setVisibility(View.GONE);  
  55.             return;  
  56.         }  
  57.         //否则，说明在中间位置，左、右阴影都显示  
  58.         leftImage.setVisibility(View.VISIBLE);  
  59.         rightImage.setVisibility(View.VISIBLE);  
  60.     }  
  61. }  

之后

private ArrayList newsClassify=new ArrayList();

根据newsClassify这个栏目分类列表里面的数量进行添加栏目。（这里首先采用了自己限定的ITEM，而没有进行数据库的操作，以后加上）

ViewPage的适配器NewsFragmentPagerAdapter，通过ViewPage切换对应栏目的的Fragment：

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {  
  2.     private ArrayList fragments;  
  3.     private FragmentManager fm;  
  4.   
  5.     public NewsFragmentPagerAdapter(FragmentManager fm) {  
  6.         super(fm);  
  7.         this.fm = fm;  
  8.     }  
  9.   
  10.     public NewsFragmentPagerAdapter(FragmentManager fm,  
  11.             ArrayList fragments) {  
  12.         super(fm);  
  13.         this.fm = fm;  
  14.         this.fragments = fragments;  
  15.     }  
  16.   
  17.     @Override  
  18.     public int getCount() {  
  19.         return fragments.size();  
  20.     }  
  21.   
  22.     @Override  
  23.     public Fragment getItem(int position) {  
  24.         return fragments.get(position);  
  25.     }  
  26.   
  27.     @Override  
  28.     public int getItemPosition(Object object) {  
  29.         return POSITION_NONE;  
  30.     }  
  31.   
  32.     public void setFragments(ArrayList fragments) {  
  33.         if (this.fragments != null) {  
  34.             FragmentTransaction ft = fm.beginTransaction();  
  35.             for (Fragment f : this.fragments) {  
  36.                 ft.remove(f);  
  37.             }  
  38.             ft.commit();  
  39.             ft = null;  
  40.             fm.executePendingTransactions();  
  41.         }  
  42.         this.fragments = fragments;  
  43.         notifyDataSetChanged();  
  44.     }  
  45.   
  46.     @Override  
  47.     public Object instantiateItem(ViewGroup container, final int position) {  
  48.         Object obj = super.instantiateItem(container, position);  
  49.         return obj;  
  50.     }  
  51.   
  52. }  
之后添加栏目ITEM：
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. int count =  newsClassify.size();  
  2.     for(int i = 0; i
关注
打赏
1482932726
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0484s