快捷導(dǎo)航

Android實(shí)現(xiàn)有視差效果的ListView

更新時(shí)間：2016年09月30日 09:17:46 投稿：daisy

這篇文章給大家詳解介紹了在Android中如何實(shí)現(xiàn)帶有視差效果的ListView，文章給出了示例代碼相信對(duì)大家的理解和學(xué)習(xí)更有幫助，有需要的朋友們下面來(lái)一起看看吧。

視差效果是什么？

所謂的視差效果在Web設(shè)計(jì)和移動(dòng)應(yīng)用中都非常常見(jiàn)，我們?cè)谝恍┲饕钠脚_(tái)都可以發(fā)現(xiàn)它的身影，從Windows Phone到iOS乃至Android。按照維基百科的說(shuō)法，視差滾動(dòng)是計(jì)算機(jī)圖形學(xué)中的一種特殊的滾動(dòng)技術(shù)，在此相機(jī)移動(dòng)背景圖像比前景圖像慢，從而引起了視覺(jué)深度的假象。

那么到底什么是視差效果呢？一起來(lái)看效果圖就知道了：

我們可以看到 ListView 的 HeaderView 會(huì)跟隨 ListView 的滑動(dòng)而變大，HeaderView里的圖片會(huì)有縮放效果。這些可以使用屬性動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。接下來(lái)我們就來(lái)動(dòng)手吧！

首先自定義幾個(gè)屬性，在之后可以用到：

<?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() ，那就來(lái)看看 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)圖片的。

下面就是視差效果的主要實(shí)現(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);
}

我們重寫(xiě)了 overScrollBy() 方法，當(dāng) deltaY 小于0時(shí)(即 ListView 已經(jīng)到頂端，但是用戶手勢(shì)還是向下拉)，去動(dòng)態(tài)地設(shè)置 headerView 的高度以及 headerView 的 scale 值。這樣就可以產(chǎn)生 headerView 變高以及圖片放大的效果了。

接下來(lái)要考慮的問(wèn)題就是當(dāng)用戶松開(kāi)手指時(shí)，要恢復(fù)回原來(lái)的樣子。所以我們應(yīng)該在 onTouchEvent(MotionEvent ev) 里去實(shí)現(xiàn)相關(guān)操作：

@Override
public boolean onTouchEvent(MotionEvent ev) {
 switch (ev.getAction()) {
  case MotionEvent.ACTION_UP:
    startAnim();
   break;
 }
 return super.onTouchEvent(ev);
}

// 開(kāi)始執(zhí)行動(dòng)畫(huà)
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();
}

上面的代碼簡(jiǎn)單點(diǎn)來(lái)說(shuō)，就是在 ACTION_UP 時(shí)，去開(kāi)始兩個(gè)屬性動(dòng)畫(huà)，一個(gè)屬性動(dòng)畫(huà)是將 headerView 的高度恢復(fù)成原來(lái)的值，另一個(gè)屬性動(dòng)畫(huà)就是把 headerView 的 scale 重新恢復(fù)為1f。相信大家都可以看懂的。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望這篇文章的內(nèi)容對(duì)各位Android開(kāi)發(fā)者們能有所幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: