在 ViewPager Android 中跨片段平滑转换视图答案

【问题标题】：Smooth Translation of a View across Fragments in ViewPager Android在 ViewPager Android 中跨片段平滑转换视图
【发布时间】：2016-05-25 09:30:08
【问题描述】：

我必须做简单的翻译，我必须从左边移动图像（活动和片段 1 在屏幕上）现在，当我滚动页面（片段）时，片段 1 向左移动，片段 2 来自右侧，图像也应该从左向右平移

activity_intro.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/relativeLayout"

tools:context="com.example.rahulkumarlohra.retrofitsample.Retro.Activity.IntroActivity">

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>

<ImageView
    android:id="@+id/imageView1"
    android:src="@mipmap/plus_icon_blue_xxhdpi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="143dp" />


<ImageView
    android:id="@+id/imageView2"
    android:src="@mipmap/plus_icon_blue_xxhdpi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/viewPager"
    android:layout_alignEnd="@+id/viewPager"
    android:layout_marginTop="81dp" />

以上代码为activity_intro.xml

我在 ViewPager 外面有一个 imageView，我想在 ViewPager 中跨片段翻译这个 imageView。现在我可以使用 viewPager.addOnPageChangeListener 翻译这个 imageView，但翻译并不顺利

下面是viewPager.addOnPageChangeListener的代码

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.d(TAG,"position:"+position);
            Log.d(TAG,"positionOffset:"+positionOffset);
            Log.d(TAG,"positionOffsetPixels:"+positionOffsetPixels);

            DecimalFormat df = new DecimalFormat("#.##");

            float movement = (Float.parseFloat(df.format(positionOffset)));

            int rlWidth = relativeLayout.getWidth();
            IntroActivity.c = movement;

            imageView1.animate().translationX(positionOffsetPixels).start();
            if(movement!=IntroActivity.c)
            {

                if(movement>IntroActivity.c)
                {
                    if(movement-IntroActivity.c>0.03)
                    {

                        imageView1.animate().translationX(rlWidth*movement).withLayer().start();
                        IntroActivity.c = movement;

                    }
                }else {

                    if(IntroActivity.c-movement>0.03)
                    {

                        imageView1.animate().translationX(rlWidth*movement).withLayer().start();
                        IntroActivity.c = movement;

                    }
                }
            }

        }

        @Override
        public void onPageSelected(int position) {
            Log.d(TAG,"onPage Selected position:"+position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

【问题讨论】：

标签： android android-layout android-fragments android-animation

【解决方案1】：

Animation to show ImageView from left to right

或

为图片使用样式

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromXDelta="100%"
    android:toXDelta="0%"/> 

 <translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%" android:toXDelta="100%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="600"/>

【讨论】：