Viewpager选项卡中的animation更改fadein / fadeout,就像Linkedin介绍屏幕一样

我想在Android应用程序中为其简介(登录/注册)屏幕实现相同types的animation,例如链接。

我正在使用视图寻呼机进行简介屏幕,我想在背景图像更改时实现fadein fadeoutanimation,按照从右向左滑动或反之亦然。 我想根据屏幕的滑动在背景图像变化上实现fadein和fadeoutanimation。 任何帮助表示赞赏。 请看一下我的布局代码

            

而View Viewr片段布局是

       

示例Splashs creen这是我想要实现的。 Linkedin Spalsh屏幕 谢谢

Solutions Collecting From Web of "Viewpager选项卡中的animation更改fadein / fadeout,就像Linkedin介绍屏幕一样"

这是一个无lag free ,也处理Buttons

在此处输入图像描述

大意:

1)首先为片段创建透明背景。

2)创建LayerDrawable并将每个片段的背景图像添加为项目。 然后添加LayerDrawable作为viewpager的背景。

3)在onCreate方法中正确设置每一层的alpha,所以只有上层的alpha值为255。

4)为FragmentStatPagerAdapter的每个视图设置一个标签,该标签对应于您在LayerDrawable声明的可绘制索引。 例如,当您打开应用程序时, FragmentA正在显示,因此其标记必须对应于上部drawable 2(从0开始)。 最后一页标记必须为0对应最低可绘制。

5)在函数transformPage改变每个视图的drawable

6)用于添加按钮使用RelativeLayout 。 要将按钮放在所有视图的顶部,请使用RelativeLayout 。 后来的孩子们在Z轴上放置得更高。 你可以在代码中看到它:

现在让我们看看代码:

主要活动

 public class MainActivity extends FragmentActivity { ViewPager viewPager=null; int numberOfViewPagerChildren = 3; int lastIndexOfViewPagerChildren = numberOfViewPagerChildren - 1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager) findViewById(R.id.pager); viewPager.setAdapter(new MyAdapter(getSupportFragmentManager())); final LayerDrawable background = (LayerDrawable) viewPager.getBackground(); background.getDrawable(0).setAlpha(0); // this is the lowest drawable background.getDrawable(1).setAlpha(0); background.getDrawable(2).setAlpha(255); // this is the upper one viewPager.setPageTransformer(true, new ViewPager.PageTransformer() { @Override public void transformPage(View view, float position) { int index = (Integer) view.getTag(); Drawable currentDrawableInLayerDrawable; currentDrawableInLayerDrawable = background.getDrawable(index); if(position < = -1 || position >= 1) { currentDrawableInLayerDrawable.setAlpha(0); } else if( position == 0 ) { currentDrawableInLayerDrawable.setAlpha(255); } else { currentDrawableInLayerDrawable.setAlpha((int)(255 - Math.abs(position*255))); } } }); } class MyAdapter extends FragmentStatePagerAdapter { public MyAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { Fragment fragment=null; if(i==0) { fragment=new FragmentA(); } if(i==1) { fragment=new FragmentB(); } if(i==2) { fragment=new FragmentC(); } return fragment; } @Override public int getCount() { return numberOfViewPagerChildren; } @Override public boolean isViewFromObject(View view, Object object) { if(object instanceof FragmentA){ view.setTag(2); } if(object instanceof FragmentB){ view.setTag(1); } if(object instanceof FragmentC){ view.setTag(0); } return super.isViewFromObject(view, object); } } } 

activity_main.xml中

         

LayerDrawable

 < ?xml version="1.0" encoding="utf-8"?>            

对于那些不想声明片段的懒人:

FragmentA

 public class FragmentA extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_a,container,false); return v; } } 

fragment_a.xml

 < ?xml version="1.0" encoding="utf-8"?>    

将ViewPager.PageTransformer设置为ViewPager ,并使用aplha translation画属性实现所需的animation。

最重要的输入是传递给transformPage回调的position参数。 位置值指示视图当前的位置。

假设ViewPager中的视图是全宽度,则需要解释位置值的方式。

 ------------------------------------------------------------------------------------ position | what does it mean ------------------------------------------------------------------------------------ 0 | view is positioned in the center and fully visible to the user. -1 | view is positioned in the left and not visible to the user. 1 | view is positioned in the right and not visible to the user. >-1 & <0 | view is being scrolled towards left and is partially visible. >0 & <1 | view is being scrolled towards right and is partially visible. ------------------------------------------------------------------------------------ mPager.setPageTransformer(true, new ViewPager.PageTransformer() { @Override public void transformPage(View view, float position) { // Ensures the views overlap each other. view.setTranslationX(view.getWidth() * -position); // Alpha property is based on the view position. if(position < = -1.0F || position >= 1.0F) { view.setAlpha(0.0F); } else if( position == 0.0F ) { view.setAlpha(1.0F); } else { // position is between -1.0F & 0.0F OR 0.0F & 1.0F view.setAlpha(1.0F - Math.abs(position)); } // TextView transformation view.findViewById(R.id.textView).setTranslationX(view.getWidth() * position); } }); 

这是布局:

     

这是屏幕记录:

屏幕记录