两个ViewPager联动效果

说明:滑动一个ViewPager另一个跟着滑动

WrapContentHeightViewPager.java

package com.yundi.piano.ceshidemo;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;

public class WrapContentHeightViewPager extends ViewPager {
    private int current;
    private int height = 0;
    private boolean scrollble = true;

    public WrapContentHeightViewPager(Context context) {
        super(context);
    }

    public WrapContentHeightViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (getChildCount() > current) {
            View child = getChildAt(current);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            height = h;

        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public void resetHeight(int current) {
        this.current = current;
        if (getChildCount() > current) {
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
            if (layoutParams == null) {
                layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, height);
            } else {
                layoutParams.height = height;
            }
            setLayoutParams(layoutParams);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (!scrollble) {
            return true;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return scrollble && super.onInterceptTouchEvent(ev);
    }

    public boolean isScrollble() {
        return scrollble;
    }

    public void setScrollble(boolean scrollble) {
        this.scrollble = scrollble;
    }

}
BaseLinkPageChangeListener.java
package com.yundi.piano.ceshidemo;

import android.support.v4.view.ViewPager;

public class BaseLinkPageChangeListener implements ViewPager.OnPageChangeListener {

    private ViewPager linkViewPager;
    private ViewPager selfViewPager;

    private int pos;

    public BaseLinkPageChangeListener(ViewPager selfViewPager, ViewPager linkViewPager) {
        this.linkViewPager = linkViewPager;
        this.selfViewPager = selfViewPager;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        int marginX = ((selfViewPager.getWidth() + selfViewPager.getPageMargin()) * position
                + positionOffsetPixels) * (linkViewPager.getWidth() + linkViewPager.getPageMargin()) / (
                selfViewPager.getWidth()
                        + selfViewPager.getPageMargin());

        if (linkViewPager.getScrollX() != marginX) {
            linkViewPager.scrollTo(marginX, 0);
        }
    }

    @Override
    public void onPageSelected(int position) {
        this.pos = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            linkViewPager.setCurrentItem(pos);
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.yundi.piano.ceshidemo.WrapContentHeightViewPager
            android:id="@+id/body_vp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="match_parent"
            android:text="hhh"
            android:padding="10dp"
            android:layout_height="wrap_content" />

        <com.yundi.piano.ceshidemo.WrapContentHeightViewPager
            android:id="@+id/header_vp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

MainActivity.java

package com.yundi.piano.ceshidemo;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends BaseActivity {

    private WrapContentHeightViewPager mVp1,mVp2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mVp1=findViewById(R.id.body_vp);
        mVp2=findViewById(R.id.header_vp);
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            list.add("第" + i + "个View");
        }
        mVp1.setAdapter(new MyPagerAdapter1(MainActivity.this, list));

        List<String> list2 = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            list2.add("第" + i + "个Views");
        }
        mVp2.setAdapter(new MyPagerAdapter1(MainActivity.this, list2));

        mVp1.addOnPageChangeListener(new BaseLinkPageChangeListener(mVp1, mVp2) {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
//                pageScrollToTop();
                mVp1.resetHeight(position);//设置viewpager高度
                mVp2.resetHeight(position);
            }
        });
        mVp2.addOnPageChangeListener(new BaseLinkPageChangeListener(mVp2, mVp1) {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
//                tabLayout.onPageSelected(position);
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
//                tabLayout.onPageScrolled(position, positionOffset, positionOffsetPixels);
                mVp1.resetHeight(position);
                mVp2.resetHeight(position);
            }
        });

    }
}

 

