分析
- 目测布局：分为两个viewpager，上面展示文字的viewpager和下面的图片viewpager；
- 进一步观察：上面的文字viewpager滑动有延迟，而图片viewpager是没有滑动自带动画的，而且都没有自带滑动手势效果；
- 分析得出：两个viewpager都拦截滑动事件，文字viewpager需要设置切换时间，有动画效果，图片viewpager去掉自带动画；
- 分析图片viewpager动画效果，都是两张图片，一张背景，一张上浮图片；打开之后，背景：透明度由0到1；上浮图片：由下往上冒出;第三张图片，头像上浮之外还有个变小的过程
实现
- 先实现viewpager滑动拦截，拦截点击事件就行，具体看代码不多说
public class MyInterceptViewPager extends ViewPager {
private boolean isScrollable = true;
public MyInterceptViewPager(Context context) {
super(context);
}
public MyInterceptViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return isScrollable && super.onTouchEvent(ev);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return isScrollable && super.onInterceptTouchEvent(ev);
}
@Override
public void setCurrentItem(int item) {
super.setCurrentItem(item, false);//表示切换的时候，不需要切换时间。
}
@Override
public void setCurrentItem(int item, boolean smoothScroll) {
super.setCurrentItem(item, smoothScroll);
}
}
- 通过反射，实现viewpager切换动画速度修改，新建一个类继承于Scroller
public class FixedSpeedScroller extends Scroller {
private int mDuration = 1500;
public FixedSpeedScroller(Context context) {
super(context);
}
public FixedSpeedScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
// Ignore received duration, use fixed one instead
super.startScroll(startX, startY, dx, dy, mDuration);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy) {
// Ignore received duration, use fixed one instead
super.startScroll(startX, startY, dx, dy, mDuration);
}
public void setmDuration(int time) {
mDuration = time;
}
public int getmDuration() {
return mDuration;
}
}
- 具体使用
public class MainActivity extends AppCompatActivity {
public static boolean SHOW_TWO_ANIM = true;//第二个界面是否展示动画 网易云音乐 3->2时 2没展示动画效果
MyInterceptViewPager mTextPager;//文字
MyInterceptViewPager mImageViewPager;//图片
RelativeLayout mTouchLayout;//点击分发
ImageView mIndicatorOne, mIndicatorTwo, mIndicatorThree;
int pageIndex = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextPager = findViewById(R.id.main_text_pager);
mImageViewPager = findViewById(R.id.main_image_pager);
mTouchLayout = findViewById(R.id.main_touch_layout);
mIndicatorOne = findViewById(R.id.main_indicator_one);
mIndicatorTwo = findViewById(R.id.main_indicator_two);
mIndicatorThree = findViewById(R.id.main_indicator_three);
try {
Field field = ViewPager.class.getDeclaredField("mScroller");//反射
field.setAccessible(true);
FixedSpeedScroller scrollerText = new FixedSpeedScroller(this, new AccelerateInterpolator());
field.set(mTextPager, scrollerText);
scrollerText.setmDuration(350);
} catch (Exception e) {
}
MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
TextPagerAdapter textPagerAdapter = new TextPagerAdapter();
mTextPager.setAdapter(textPagerAdapter);
mImageViewPager.setAdapter(fragmentPagerAdapter);
mImageViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
pageIndex = i;
mIndicatorOne.setImageDrawable(getResources().getDrawable(R.drawable.circle_gray));
mIndicatorTwo.setImageDrawable(getResources().getDrawable(R.drawable.circle_gray));
mIndicatorThree.setImageDrawable(getResources().getDrawable(R.drawable.circle_gray));
switch (i){
case 0:
SHOW_TWO_ANIM = true;
mIndicatorOne.setImageDrawable(getResources().getDrawable(R.drawable.circle_main));
break;
case 1:
mIndicatorTwo.setImageDrawable(getResources().getDrawable(R.drawable.circle_main));
break;
case 2:
SHOW_TWO_ANIM = false;
mIndicatorThree.setImageDrawable(getResources().getDrawable(R.drawable.circle_main));
break;
}
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
//点击分发 实现两个viewpager的联动，根据横向滑动距离和方向判断是否应该翻页
mTouchLayout.setOnTouchListener(new View.OnTouchListener() {
float startX;
float startY;//没有用到
float endX;
float endY;//没有用到
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = event.getX();
startY = event.getY();
break;
case MotionEvent.ACTION_UP:
endX = event.getX();
endY = event.getY();
WindowManager windowManager = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
Point size = new Point();
windowManager.getDefaultDisplay().getSize(size);
int width = size.x;
if (startX - endX >= (width / 8)){// startX - endX 大于0 且大于宽的1/8 可以往后翻页
if (pageIndex == 0){
mImageViewPager.setCurrentItem(1);
mTextPager.setCurrentItem(1, true);
}else if (pageIndex == 1){
mImageViewPager.setCurrentItem(2);
mTextPager.setCurrentItem(2, true);
}
}else if (endX - startX >= (width / 8)){ // endX - startX 大于0 且大于宽的1/8 可以往前翻页
if (pageIndex == 2){
mImageViewPager.setCurrentItem(1);
mTextPager.setCurrentItem(1, true);
}else if (pageIndex == 1){
mImageViewPager.setCurrentItem(0);
mTextPager.setCurrentItem(0, true);
}
}
break;
}
return true;
}
});
}
public void onLogin(View view) {
Toast.makeText(this, "登录/注册", Toast.LENGTH_SHORT).show();
}
public void onMain(View view) {
Toast.makeText(this, "立即体验", Toast.LENGTH_SHORT).show();
}
}