ParallaxEffects 視差特效

• 瞭解ImageView 的scaleType 屬性
• 掌握ListView 的overScrollBy()方法

應用場景：QQ 空間，微信朋友圈，微博，需要快速定位的列表效果圖

介面初始化

填充ListView

自定義ParallaxListView 繼承ListView

public class ParallaxListView extends ListView {
    public ParallaxListView(Context context, AttributeSet attrs, int defStyle) {
        super
 
(context, attrs, defStyle);
    }
    public ParallaxListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public ParallaxListView(Context context) {

        super(context);
    }
}

填充ListView 的資料

public class Cheeses {
    public static final String[] NAMES = new
 
 String[]{"宋江", "盧俊義", "吳用",
            "公孫勝", "關勝", "林沖", "秦明", "呼延灼", "花榮", "柴進", "李應", "朱仝", "魯智 深",
            "武松", "董平", "張清", "楊志", "徐寧", "索超", "戴宗", "劉唐", "李逵", "史進", " 穆弘",
            "雷橫", "李俊", "阮小二", "張橫", "阮小五", " 張順", "阮小七", "楊雄", "石秀", " 解珍",
            " 解寶", "燕青", "朱武", "黃信", "孫立"
 
, "宣贊", "郝思文", "韓滔", "彭玘", "單廷珪 ",
            "魏定國", "蕭讓", "裴宣", "歐鵬", "鄧飛", " 燕順", "楊林", "凌振", "蔣敬", "呂方 ",
            "郭盛", "安道全", "皇甫端", "王英", "扈三娘", "鮑旭", "樊瑞", "孔明", "孔亮", " 項充",
            "李袞", "金大堅", "馬麟", "童威", "童猛", "孟康", "侯健", "陳達", "楊春", "鄭天壽 ",
            "陶宗旺", "宋清", "樂和", "龔旺", "丁得孫", "穆春", "曹正", "宋萬", "杜遷", "薛永 ", "施恩",
            "周通", "李忠", "杜興", "湯隆", "鄒淵", "鄒潤", "朱富", "朱貴", "蔡福", "蔡慶", " 李立",
            "李雲", "焦挺", "石勇", "孫新", "顧大嫂", "張青", "孫二孃", " 王定六", "鬱保四", " 白勝",
            "時遷", "段景柱"};
}

activity_main.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"
                tools:context=".MainActivity" >
    <com.example.parallax.widget.ParallaxListView
        android:id="@+id/plv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

MainActivity 填充資料

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    plv = (ParallaxListView) findViewById(R.id.plv);
    plv.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, Cheeses.NAMES));
}

ListView 新增Header

建立header 佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_header"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/parallax_img"/>
</RelativeLayout>

第10 行scaleType 為圖片的填充模式

圖片填充模式對比

• matrix:圖片寬高不變，以ImageView 左上角為基準向右向下填充ImageView
• fixXY:圖片寬高分別拉伸或壓縮，以ImageView 左上角為基準向右向下填充滿ImageView 的寬和高
• fitStart:圖片寬高分別拉伸或壓縮，以ImageView 左上角為基準向右向下填充滿ImageView 的寬，ImageView的高不用管
• fitCenter:圖片寬高分別拉伸或壓縮，圖片居中顯示，填充滿ImageView 的寬，ImageView 的高不用管
• fitEnd:圖片寬高分別拉伸或壓縮，以ImageView 左下角為基準向右向上填充滿ImageView 的寬，ImageView的高不用管
• center:圖片寬高不變，圖片居中顯示，填充ImageView
• centerCrop:圖片寬高分別拉伸或壓縮，圖片居中顯示，直到填充滿ImageView
• centerInside:原圖比ImageView 小，圖片居中顯示，填充ImageView，原圖比ImageView 大，圖片寬高分別拉伸或壓縮，直到填充滿ImageView 的寬或高即可

MainActivity.java 中新增頭佈局

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    plv = (ParallaxListView) findViewById(R.id.plv);
    View headerView = View.inflate(this,R.layout.layout_header, null);
    //新增頭佈局，需要在setAdapter 前新增
    plv.addHeaderView(headerView);
    plv.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,Cheeses.NAMES));
}

下拉放大

overScrollBy()方法引數解析

ParallaxListView 需要重寫overScrollBy()方法，api 要求9 以上

