android豎向顯示新特性界面

騰訊手機管家，初始界面有個小飛機動啊動啊，還挺好玩的，而且顯示新特徵爲豎向展示，不知道這種東西該如何實現呢？給自己留下比較深的印象，然後樓主就是探索這種是如何實現的。

看着很不錯，顯示特徵爲豎向，增加小火箭的動態感，兼具金秀賢的帥氣，簡單、明確、有特點。

我得目的：

1.實現顯示新特徵的豎向。

2.增加動態箭頭的動感。

3.顏色採用小清新

一個自定義的ViewPager可以搞定，引用自JakeWharton的一個開源項目：點擊打開鏈接，同時借鑑了weidi1989的Android之仿網易V3.5

這個項目實際上是在ViewPager的基礎上，做了一個擴展，加入了對上下方向滑動的支持，正如項目的名字，使用該項目，可以靈活的改變viewpager的方向,而且僅用一個簡單的屬性設置就可以做到,我只對該項目提供的例子做了一些簡單的改動，就做到了網易新聞這個引導頁的效果。

項目中最主要的部分:

DirectionalViewPager:直接繼承自ViewPager,主要在onInterceptTouchEvent()和onTouchEvent()裏面加入了對於垂直方向滑動的支持.並提供了setOrientation()這個方法,

我們可以同過此方法，直接設置ViewPager的滑動效果，垂直或者是水平

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

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

1.我們對DirectionalViewPager進改，更改自己所需要的切換時間

(1)切換成固定時間

修改DirectionalViewPager ->void smoothScrollTo(int x, int y) 中的mScroller.startScroll(sx, sy, dx, dy, mDuration);

加入了mDuration變量作爲時間參數，時間設置爲1000-2500ms均可，滿足使用者的視覺需求，流暢而不匆忙。

private int mDuration = 2000;//固定時間參數

(2)切換成不固定時間

上面那種的滑動效果是系統在2000ms內，自定義完成的動畫切換比較勻速，如果開發者想讓view切換的有特色就需要定於自己的時間矩陣。實現也不難，可以看見上面mScroller.startScroll(sx, sy, dx, dy, mDuration);這個方法需要重寫，這裏我只貼一下網上的寫法，個人覺得勻速OK。

import android.content.Context;
import android.view.animation.Interpolator;
import android.widget.Scroller;

public class FixedSpeedScroller extends Scroller {      
	
	private int mDuration = 1500;      
	public FixedSpeedScroller(Context context) {         
		super(context);     
		}      
	public FixedSpeedScroller(Context context, Interpolator interpolator) {         
		super(context, interpolator);     
		}      
	     
	@Override    
	public void startScroll(int startX, int startY, int dx, int dy, int duration) {    
		// Ignore received duration, use fixed one instead         
		super.startScroll(startX, startY, dx, dy, mDuration);     
		}      
	@Override     
	public void startScroll(int startX, int startY, int dx, int dy) {        
			// Ignore received duration, use fixed one instead        
			super.startScroll(startX, startY, dx, dy, mDuration);    
			} 
	public void setmDuration(int time){
		mDuration = time;
	}	
	public int getmDuration(){
		return mDuration;
	}	
}

這裏的目的是去修訂mDuration,重寫startScroll方法，在View切換過程中，調用Field類，修改Pager切換。

try {             
	Field mField = ViewPager.class.getDeclaredField("mScroller");             
	mField.setAccessible(true);   
	mScroller = new FixedSpeedScroller(mDirectionalViewPager.getContext(), 
			   new AccelerateInterpolator());  
	mScroller.setmDuration(2000);
	mField.set(mDirectionalViewPager, mScroller);//set the speed of scroller         
} catch (Exception e) {         
	e.printStackTrace();
} 

2.動感箭頭的添加

在實現的時候需要展現給使用者你的滑動方向，增加一些動態信息，免得顯得死氣沉沉的，譬如最上面圖的小火箭就是一個不錯的動態效果，這裏我要搞成大箭頭。動畫——》定製動畫、幀動畫。定製動畫就像我們上面所說的系統給你均勻分配時間，固定分配路徑。幀動畫動畫片的圖片變化，一幀一幀的圖像。既然想弄動感箭頭，自然要用幀動畫，110我覺得剛剛好。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/up_loading1" android:duration="110"/>
    <item android:drawable="@drawable/up_loading2" android:duration="110"/>
    <item android:drawable="@drawable/up_loading3" android:duration="110"/>
    <item android:drawable="@drawable/up_loading4" android:duration="110"/>
    <item android:drawable="@drawable/up_loading5" android:duration="110"/>
    <item android:drawable="@drawable/up_loading6" android:duration="110"/>
    <item android:drawable="@drawable/up_loading7" android:duration="110"/>
    <item android:drawable="@drawable/up_loading8" android:duration="110"/>

