首页 > 资讯 > Android > 正文

android竖向显示新特性界面

14-06-28 来源：[db:作者]

收藏我要投稿

腾讯手机管家，初始界面有个小飞机动啊动啊，还挺好玩的，而且显示新特征为竖向展示，不知道这种东西该如何实现呢？给自己留下比较深的印象，然后楼主就是探索这种是如何实现的。

看着很不错，显示特征为竖向，增加小火箭的动态感，兼具金秀贤的帅气，简单、明确、有特点。

我得目的：

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我觉得刚刚好。

在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

点击复制链接与好友分享!回本站首页