动画Viewpager

动画Viewpager

关注
发信
关注(28)粉丝(399)

动画Viewpager Tab切换淡入/淡出像LinkedIn简介屏幕

本文介绍了动画Viewpager Tab切换淡入/淡出像LinkedIn简介屏幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想实现同样的动画，如联在做的Andr​​oid应用程序为其介绍（登录/注册）屏幕。

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

我使用的视图寻呼机简介屏幕，我想实现淡入淡出动画的背景图像变化，按刷卡从右到左，反之亦然。我想根据屏幕刷卡来实现淡入和淡出动画的背景图像变化。任何帮助是AP preciated。请看看我的布局code

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>

和查看传呼机片段布局

<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>

样品溅起creen这就是我想要实现。谢谢

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

推荐答案

这是一个滞后免费之一，也是处理按钮

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 方法组每一层的阿尔法正确所以只是上面一个拥有255 alpha值。

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

4）对于每个视图设置 FragmentStatPagerAdapter 对应于您在 LayerDrawable 。例如，当您打开应用程序碎裂正显示出这样的标签必须符合上面绘制的是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

5) change drawable of each view at the function transformPage

6），用于将按钮使用 RelativeLayout的。为了在上面放置按钮的所有视图中使用 RelativeLayout的。购买儿童放置在Z轴上较高。你可以看到它在code：

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:

现在让我们看看code：

now lets see code:

MainActivity

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

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

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:

碎裂

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

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>

这篇关于动画Viewpager Tab切换淡入/淡出像LinkedIn简介屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 04:25
Powered by LMLPHP ©2024 动画Viewpager 0.038411