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()

接下來看具體使用的部分:

MainActivity:

package com.way.verticalguider;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import com.way.directionalviewpager.DirectionalViewPager;import com.way.newversion.R;public class MainActivity extends FragmentActivity {private DirectionalViewPager mDirectionalViewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// Set up the pagermDirectionalViewPager = (DirectionalViewPager) findViewById(R.id.pager);mDirectionalViewPager.setAdapter(new TestFragmentAdapter(getSupportFragmentManager()));mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);//設定ViewPager滑動方向}}

實際應用中，我們直接用DirectionalViewPager代替ViewPager，再設定其滑動方向即可，既可以水平，也可以垂直，一個setOritation直接搞定.

看到了吧，實現上下滑動的效果就這麼簡單.在此不得不致敬JakeWharton這位大牛在開源項目上的貢獻,讓我們這些開發人員受益頗深..

例子中其他部分,我只替換了資源圖片:

TestFragment:

package com.way.verticalguider;import com.way.newversion.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.ImageView;public class TestFragment extends Fragment {private static final String KEY_CONTENT = "TestFragment:Content";private static final String KEY_ISLASTPIC = "TestFragment:IsLastPic";private int mContent;private boolean mIsLastPic;public static TestFragment newInstance(int content, boolean isLastPic) {TestFragment fragment = new TestFragment();fragment.mContent = content;fragment.mIsLastPic = isLastPic;return fragment;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {if ((savedInstanceState != null)&& savedInstanceState.containsKey(KEY_CONTENT)) {mContent = savedInstanceState.getInt(KEY_CONTENT);mIsLastPic = savedInstanceState.getBoolean(KEY_ISLASTPIC);}View root = inflater.inflate(R.layout.fragment_layout, container, false);ImageView iv = (ImageView) root.findViewById(R.id.iv);iv.setImageResource(mContent);Button btn = (Button) root.findViewById(R.id.btn);if (mIsLastPic)btn.setVisibility(View.VISIBLE);elsebtn.setVisibility(View.GONE);return root;}@Overridepublic void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);outState.putInt(KEY_CONTENT, mContent);outState.putBoolean(KEY_ISLASTPIC, mIsLastPic);}}

TestFragmentAdapter:

package com.way.verticalguider;import com.way.newversion.R;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;class TestFragmentAdapter extends FragmentPagerAdapter {protected static final int[] CONTENT = new int[] {R.drawable.biz_ad_new_version1_img0,R.drawable.biz_ad_new_version1_img1,R.drawable.biz_ad_new_version1_img2,R.drawable.biz_ad_new_version1_img3 };public TestFragmentAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {boolean isLastPic = false;if (position == CONTENT.length - 1)isLastPic = true;return TestFragment.newInstance(CONTENT[position], isLastPic);}@Overridepublic int getCount() {return CONTENT.length;}}

下面是我修改後例子的下載連結:

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

其實無論像這種上下滑動引導頁的效果，可以有多種方式去實現，在此僅提供不敢說是最佳化，但一定是 最便捷的一種方法.

有時間的話我會再研究下彙總閱讀的那個動畫效果,在此先記錄下, 大家如有好的意見，歡迎討論.

如有轉載，請聲明出處: http://blog.csdn.net/t12x3456