android豎向顯示新特性界面

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

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

我得目的：

1.實現顯示新特征的豎向。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+Mi7U9rzTtq/MrLz9zbe1xLavuNChozwvcD4KPHA+My7R1cmrssnTw9Chx+XQwjwvcD4KPHA+PC9wPgo8cD4K0ru49tfUtqjS5bXEVmlld1BhZ2Vyv8nS1LjjtqijrNL908PX1Epha2VXaGFydG9utcTSu7j2v6rUtM/uxL+jurXju/e08r+qwbS906OszazKsb3ovPjBy3dlaWRpMTk4ObXEQW5kcm9pZNaut8LN+NLXVjMuNTwvcD4KPHA+CtXiuPbP7sS/yrW8ysnPysfU2lZpZXdQYWdlcrXEu/m0ocnPo6zX9sHL0ru49sCp1bmjrLzTyOvBy7bUyc/Pwre9z/K7rLavtcTWp7PWo6zV/cjnz+7Ev7XEw/vX1qOsyrnTw7jDz+7Ev6Osv8nS1MHpu+61xLjEseR2aWV3cGFnZXK1xLe9z/IstvjH0r3208PSu7j2vPK1pbXEyvTQ1Mno1sO+zb/J0tTX9rW9LM7S1ru21LjDz+7Ev8zhuam1xMD919PX9sHL0rvQqbzytaW1xLjEtq+jrL7N1/a1vcHLzfjS19DCzsXV4rj20v21vNKztcTQp7n7oaM8L3A+CjxwPgrP7sS/1tDX7tb30qq1xLK/t9Y6PGJyPgo8L3A+CjxwPgpEaXJlY3Rpb25hbFZpZXdQYWdlcjrWsb3TvMyz0NfUVmlld1BhZ2VyLNb30qrU2m9uSW50ZXJjZXB0VG91Y2hFdmVudCgpus1vblRvdWNoRXZlbnQoKcDvw+a808jrwcu21NPatLnWsbe9z/K7rLavtcTWp7PWLrKizOG5qcHLc2V0T3JpZW50YXRpb24oKdXiuPa3vbeoLDwvcD4KPHA+Cs7Sw8e/ydLUzay5/bTLt723qKOs1rG908no1sNWaWV3UGFnZXK1xLustq/Qp7n7o6y0udaxu/LV38rHy67GvTwvcD4KPHA+ClZlcnRpY2FsVmlld1BhZ2VyQ29tcGF0OszhuanBy8no1sNEYXRhU2V0T2JzZXJ2ZXK1xLe9t6g6c2V0RGF0YVNldE9ic2VydmVyKCk8L3A+CjxwPgq908/CwLS/tL7fzOXKudPDtcSyv7fWOjwvcD4KPGgxPjEuztLDx7bURGlyZWN0aW9uYWxWaWV3UGFnZXK9+LjEo6y4/LjE19S8usv50OjSqrXEx9C7u8qxvOQ8L2gxPgo8cD4KPHN0cm9uZz4oMSnH0Lu7s8m5zLaoyrG85Dwvc3Ryb25nPjwvcD4K0N64xERpcmVjdGlvbmFsVmlld1BhZ2VyIC0+dm9pZCBzbW9vdGhTY3JvbGxUbyhpbnQgeCwgaW50IHkpINbQtcRtU2Nyb2xsZXIuc3RhcnRTY3JvbGwoc3gsIHN5LCBkeCwgZHksIG1EdXJhdGlvbik7CjxwPrzTyOvBy21EdXJhdGlvbrHkwb/X986qyrG85LLOyv2jrMqxvOTJ6NbDzqoxMDAwLTI1MDBtc775v8mjrML61+PKudPD1d+1xMrTvvXQ6Mfzo6zB97Optviyu7TSw6ahozwvcD4KPHA+cHJpdmF0ZSBpbnQgbUR1cmF0aW9uID0gMjAwMDsvL7nMtqjKsbzkss7K/Txicj4KPC9wPgo8cD48c3Ryb25nPigyKcfQu7uzybK7ucy2qMqxvOQ8L3N0cm9uZz48YnI+CjwvcD4KPHA+yc/D5sTH1ta1xLustq/Qp7n7ysfPtc2z1NoyMDAwbXPE2qOs19S2qNLlzeqzybXEtq+7rcfQu7uxyL3P1MjL2aOsyOe5+7+qt6LV38/ryMN2aWV3x9C7u7XE09DM2Mmrvs3Q6NKqtqjT2tfUvLq1xMqxvOS+2NXzoaPKtc/W0rKyu8TRo6y/ydLUv7S8+8nPw+ZtU2Nyb2xsZXIuPHN0cm9uZz5zdGFydFNjcm9sbDwvc3Ryb25nPihzeCwKIHN5LCBkeCwgZHksIG1EdXJhdGlvbik71eK49re9t6jQ6NKq1tjQtKOs1eLA787S1rvM+dK7z8LN+MnPtcTQtLeoo6y49sjLvvW1w9TIy9lPS6GjPC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">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我覺得剛剛好。

在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