</animation-list>

在TestFragment中加入動畫效果：

ImageView upLoading = (ImageView) root.findViewById(R.id.upLoading);
upLoading.setBackgroundResource(R.drawable.img_up_loading);
AnimationDrawable mFrameAnimation = (AnimationDrawable) upLoading.getBackground();
mFrameAnimation.start();

3.弄一小清新背景

這裏就做一個具體的示例，實現動態的上下滑動效果。

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

package com.way.newversion;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

import com.way.directionalviewpager.DirectionalViewPager;

@SuppressLint("NewApi")
public class MainActivity extends FragmentActivity implements
		OnPageChangeListener {
	private DirectionalViewPager mDirectionalViewPager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// Set up the pager
		mDirectionalViewPager = (DirectionalViewPager) findViewById(R.id.pager);
		mDirectionalViewPager.setAdapter(new TestFragmentAdapter(
				getSupportFragmentManager()));
		mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);// 設置方向垂直即可。
		mDirectionalViewPager.setOnPageChangeListener(this);
	}

	@Override
	protected void onSaveInstanceState(Bundle outState) {
		//super.onSaveInstanceState(outState);
	}

	@Override
	public void onPageScrollStateChanged(int state) {
		if (state == ViewPager.SCROLL_STATE_IDLE) {
		}
	}

	@Override
	public void onPageScrolled(int position, float positionOffset,
			int positionOffsetPixels) {
		if (positionOffset == 0.0f)
			return;
	}

	@Override
	public void onPageSelected(int position) {
	}
}

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

我們每個界面都是使用的Fragment，由於通用以及簡潔性，我這裏就只使用一個TestFragment, 這裏大家可以注意到我並沒有在Fragment裏面使用Image，因爲我自己將每一頁的背景做了切換，所以我將FrameLayout的背景做了替換iv=.setBackgroundResource(mContent);這樣每一頁的背景就可以變化了。

package com.way.newversion;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.FrameLayout;
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;
	}

	@Override
	public 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);
		FrameLayout iv = (FrameLayout) root.findViewById(R.id.frameLayout);
		iv.setBackgroundResource(mContent);
		
		ImageView upLoading = (ImageView) root.findViewById(R.id.upLoading);
		upLoading.setBackgroundResource(R.drawable.img_up_loading);
		
		AnimationDrawable mFrameAnimation = (AnimationDrawable) upLoading.getBackground();
		mFrameAnimation.start();
		
		//第一界面顯示動態箭頭，最後一個界面顯示button		
		Button btn = (Button) root.findViewById(R.id.btn);
		if (mIsLastPic){
			upLoading.setVisibility(View.GONE);
			btn.setVisibility(View.VISIBLE);
		}
		else{
			btn.setVisibility(View.GONE);
			upLoading.setVisibility(View.VISIBLE);
		}
		if (btn.getVisibility() == View.VISIBLE)
			btn.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					// TODO Auto-generated method stub
				}
			});
		return root;
	}

	@Override
	public void onSaveInstanceState(Bundle outState) {
		super.onSaveInstanceState(outState);
		outState.putInt(KEY_CONTENT, mContent);
		outState.putBoolean(KEY_ISLASTPIC, mIsLastPic);
	}
}

接下來是所有fragment的Adapter，這裏我更改了圖片資源：

package com.way.newversion;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

class TestFragmentAdapter extends FragmentPagerAdapter {
	public static final int[] CONTENT = new int[] {
			R.drawable.layout_bg_green0,
			R.drawable.layout_bg_green1,
			R.drawable.layout_bg_green2,
			R.drawable.layout_bg_green3}; 

	public TestFragmentAdapter(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int position) {
		boolean isLastPic = false;
		if (position == CONTENT.length - 1)
			isLastPic = true;
		return TestFragment.newInstance(CONTENT[position], isLastPic);
	}

	@Override
	public int getCount() {
		return CONTENT.length;
	}
}

其餘的這裏就不詳述了，源碼：http://download.csdn.net/detail/feiyangxiaomi/7561259