http://blog.csdn.net/t12x3456/article/details/9397389

http://blog.csdn.net/t12x3456/article/details/9397389

http://blog.csdn.net/t12x3456/article/details/9397389

http://blog.csdn.net/t12x3456/article/details/9397389

Android 仿网易新闻v3.5:上下滑动的引导页

分类：Android 2013-07-22 08:50 6798人阅读 评论(29) 收藏 举报

最近看了下网易新闻月初发布的3.5版，发现两个比较明显的改动:

1.引导页的修改，变为上下滑动. 2.增加了聚合阅读，里面的动画效果也是蛮有创意的.于是又禁不住模仿一下

这次先看这个上下滑动的引导页效果图:

这种效果具体怎么做呢？

首先直接上github,直接看有没有相关的开源项目,果不其然，被我找到了:

https://github.com/JakeWharton/Android-DirectionalViewPager

JakeWharton,看到这个名字是不是感到很熟悉?没错，ActionBarSherlock,ViewPagerInicator等著名的开源项目皆处于此人之手.

这个项目实际上是在ViewPager的基础上，做了一个扩展，加入了对上下方向滑动的支持

正如项目的名字，使用该项目，可以灵活的改变viewpager的方向,而且仅用一个简单的属性设置就可以做到,我只对该项目提供的例子做了一些简单的改动，就做到了网易新闻这个引导页的效果.

废话不多说，直接进入正题:

先看下项目的截图:

项目中最主要的部分:

DirectionalViewPager:直接继承自ViewPager,主要在onInterceptTouchEvent()和onTouchEvent()里面加入了对于垂直方向滑动的支持.并提供了setOrientation()这个方法,

我们可以同过此方法，直接设置ViewPager的滑动效果，垂直或者是水平

VerticalViewPagerCompat:提供了设置DataSetObserver的方法:setDataSetObserver()

接下来看具体使用的部分:

[java] view plain copy

1. MainActivity:

[java] view plain copy

1. packagecom.way.verticalguider;
3. importandroid.os.Bundle;
4. importandroid.support.v4.app.FragmentActivity;
6. importcom.way.directionalviewpager.DirectionalViewPager;
7. importcom.way.newversion.R;
9. publicclassMainActivityextendsFragmentActivity{
10. privateDirectionalViewPagermDirectionalViewPager;
12. @Override
13. protectedvoidonCreate(BundlesavedInstanceState){
14. super.onCreate(savedInstanceState);
15. setContentView(R.layout.activity_main);
16. //Setupthepager
17. mDirectionalViewPager=(DirectionalViewPager)findViewById(R.id.pager);
18. mDirectionalViewPager.setAdapter(newTestFragmentAdapter(
19. getSupportFragmentManager()));
20. <spanstyle="color:#FF0000;">mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);//设置ViewPager滑动方向</span>
22. }
24. }

实际应用中，我们直接用DirectionalViewPager代替ViewPager，再设置其滑动方向即可，既可以水平，也可以垂直，一个setOritation直接搞定.

看到了吧，实现上下滑动的效果就这么简单.在此不得不致敬JakeWharton这位大牛在开源项目上的贡献,让我们这些开发者受益颇深..

例子中其他部分,我只替换了资源图片:

TestFragment:

[java] view plain copy

1. packagecom.way.verticalguider;
3. importcom.way.newversion.R;
5. importandroid.os.Bundle;
6. importandroid.support.v4.app.Fragment;
7. importandroid.view.LayoutInflater;
8. importandroid.view.View;
9. importandroid.view.ViewGroup;
10. importandroid.widget.Button;
11. importandroid.widget.ImageView;
13. publicclassTestFragmentextendsFragment{
14. privatestaticfinalStringKEY_CONTENT="TestFragment:Content";
15. privatestaticfinalStringKEY_ISLASTPIC="TestFragment:IsLastPic";
16. privateintmContent;
17. privatebooleanmIsLastPic;
19. publicstaticTestFragmentnewInstance(intcontent,booleanisLastPic){
20. TestFragmentfragment=newTestFragment();
22. fragment.mContent=content;
23. fragment.mIsLastPic=isLastPic;
24. returnfragment;
25. }
27. @Override
28. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
29. BundlesavedInstanceState){
30. if((savedInstanceState!=null)
31. &&savedInstanceState.containsKey(KEY_CONTENT)){
32. mContent=savedInstanceState.getInt(KEY_CONTENT);
33. mIsLastPic=savedInstanceState.getBoolean(KEY_ISLASTPIC);
34. }
35. Viewroot=inflater
36. .inflate(R.layout.fragment_layout,container,false);
37. ImageViewiv=(ImageView)root.findViewById(R.id.iv);
38. iv.setImageResource(mContent);
39. Buttonbtn=(Button)root.findViewById(R.id.btn);
40. if(mIsLastPic)
41. btn.setVisibility(View.VISIBLE);
42. else
43. btn.setVisibility(View.GONE);
44. returnroot;
45. }
47. @Override
48. publicvoidonSaveInstanceState(BundleoutState){
49. super.onSaveInstanceState(outState);
50. outState.putInt(KEY_CONTENT,mContent);
51. outState.putBoolean(KEY_ISLASTPIC,mIsLastPic);
52. }
53. }

TestFragmentAdapter: [java] view plain copy

1. packagecom.way.verticalguider;
3. importcom.way.newversion.R;
5. importandroid.support.v4.app.Fragment;
6. importandroid.support.v4.app.FragmentManager;
7. importandroid.support.v4.app.FragmentPagerAdapter;
9. classTestFragmentAdapterextendsFragmentPagerAdapter{
10. protectedstaticfinalint[]CONTENT=newint[]{
11. R.drawable.biz_ad_new_version1_img0,
12. R.drawable.biz_ad_new_version1_img1,
13. R.drawable.biz_ad_new_version1_img2,
14. R.drawable.biz_ad_new_version1_img3};
16. publicTestFragmentAdapter(FragmentManagerfm){
17. super(fm);
18. }
20. @Override
21. publicFragmentgetItem(intposition){
22. booleanisLastPic=false;
23. if(position==CONTENT.length-1)
24. isLastPic=true;
25. returnTestFragment.newInstance(CONTENT[position],isLastPic);
26. }
28. @Override
29. publicintgetCount(){
30. returnCONTENT.length;
31. }
32. }

下面是我修改后例子的下载链接:

http://download.csdn.net/detail/t12x3456/5789713

其实无论像这种上下滑动引导页的效果，可以有多种方式去实现，在此仅提供不敢说是最优化，但一定是 最便捷的一种方法.

有时间的话我会再研究下聚合阅读的那个动画效果,在此先记录下, 大家如有好的意见，欢迎讨论.

如有转载，请声明出处:http://blog.csdn.net/t12x3456

更多相关文章

1. Android 开源项目及其学习
2. 四个方向上的SlidingDrawer
3. Android第六期 - ViewPage与菜单栏本地页面监听滑动效果
4. cordova生成android的app项目目录后运行cordova build android出
5. 2012-7-20 android 图片叠加效果——两种方法
6. android 简单实现沉浸式状态栏效果
7. android之ViewFlipper滑屏切换效果
8. Android仿微信activity滑动关闭效果
9. Android实现手机震动效果

随机推荐

1. android中log的使用
2. Android中对于Geometry对象的字符串化
3. Android(安卓)启动线程OOM
4. Android(安卓)三角标签（自定义Textview控
5. android实现多线程
6. android apk安装结束的系统广播的监听
7. Using Intent in an Android(安卓)applic
8. android之实现各个组件点击事件监听
9. androi 添加桌面快捷方式
10. Android特色开发--情景模式