/**
 * 滑動到ListView 兩端才會呼叫
 */
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
                               int scrollY, int scrollRangeX, int scrollRangeY,
                               int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
    //deltaY 豎直方向滑動的瞬時變化量，頂部下拉為-，底部上拉為+
    //scrollY 兩端滑動超出的距離，頂部為-，底部為+
    //scrollRangeY 豎立方向滑動的範圍
    //maxOverScrollY 豎立方向最大的滑動位置
    //isTouchEvent 是否是使用者觸控拉動，true 表示使用者手指觸控拉動，false 表示慣性
    System.out.println("deltaY：" + deltaY + " scrollY:" + scrollY
            + " scrollRangeY:" + scrollRangeY + " maxOverScrollY:"
            + maxOverScrollY + " isTouchEvent:" + isTouchEvent);
    return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
            scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}

 理解deltaY 及isTouchEvent 引數的含義

動態改變頭佈局的高度

ParallaxListView 新增setParallaxImage()方法

private ImageView headerImage;
public void setParallaxImage(ImageView imageView){
    headerImage = imageView;
}

MainActivity 呼叫ParallaxListView 的setParallaxImage()方法

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    plv = (ParallaxListView) findViewById(R.id.plv);
    View headerView = View.inflate(this,R.layout.layout_header, null);
    final ImageView headerImage = (ImageView) headerView.findViewById(R.id.iv_header);
    //等view 的樹狀結構渲染完畢時，再將headerImage 設定到plv 中
    headerImage.getViewTreeObserver().addOnGlobalLayoutListener(newOnGlobalLayoutListener() {

        @Override
        public void onGlobalLayout() {
            //寬高已經測量完畢
            plv.setParallaxImage(headerImage);
            //移除監聽，避免下次渲染時還呼叫
            headerImage.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }
    });
    //新增頭佈局，需要在setAdapter 前新增
    plv.addHeaderView(headerView);
    plv.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, Cheeses.NAMES));
}

第7-18 行view 樹狀結構渲染完畢時，再將頭佈局中ImageView 設定到ParallaxListView 中，這樣在
ParallaxListView 的setParallaxImage()方法中才能獲取到ImageView 的寬高
獲取頭部ImageView 的高度

private int orignalHeight;
private int drawableHeight;

public void setParallaxImage(ImageView imageView){
    headerImage = imageView;
    //ImageView 初始高度
    orignalHeight = imageView.getHeight();
    //圖片原始高度
    drawableHeight = imageView.getDrawable().getIntrinsicHeight();
}

頂部下拉時動態設定頭部ImageView 的高度

/**
 * 滑動到ListView 兩端才會呼叫
 */
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
                               int scrollY, int scrollRangeX, int scrollRangeY,
                               int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
    //deltaY 豎直方向滑動的瞬時變化量，頂部下拉為-，底部上拉為+
    //scrollY 兩端滑動超出的距離，頂部為-，底部為+
    //scrollRangeY 豎立方向滑動的範圍
    //maxOverScrollY 豎立方向最大的滑動位置
    //isTouchEvent 是否是使用者觸控拉動，true 表示使用者手指觸控拉動，false 表示慣性
    System.out.println("deltaY：" + deltaY + " scrollY:" + scrollY
            + " scrollRangeY:" + scrollRangeY + " maxOverScrollY:"
            + maxOverScrollY + " isTouchEvent:" + isTouchEvent);
    //頂部下拉，使用者觸控時，將deltaY 累加給Header
    if(deltaY < 0 && isTouchEvent){
        int newHeight = headerImage.getHeight()+Math.abs(deltaY);
        //新高度小於圖片原始高度才允許累加變化量
        if(newHeight <= drawableHeight){
            //讓新的值生效
            headerImage.getLayoutParams().height = newHeight;
            headerImage.requestLayout();
        }
    }
    return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
            scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}

第16-24 行動態設定頭部ImageView 的高度

回彈動畫

ParallaxListView 重寫onTouchEvent()方法

@Override
public boolean onTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
        case MotionEvent.ACTION_UP:
            //鬆手時，把currentHeight 恢復到orignalHeight
            int currentHeight = headerImage.getHeight();
            //300->160 300,299,280,250,200,...160 隨時間生成300 到160 間的值
            ValueAnimator animator = ValueAnimator.ofInt(currentHeight,orignalHeight);
            animator.setDuration(500);
            //動畫更新的監聽
            animator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //獲取隨時間變化得到的currentHeight 到orignalHeight 間的值
                    int value = (Integer) animation.getAnimatedValue();
                    //讓新的值生效
                    headerImage.getLayoutParams().height = value;
                    headerImage.requestLayout();
                }
            });
            //設定插值器實現回彈效果
            animator.setInterpolator(new OvershootInterpolator(2));
            animator.start();
            break;
        default:
            break;
    }
    return super.onTouchEvent(ev);
}

第8-23 行手指擡起時，用屬性動畫實現headerImage 恢復到初始高度