博文出處：快速打造帶有視差效果的ListView，歡迎大家關(guān)注我的博客灿椅，謝謝蝎亚！
在上一篇博文中九孩，我們實現(xiàn)了仿美團(tuán)的下拉刷新。而今天的主題還是與 ListView 有關(guān)发框，這次是來實現(xiàn)具有視差效果的 ListView 躺彬。
那么到底什么是視差效果呢煤墙？一起來看效果圖就知道了：
ListView視差效果圖gif
我們可以看到 ListView 的 HeaderView 會跟隨 ListView 的滑動而變大，HeaderView里的圖片會有縮放效果宪拥。這些可以使用屬性動畫來實現(xiàn)仿野。接下來我們就來動手吧！
首先自定義幾個屬性她君，在之后可以用到：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ZoomListView">
<!-- headerView的高度 -->
<attr name="header_height" format="dimension|reference"></attr>
<!-- headerView的最大高度 -->
<attr name="header_max_height" format="dimension|reference"></attr>
<!-- headerView里面的圖片最大的伸縮量 -->
<attr name="header_max_scale" format="float"></attr>
</declare-styleable>
</resources>
之后創(chuàng)建 ZoomListView 類脚作，繼承自 ListView ：
public class ZoomListView extends ListView {
// 最大的伸縮量
private final float defaultHeaderMaxScale = 1.2f;
// 頭部最大的高度
private float headerMaxHeight;
// 頭部初始高度
private float headerHeight;
// 頭部默認(rèn)初始高度
private float defaultHeaderHeight;
// 頭部默認(rèn)最大的高度
private float defaultHeaderMaxHeight;
private ImageView headerView;
private ViewGroup.LayoutParams layoutParams;
private LinearLayout linearLayout;
// 最大的縮放值
private float headerMaxScale;
public ZoomListView(Context context) {
this(context, null);
}
public ZoomListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ZoomListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
defaultHeaderHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 160, context.getResources().getDisplayMetrics());
defaultHeaderMaxHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 240, context.getResources().getDisplayMetrics());
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ZoomListView);
headerHeight = a.getDimension(R.styleable.ZoomListView_header_height, defaultHeaderHeight);
headerMaxHeight = a.getDimension(R.styleable.ZoomListView_header_max_height, defaultHeaderMaxHeight);
headerMaxScale = a.getFloat(R.styleable.ZoomListView_header_max_scale, defaultHeaderMaxScale);
a.recycle();
initView();
}
...
}
到這里都是按部就班式的，設(shè)置好自定義屬性的初始值缔刹，之后調(diào)用 initView() 球涛，那就來看看 initView() 方法：
private void initView() {
headerView = new ImageView(getContext());
headerView.setScaleType(ImageView.ScaleType.CENTER_CROP);
linearLayout = new LinearLayout(getContext());
linearLayout.addView(headerView);
layoutParams = headerView.getLayoutParams();
if (layoutParams == null) {
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) headerHeight);
} else {
layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
layoutParams.height = (int) headerHeight;
}
headerView.setLayoutParams(layoutParams);
addHeaderView(linearLayout);
}
public void setDrawableId(int id) {
headerView.setImageResource(id);
}
可以看出在 initView() 里我們創(chuàng)建了 headerView ，并添加到了ListView的頭部校镐。而 setDrawableId(int id) 就是給 headerView 設(shè)置相關(guān)圖片的亿扁。
下面就是視差效果的主要實現(xiàn)代碼了：
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
if (deltaY < 0 && isTouchEvent) {
if (headerView.getHeight() < headerMaxHeight) {
int newHeight = headerView.getHeight()
+ Math.abs(deltaY / 3);
headerView.getLayoutParams().height = newHeight;
headerView.requestLayout();
float temp = 1 + (headerMaxScale - 1f) * (headerView.getHeight() - headerHeight) / (headerMaxHeight - headerHeight);
headerView.animate().scaleX(temp)
.scaleY(temp).setDuration(0).start();
}
}
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}
我們重寫了 overScrollBy() 方法，當(dāng) deltaY 小于0時(即 ListView 已經(jīng)到頂端鸟廓，但是用戶手勢還是向下拉)从祝，去動態(tài)地設(shè)置 headerView 的高度以及 headerView 的 scale 值。這樣就可以產(chǎn)生 headerView 變高以及圖片放大的效果了引谜。
接下來要考慮的問題就是當(dāng)用戶松開手指時牍陌，要恢復(fù)回原來的樣子。所以我們應(yīng)該在 onTouchEvent(MotionEvent ev) 里去實現(xiàn)相關(guān)操作：
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
startAnim();
break;
}
return super.onTouchEvent(ev);
}
// 開始執(zhí)行動畫
private void startAnim() {
ValueAnimator animator = ValueAnimator.ofFloat(headerView.getHeight(), headerHeight);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = (float) animation.getAnimatedValue();
headerView.getLayoutParams().height = (int) fraction;
headerView.requestLayout();
}
});
animator.setDuration(500);
animator.setInterpolator(new LinearInterpolator());
ValueAnimator animator2 = ValueAnimator.ofFloat(headerView.getScaleX(), 1f);
animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = (float) animation.getAnimatedValue();
headerView.setScaleX(fraction);
headerView.setScaleY(fraction);
}
});
animator2.setDuration(500);
animator2.setInterpolator(new LinearInterpolator());
animator.start();
animator2.start();
}
上面的代碼簡單點來說员咽，就是在 ACTION_UP 時毒涧，去開始兩個屬性動畫，一個屬性動畫是將 headerView 的高度恢復(fù)成原來的值贝室，另一個屬性動畫就是把 headerView 的 scale 重新恢復(fù)為1f链嘀。相信大家都可以看懂的。
ZoomListView 整體的代碼就這些了档玻，很簡短。下面附上下載的鏈接：
good luck ! ~~