一直都很喜欢Instagram的快拍(Story)功能,也很喜欢他们的翻转效果,是一种简单的3D翻转效果。大致效果如下:instagramstory.gif貌似最近微博也出了一个差不多的Story的功能,用的翻转动画也是和Instagram一样。思路看到这样的效果,很容易想到用ViewPager的Transformer动画来实现。当然这种翻转效果网上也有相应的实现,就是以View的左边或右边为旋转轴进行空间上Y轴的旋转。于是很容易我们可以写出下面的代码public class StereoPagerTransformer implements ViewPager.PageTransformer {   private static final float MAX_ROTATE_Y = 90;   private final float pageWidth;   public StereoPagerTransformer(float pageWidth) {     this.pageWidth = pageWidth;   }   public void transformPage(View view, float position) {     view.setPivotY(view.getHeight() / 2);     if (position < -1) { // [-Infinity,-1)       // This page is way off-screen to the left.       view.setPivotX(0);       view.setRotationY(90);     } else if (position <= 0) { // [-1,0]       view.setPivotX(pageWidth);       view.setRotationY(position * MAX_ROTATE_Y);     } else if (position <= 1) { // (0,1]       view.setPivotX(0);       view.setRotationY(position * MAX_ROTATE_Y);     } else { // (1, Infinity]       // This page is way off-screen to the right.       view.setPivotX(0);       view.setRotationY(90);     }   } }然后运行代码看一下我们实现的效果:badtransformer.gif额,总觉哪里不对,嗯,就是动画的速度不对,上面的写法就是一个匀速进行的动画,效果非常不理想,这时我们就要重新写一个插值器(TimeInterpolator ),在尝试了系统自带的差值器后,发现效果仍然不是很理想。于是决定自己写一个插值器。关于插值器根据TimeInterpolator代码中的文档可以得知,插值器用于控制动画进行的速度,其输入值为0~1,输出值也为0~1。/**  * A time interpolator defines the rate of change of an animation. This allows animations  * to have non-linear motion, such as acceleration and deceleration.  */ public interface TimeInterpolator {     /**      * Maps a value representing the elapsed fraction of an animation to a value that represents      * the interpolated fraction. This interpolated value is then multiplied by the change in      * value of an animation to derive the animated value at the current elapsed animation time.      *      * @param input A value between 0 and 1.0 indicating our current point      *        in the animation where 0 represents the start and 1.0 represents      *        the end      * @return The interpolation value. This value can be more than 1.0 for      *         interpolators which overshoot their targets, or less than 0 for      *         interpolators that undershoot their targets.      */     float getInterpolation(float input); }经过简单的分析,这次我们的动画应该在动画前半段时进行缓慢一些(也就是输入值在0到某个值之间),在后半段时(也就是输入值在某个值到1之间)进行的快速一些。经过简单的调整,最终我写了如下的插值器private static final TimeInterpolator sInterpolator = new TimeInterpolator() {         @Override         public float getInterpolation(float input) {             if (input < 0.7) {                 return input * (float) pow(0.7, 3) * MAX_ROTATE_Y;             } else {                 return (float) pow(input, 4) * MAX_ROTATE_Y;             }         }     };再次运行代码,这次效果看上去好多了,哈哈,一个简单又好看的效果就完成了。goodtransformer.gif最后附上完整的代码:import android.animation.TimeInterpolator; import android.support.v4.view.ViewPager; import android.view.View; import static java.lang.Math.pow; /**  * @author wupanjie  */ public class StereoPagerTransformer implements ViewPager.PageTransformer {     private static final float MAX_ROTATE_Y = 90;     private static final TimeInterpolator sInterpolator = new TimeInterpolator() {         @Override         public float getInterpolation(float input) {             if (input < 0.7) {                 return input * (float) pow(0.7, 3) * MAX_ROTATE_Y;             } else {                 return (float) pow(input, 4) * MAX_ROTATE_Y;             }         }     };     private final float pageWidth;     public StereoPagerTransformer(float pageWidth) {         this.pageWidth = pageWidth;     }     public void transformPage(View view, float position) {         view.setPivotY(view.getHeight() / 2);         if (position < -1) { // [-Infinity,-1)             // This page is way off-screen to the left.             view.setPivotX(0);             view.setRotationY(90);         } else if (position <= 0) { // [-1,0]             view.setPivotX(pageWidth);             view.setRotationY(-sInterpolator.getInterpolation(-position));         } else if (position <= 1) { // (0,1]             view.setPivotX(0);             view.setRotationY(sInterpolator.getInterpolation(position));         } else { // (1, Infinity]             // This page is way off-screen to the right.             view.setPivotX(0);             view.setRotationY(90);         }     } }总结动画的灵魂在于它的插值器,插值器控制了动画进行的速度,这次我选择自己写了一个插值器作为练手,其实我这次写的插值器效果仍不是很平滑,动画的插值器也应该用贝塞尔曲线来制作,这样我们的动画就会进行的更平滑。具体大家可以参考自带的PathInterpolator,是在API 21以后引入的,当然它也有对应的兼容包。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值