仿蘑菇街动态高度ViewPager
最近我的同学在尝试在模仿着做蘑菇街的首页，其中碰到了一个ViewPager展示图片动态变化高度的效果，同学说比较麻烦，于是我们一起讨论并做了一下尝试，最终基本实现了蘑菇街的那个效果。
我们先来看看蘑菇街是个什么样的效果
演示1.gif
我们可以看到两个效果
- 随着展示图片的变化，ViewPager的高度发生变化
- 有小图片的页面滑到大图片的页面时，小图要放大显示，大图不放大，但是大图的显示区域会变小
下面我们来分析一下怎么实现
大致的想法就是监听ViewPager的滚动事件，然后计算此时ViewPager应有的高度，然后设置ViewPager的高度。
第一步，初始化ViewPager
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.jinglong.transitionviewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/pager_imgs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
MainActivity.java
package com.jinglong.transitionviewpager;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private ViewPager pager;
private int[] imgIds = {R.mipmap.icon,R.mipmap.icon1,R.mipmap.icon2};
private List<ImageView> imageViews;
//各个页面的高度
private int[] heights;
private PagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) findViewById(R.id.pager_imgs);
imageViews = new ArrayList<>(imgIds.length);
heights = new int[imgIds.length];
//因为现在还不知道ViewPager的宽度，所以要等ViewPager布局完成之后再进行一些初始化
pager.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//初始化各个页面
for (int i = 0;i<imgIds.length;i++){
ImageView imageView = new ImageView(MainActivity.this);
Drawable iconDrawable = getResources().getDrawable(imgIds[i]);
//计算该页面合适的高度，使得图片完整的显示，填充整个高度和宽度
heights[i] = (int) (pager.getWidth()/(float)iconDrawable.getIntrinsicWidth()*iconDrawable.getIntrinsicHeight());
imageView.setImageDrawable(iconDrawable);
imageViews.add(imageView);
}
adapter.notifyDataSetChanged();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
pager.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
pager.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
//ViewPager的初始高度设置为第一个页面的高度
ViewGroup.LayoutParams layoutParams = pager.getLayoutParams();
layoutParams.height = heights[0];
pager.setLayoutParams(layoutParams);
}
});
adapter = new PagerAdapter() {
@Override
public int getCount() {
return imageViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = imageViews.get(position);
container.addView(imageView);
return imageView;
}
};
pager.setAdapter(adapter);
}
}
第二步，监听ViewPager的滚动事件
对于监听ViewPager的水平滑动，我们有两个方法可以使用
-
使用OnPageChangeListener
/** * 这个方法会在当前页面发生滚动的时候被调用 * * @param position 当前页面的索引 * @param positionOffset 它取值范围为[0,1),表示偏移量。0->没有偏移 接近于1->几乎完全偏移 * @param positionOffsetPixels 偏移的像素值 */ public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //主要这个方法有用 } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } -
3.0以后API中提供了PageTransformer
/** * * 这个接口中的方法也是在ViewPager法身滚动的时候调用，与OnPageChangeListener不同的是，它不仅会为当前页调用里面的方法，它会为ViewPager中所有的子页面调用方法。 * 通过这个接口中的方法我们能够利用属性动画为给ViewPager中的Page页设置一个(tansformation)变换。 * 就像属性动画只在3.0之后才有的，PagerTransformer在早期的版本上也没有。 */ public interface PageTransformer { /** * Apply a property transformation to the given page. * * @param page Apply the transformation to this page * @param position page相对于ViewPager的中心的偏移量，0表示page停在ViewPager的中心,-1表示完全已经滚出屏幕，完全在中心页的左边，1表示完全在中心页的右边。 */ public void transformPage(View page, float position); }下面是ViewPager中的一段代码，我们可以看出，确实是为所有的子页面调用了mPageTransformer.transformPage方法。
protected void onPageScrolled(int position, float offset, int offsetPixels) {
......
if (mPageTransformer != null) {
final int scrollX = getScrollX();
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp.isDecor) continue;
final float transformPos = (float) (child.getLeft() - scrollX) / getClientWidth();
mPageTransformer.transformPage(child, transformPos);
}
}
......
}
以上两种方法都可以来间提供ViewPager的变化，OnPageChangeListener是比较通用的，可以应对普遍的情况，而PageTransformer是为了让我们实现Pager中的某一个Page页在滑动的时候如何变化，即产生一个什么样的动画（一般的情况下是属性动画）。
我们要实现的是整个ViewPager的变换，而不是单个Page页的变换，所以这里使用OnPageChangeListener比较好。
第三步，在onPageScrolled方法中，改变ViewPager高度
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position==heights.length-1){
return;
}
//计算ViewPager现在应该的高度,heights[]表示页面高度的数组。
int height = (int) (heights[position]*(1-positionOffset)+heights[position+1]*positionOffset);
//为ViewPager设置高度
ViewGroup.LayoutParams params = pager.getLayoutParams();
params.height = height;
pager.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {}
@Override
public void onPageScrollStateChanged(int state) {}
});
好的，现在代码已经写好了，我们来看看效果。
演示2.gif
我们可以看到高度确实变了，达到了基本的效果。但是，图片在滑动的时候，图片没有填充满page的整个宽度或高度，直观的体现就是小图上下留白、大图左右留白。小图在滑动的时候也没有放大啊，反而大图在滑动的时候是在缩小。
导致上述的问题的主要原因就是，ImageView的默认ScaleType是FIT_CENTER，ImageView会等比缩放，整幅图能够居中显示。所以
- 小图在滑动的时候宽度并没有变，只是高度增大，所以小图并不会放大，居中显示的话会导致上下留白。
- 大图在滑动的时候高度变小，图片会因此缩小，显示的宽度也会缩小，居中显示的话会导致左右留白。
解决办法很简单，将ImageView的ScaleType变成CENTER_CROP即可，图片将等比例缩放，图像的短边会与ImageView的边长度相同，即不能留有空白，缩放后截取中间部分进行显示。这种情况下，小图会放大，大图不会被缩小而会被截取，就能达到效果。
我们再次看下效果
演示3.gif
我们可以看到已经达到了想要的效果。
总结
写这个效果用到的一些知识
- ScaleType的使用
- ViewPager的两种滚动监听
网友评论