android竖向显示新特性界面---腾讯手机管家

admin管理员组

文章数量:1551421

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

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

我得目的：

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。

[java]  view plain copy

1. import android.content.Context;  
2. import android.view.animation.Interpolator;  
3. import android.widget.Scroller;  
4.   
5. public class FixedSpeedScroller extends Scroller {        
6.       
7.     private int mDuration = 1500;        
8.     public FixedSpeedScroller(Context context) {           
9.         super(context);       
10.         }        
11.     public FixedSpeedScroller(Context context, Interpolator interpolator) {           
12.         super(context, interpolator);       
13.         }        
14.            
15.     @Override      
16.     public void startScroll(int startX, int startY, int dx, int dy, int duration) {      
17.         // Ignore received duration, use fixed one instead           
18.         super.startScroll(startX, startY, dx, dy, mDuration);       
19.         }        
20.     @Override       
21.     public void startScroll(int startX, int startY, int dx, int dy) {          
22.             // Ignore received duration, use fixed one instead          
23.             super.startScroll(startX, startY, dx, dy, mDuration);      
24.             }   
25.     public void setmDuration(int time){  
26.         mDuration = time;  
27.     }     
28.     public int getmDuration(){  
29.         return mDuration;  
30.     }     
31. }  

这里的目的是去修订mDuration,重写startScroll方法，在View切换过程中，调用Field类，修改Pager切换。

[java]  view plain copy

1. try {               
2.     Field mField = ViewPager.class.getDeclaredField("mScroller");               
3.     mField.setAccessible(true);     
4.     mScroller = new FixedSpeedScroller(mDirectionalViewPager.getContext(),   
5.                new AccelerateInterpolator());    
6.     mScroller.setmDuration(2000);  
7.     mField.set(mDirectionalViewPager, mScroller);//set the speed of scroller           
8. } catch (Exception e) {           
9.     e.printStackTrace();  
10. }   

2.动感箭头的添加

在实现的时候需要展现给使用者你的滑动方向，增加一些动态信息，免得显得死气沉沉的，譬如最上面图的小火箭就是一个不错的动态效果，这里我要搞成大箭头。动画——》定制动画、帧动画。定制动画就像我们上面所说的系统给你均匀分配时间，固定分配路径。帧动画动画片的图片变化，一帧一帧的图像。既然想弄动感箭头，自然要用帧动画，110我觉得刚刚好。

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list xmlns:android="http://schemas.android/apk/res/android" >  
3.     <item android:drawable="@drawable/up_loading1" android:duration="110"/>  
4.     <item android:drawable="@drawable/up_loading2" android:duration="110"/>  
5.     <item android:drawable="@drawable/up_loading3" android:duration="110"/>  
6.     <item android:drawable="@drawable/up_loading4" android:duration="110"/>  
7.     <item android:drawable="@drawable/up_loading5" android:duration="110"/>  
8.     <item android:drawable="@drawable/up_loading6" android:duration="110"/>  
9.     <item android:drawable="@drawable/up_loading7" android:duration="110"/>  
10.     <item android:drawable="@drawable/up_loading8" android:duration="110"/>  
11.   
12. </animation-list>  

在TestFragment中加入动画效果：

[java]  view plain copy

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

3.弄一小清新背景

这里就做一个具体的示例，实现动态的上下滑动效果。

接下来看具体使用的部分:MainActivity:

[java]  view plain copy

1. package com.way.newversion;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.os.Bundle;  
5. import android.support.v4.app.FragmentActivity;  
6. import android.support.v4.view.ViewPager;  
7. import android.support.v4.view.ViewPager.OnPageChangeListener;  
8.   
9. import com.way.directionalviewpager.DirectionalViewPager;  
10.   
11. @SuppressLint("NewApi")  
12. public class MainActivity extends FragmentActivity implements  
13.         OnPageChangeListener {  
14.     private DirectionalViewPager mDirectionalViewPager;  
15.   
16.     @Override  
17.     protected void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.activity_main);  
20.         // Set up the pager  
21.         mDirectionalViewPager = (DirectionalViewPager) findViewById(R.id.pager);  
22.         mDirectionalViewPager.setAdapter(new TestFragmentAdapter(  
23.                 getSupportFragmentManager()));  
24.         mDirectionalViewPager.setOrientation(DirectionalViewPager.VERTICAL);// 设置方向垂直即可。  
25.         mDirectionalViewPager.setOnPageChangeListener(this);  
26.     }  
27.   
28.     @Override  
29.     protected void onSaveInstanceState(Bundle outState) {  
30.         //super.onSaveInstanceState(outState);  
31.     }  
32.   
33.     @Override  
34.     public void onPageScrollStateChanged(int state) {  
35.         if (state == ViewPager.SCROLL_STATE_IDLE) {  
36.         }  
37.     }  
38.   
39.     @Override  
40.     public void onPageScrolled(int position, float positionOffset,  
41.             int positionOffsetPixels) {  
42.         if (positionOffset == 0.0f)  
43.             return;  
44.     }  
45.   
46.     @Override  
47.     public void onPageSelected(int position) {  
48.     }  
49. }  

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

