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

最近看了下网易新闻月初发布的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][/java] view plaincopy

  1. MainActivity:

 

 

 

[java][/java] view plaincopy

  1. package com.way.verticalguider;
  2. import android.os.Bundle;
  3. import android.support.v4.app.FragmentActivity;
  4. import com.way.directionalviewpager.DirectionalViewPager;
  5. import com.way.newversion.R;
  6. public class MainActivity extends FragmentActivity {
  7.     private DirectionalViewPager mDirectionalViewPager;
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         // Set up the pager
  13.         mDirectionalViewPager = (DirectionalViewPager) findViewById(R.id.pager);
  14.         mDirectionalViewPager.setAdapter(new TestFragmentAdapter(
  15.                 getSupportFragmentManager()));
  16.         <span style=”color:#FF0000;”>mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);//设置ViewPager滑动方向</span>
  17.     }
  18. }

 

 

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

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

 

 

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

TestFragment:

 

[java][/java] view plaincopy

  1. package com.way.verticalguider;
  2. import com.way.newversion.R;
  3. import android.os.Bundle;
  4. import android.support.v4.app.Fragment;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.Button;
  9. import android.widget.ImageView;
  10. public class TestFragment extends Fragment {
  11.     private static final String KEY_CONTENT = “TestFragment:Content”;
  12.     private static final String KEY_ISLASTPIC = “TestFragment:IsLastPic”;
  13.     private int mContent;
  14.     private boolean mIsLastPic;
  15.     public static TestFragment newInstance(int content, boolean isLastPic) {
  16.         TestFragment fragment = new TestFragment();
  17.         fragment.mContent = content;
  18.         fragment.mIsLastPic = isLastPic;
  19.         return fragment;
  20.     }
  21.     @Override
  22.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  23.             Bundle savedInstanceState) {
  24.         if ((savedInstanceState != null)
  25.                 && savedInstanceState.containsKey(KEY_CONTENT)) {
  26.             mContent = savedInstanceState.getInt(KEY_CONTENT);
  27.             mIsLastPic = savedInstanceState.getBoolean(KEY_ISLASTPIC);
  28.         }
  29.         View root = inflater
  30.                 .inflate(R.layout.fragment_layout, container, false);
  31.         ImageView iv = (ImageView) root.findViewById(R.id.iv);
  32.         iv.setImageResource(mContent);
  33.         Button btn = (Button) root.findViewById(R.id.btn);
  34.         if (mIsLastPic)
  35.             btn.setVisibility(View.VISIBLE);
  36.         else
  37.             btn.setVisibility(View.GONE);
  38.         return root;
  39.     }
  40.     @Override
  41.     public void onSaveInstanceState(Bundle outState) {
  42.         super.onSaveInstanceState(outState);
  43.         outState.putInt(KEY_CONTENT, mContent);
  44.         outState.putBoolean(KEY_ISLASTPIC, mIsLastPic);
  45.     }
  46. }

TestFragmentAdapter:

 

 

[java][/java] view plaincopy

  1. package com.way.verticalguider;
  2. import com.way.newversion.R;
  3. import android.support.v4.app.Fragment;
  4. import android.support.v4.app.FragmentManager;
  5. import android.support.v4.app.FragmentPagerAdapter;
  6. class TestFragmentAdapter extends FragmentPagerAdapter {
  7.     protected static final int[] CONTENT = new int[] {
  8.             R.drawable.biz_ad_new_version1_img0,
  9.             R.drawable.biz_ad_new_version1_img1,
  10.             R.drawable.biz_ad_new_version1_img2,
  11.             R.drawable.biz_ad_new_version1_img3 };
  12.     public TestFragmentAdapter(FragmentManager fm) {
  13.         super(fm);
  14.     }
  15.     @Override
  16.     public Fragment getItem(int position) {
  17.         boolean isLastPic = false;
  18.         if (position == CONTENT.length – 1)
  19.             isLastPic = true;
  20.         return TestFragment.newInstance(CONTENT[position], isLastPic);
  21.     }
  22.     @Override
  23.     public int getCount() {
  24.         return CONTENT.length;
  25.     }
  26. }

 

 

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

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

 

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

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

标签