仿蘑菇街動態(tài)高度ViewPager
最近我的同學(xué)在嘗試在模仿著做蘑菇街的首頁救赐，其中碰到了一個ViewPager展示圖片動態(tài)變化高度的效果，同學(xué)說比較麻煩跺撼，于是我們一起討論并做了一下嘗試，最終基本實現(xiàn)了蘑菇街的那個效果。
我們先來看看蘑菇街是個什么樣的效果
演示1.gif
我們可以看到兩個效果
- 隨著展示圖片的變化肴沫，ViewPager的高度發(fā)生變化
- 有小圖片的頁面滑到大圖片的頁面時，小圖要放大顯示蕴忆，大圖不放大颤芬，但是大圖的顯示區(qū)域會變小
下面我們來分析一下怎么實現(xiàn)
大致的想法就是監(jiān)聽ViewPager的滾動事件，然后計算此時ViewPager應(yīng)有的高度套鹅，然后設(shè)置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];
//因為現(xiàn)在還不知道ViewPager的寬度卓鹿，所以要等ViewPager布局完成之后再進(jìn)行一些初始化
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的初始高度設(shè)置為第一個頁面的高度
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);
}
}
第二步吟孙，監(jiān)聽ViewPager的滾動事件
對于監(jiān)聽ViewPager的水平滑動澜倦，我們有兩個方法可以使用
-
使用OnPageChangeListener
/** * 這個方法會在當(dāng)前頁面發(fā)生滾動的時候被調(diào)用 * * @param position 當(dāng)前頁面的索引 * @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法身滾動的時候調(diào)用，與OnPageChangeListener不同的是藻治，它不僅會為當(dāng)前頁調(diào)用里面的方法碘勉，它會為ViewPager中所有的子頁面調(diào)用方法。 * 通過這個接口中的方法我們能夠利用屬性動畫為給ViewPager中的Page頁設(shè)置一個(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表示完全已經(jīng)滾出屏幕晴叨，完全在中心頁的左邊，1表示完全在中心頁的右邊矾屯。 */ public void transformPage(View page, float position); }下面是ViewPager中的一段代碼兼蕊，我們可以看出，確實是為所有的子頁面調(diào)用了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是比較通用的，可以應(yīng)對普遍的情況排作，而PageTransformer是為了讓我們實現(xiàn)Pager中的某一個Page頁在滑動的時候如何變化牵啦，即產(chǎn)生一個什么樣的動畫（一般的情況下是屬性動畫）。
我們要實現(xiàn)的是整個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現(xiàn)在應(yīng)該的高度,heights[]表示頁面高度的數(shù)組。
int height = (int) (heights[position]*(1-positionOffset)+heights[position+1]*positionOffset);
//為ViewPager設(shè)置高度
ViewGroup.LayoutParams params = pager.getLayoutParams();
params.height = height;
pager.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {}
@Override
public void onPageScrollStateChanged(int state) {}
});
好的罪针，現(xiàn)在代碼已經(jīng)寫好了彭羹，我們來看看效果。
演示2.gif
我們可以看到高度確實變了泪酱，達(dá)到了基本的效果派殷。但是，圖片在滑動的時候墓阀，圖片沒有填充滿page的整個寬度或高度愈腾，直觀的體現(xiàn)就是小圖上下留白、大圖左右留白岂津。小圖在滑動的時候也沒有放大啊虱黄，反而大圖在滑動的時候是在縮小。
導(dǎo)致上述的問題的主要原因就是吮成，ImageView的默認(rèn)ScaleType是FIT_CENTER橱乱，ImageView會等比縮放辜梳，整幅圖能夠居中顯示。所以
- 小圖在滑動的時候?qū)挾炔]有變泳叠，只是高度增大作瞄，所以小圖并不會放大，居中顯示的話會導(dǎo)致上下留白危纫。
- 大圖在滑動的時候高度變小宗挥，圖片會因此縮小，顯示的寬度也會縮小种蝶，居中顯示的話會導(dǎo)致左右留白契耿。
解決辦法很簡單，將ImageView的ScaleType變成CENTER_CROP即可螃征，圖片將等比例縮放搪桂，圖像的短邊會與ImageView的邊長度相同，即不能留有空白盯滚，縮放后截取中間部分進(jìn)行顯示踢械。這種情況下，小圖會放大魄藕，大圖不會被縮小而會被截取内列，就能達(dá)到效果。
我們再次看下效果
演示3.gif
我們可以看到已經(jīng)達(dá)到了想要的效果背率。
總結(jié)
寫這個效果用到的一些知識
- ScaleType的使用
- ViewPager的兩種滾動監(jiān)聽
