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

素材狗 2022-01-01 19:43:03 文章分类：移动开发问题点击数：1次

文章标签

Animation in Viewpager tab change fadein / fadeout as like Linkedin introduction screen(Viewpager 选项卡中的动画更改淡入/淡出，就像 Linkedin 介绍屏幕一样)

本文介绍了Viewpager 选项卡中的动画更改淡入/淡出，就像 Linkedin 介绍屏幕一样的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为它的介绍(登录/注册)屏幕实现相同类型的动画，例如在 android 应用程序中的链接.

I want to implement same kind of animation such as linked in does in android application for its Introduction(Login / register) screen.

我正在为介绍屏幕使用视图寻呼机，我想在背景图像更改时实现淡入淡出动画，根据从右向左滑动，反之亦然.我想根据屏幕的滑动实现背景图像变化的淡入淡出动画.任何帮助表示赞赏.请看我的布局代码

I am using view pager for Introduction screen and i want to implement fadein fadeout animation on background image change, As per swipe right to left or vice versa. I want to implement fadein and fadeout animation on background image change according to swipe of screen. any help is appreciated. Please take a look at my layout code

<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 pager片段布局是

And View pager fragment layout is

<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 这是我想要实现的.谢谢

sample Splashs creen this is what i want to implement. Thank you

推荐答案

这是一个 lag free 并且还处理 Buttons

This is a lag free one and also handles the Buttons

主要思想:

1) 首先为您的片段创建透明背景.

1) first create transparent background for your fragments.

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

2) Create LayerDrawable and add background image of each fragment as an item. Then add your LayerDrawable as a background of your viewpager.

3) 在 onCreate 方法中正确设置每一层的 alpha，因此只有上一层的 alpha 值为 255.

3) in onCreate method set alpha of each layer correctly so just upper one has alpha value of 255.

4) 为您的 FragmentStatPagerAdapter 的每个视图设置一个标签，该标签对应于您在 LayerDrawable 中声明的可绘制索引.例如，当您打开应用程序 FragmentA 时，它的标签必须对应于 2 的上部可绘制对象(从 0 开始).最后一页标签必须为 0 对应于最低可绘制对象.

4) set for each view of your FragmentStatPagerAdapter a tag that corresponds to drawable index that you declared in the LayerDrawable. for example when you open the app FragmentA is showing so its tag must correspond to upper drawable that is 2 (beginning from 0). last page tag must be 0 corresponds to lowest drawable.

5) 在transformPage

6) 添加按钮使用RelativeLayout.为了在所有视图上放置按钮，请使用 RelativeLayout.后来的孩子在 Z 轴上的位置更高.可以在代码中看到:

6) for adding the button use RelativeLayout. In order to place buttons on top of all views use RelativeLayout. Later children are placing higher on the Z axis. You can see it in the code:

现在让我们看看代码:

主活动

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>

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

for lazy people who just do not want to declare fragments:

片段A

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>