首页 > 代码库 > android竖向显示新特性界面
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