我们每个界面都是使用的Fragment，由于通用以及简洁性，我这里就只使用一个TestFragment, 这里大家可以注意到我并没有在Fragment里面使用Image，因为我自己将每一页的背景做了切换，所以我将FrameLayout的背景做了替换iv=.setBackgroundResource(mContent);这样每一页的背景就可以变化了。

[java]  view plain copy

1. package com.way.newversion;  
2.   
3. import android.graphics.drawable.AnimationDrawable;  
4. import android.os.Bundle;  
5. import android.support.v4.app.Fragment;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.View.OnClickListener;  
9. import android.view.ViewGroup;  
10. import android.widget.Button;  
11. import android.widget.FrameLayout;  
12. import android.widget.ImageView;  
13.   
14. public class TestFragment extends Fragment {  
15.     private static final String KEY_CONTENT = "TestFragment:Content";  
16.     private static final String KEY_ISLASTPIC = "TestFragment:IsLastPic";  
17.       
18.     private int mContent;  
19.     private boolean mIsLastPic;  
20.   
21.     public static TestFragment newInstance(int content, boolean isLastPic) {  
22.         TestFragment fragment = new TestFragment();  
23.   
24.         fragment.mContent = content;  
25.         fragment.mIsLastPic = isLastPic;  
26.         return fragment;  
27.     }  
28.   
29.     @Override  
30.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
31.             Bundle savedInstanceState) {  
32.         if ((savedInstanceState != null)  
33.                 && savedInstanceState.containsKey(KEY_CONTENT)) {  
34.             mContent = savedInstanceState.getInt(KEY_CONTENT);  
35.             mIsLastPic = savedInstanceState.getBoolean(KEY_ISLASTPIC);  
36.         }  
37.         View root = inflater  
38.                 .inflate(R.layout.fragment_layout, container, false);  
39.         FrameLayout iv = (FrameLayout) root.findViewById(R.id.frameLayout);  
40.         iv.setBackgroundResource(mContent);  
41.           
42.         ImageView upLoading = (ImageView) root.findViewById(R.id.upLoading);  
43.         upLoading.setBackgroundResource(R.drawable.img_up_loading);  
44.           
45.         AnimationDrawable mFrameAnimation = (AnimationDrawable) upLoading.getBackground();  
46.         mFrameAnimation.start();  
47.           
48.         //第一界面显示动态箭头，最后一个界面显示button       
49.         Button btn = (Button) root.findViewById(R.id.btn);  
50.         if (mIsLastPic){  
51.             upLoading.setVisibility(View.GONE);  
52.             btn.setVisibility(View.VISIBLE);  
53.         }  
54.         else{  
55.             btn.setVisibility(View.GONE);  
56.             upLoading.setVisibility(View.VISIBLE);  
57.         }  
58.         if (btn.getVisibility() == View.VISIBLE)  
59.             btn.setOnClickListener(new OnClickListener() {  
60.   
61.                 @Override  
62.                 public void onClick(View v) {  
63.                     // TODO Auto-generated method stub  
64.                 }  
65.             });  
66.         return root;  
67.     }  
68.   
69.     @Override  
70.     public void onSaveInstanceState(Bundle outState) {  
71.         super.onSaveInstanceState(outState);  
72.         outState.putInt(KEY_CONTENT, mContent);  
73.         outState.putBoolean(KEY_ISLASTPIC, mIsLastPic);  
74.     }  
75. }  

接下来是所有fragment的Adapter，这里我更改了图片资源：

[java]  view plain copy

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

其余的这里就不详述了，源码：http://download.csdn/detail/feiyangxiaomi/7561259

本文标签： 腾讯管家新特性界面手机