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

Question

我想在Android应用程序中为其简介（登录/注册）屏幕实现相同类型的动画，例如链接。

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/background_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="centerCrop" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="7" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:gravity="right"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="5dp"
            android:src="@drawable/icon_skip" />

        <TextView
            android:id="@+id/skip_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Skip"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@android:color/white" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:gravity="bottom"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/logo" />

        <android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/pager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:context="com.xyz.View.IntroductionScreen" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/connection_bt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:background="@drawable/button"
            android:text="CONNEXION"
            android:textColor="@android:color/white" />

        <Button
            android:id="@+id/register_bt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/button"
            android:text="INSCRIPTION"
            android:textColor="@android:color/white" />
    </LinearLayout>
</LinearLayout>

View Viewr片段布局是

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
 <LinearLayout
   android:id="@+id/text_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="vertical" >
<TextView
    android:id="@+id/tagline_tv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:singleLine="true"
    android:text="Laissez votre prochain job"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/white" />

<TextView
    android:id="@+id/details_tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:maxLines="2"
    android:text="vous trouver"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/white" />

    </LinearLayout>
  </RelativeLayout>

示例Splashs creen这是我想要实现的。 谢谢

Answer 1

这是一个lag free，也可以处理Buttons

主要想法：

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

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

3）在onCreate方法中正确设置每个图层的alpha值，这样只需要上面一个的alpha值为255。

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

5）在函数transformPage

中更改每个视图的drawable

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

现在让我们看一下代码：

MainActivity

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中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/layerdrawable" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_marginBottom="48dip" >

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Sign in"
            android:layout_margin="16dip"
            android:background="#2ec6e4"
            android:textColor="#FFFFFF" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Join us"
            android:background="#2ec6e4"
            android:layout_margin="16dip"
            android:textColor="#FFFFFF"
            />
    </LinearLayout>

</RelativeLayout>

LayerDrawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <bitmap
            android:id="@+id/Idofbg3"
            android:gravity="fill"
            android:src="@drawable/bg3" />
    </item>
    <item>
        <bitmap
            android:id="@+id/Idofbg2"
            android:gravity="fill"
            android:src="@drawable/bg2" />
    </item>
    <item>
        <bitmap
            android:id="@+id/Idofbg1"
            android:gravity="fill"
            android:src="@drawable/bg1" />
    </item>

</layer-list>

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

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"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:id="@+id/FragmentA"
     android:background="@android:color/transparent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="This is Fragment A"
        android:textColor="#FFFFFF"
        android:id="@+id/textView"  
        android:gravity="center"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true" />
</RelativeLayout>          

Answer 2

将ViewPager.PageTransformer设置为ViewPager，并使用aplha和translation动画属性获得所需的动画。

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

假设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);
        }
    });

这是布局：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_alignParentTop="true"
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" />

</RelativeLayout>

这是屏幕记录：