這次是列表滑動(dòng)刪除的第三波，仿微信的列表滑動(dòng)刪除。先上個(gè)效果圖： 

 前面的文章里面說(shuō)過(guò)開源框架SwipeListView的實(shí)現(xiàn)原理是每個(gè)列表item中包含上下兩層view，普通狀態(tài)下上層的view覆蓋著下層的view，當(dāng)用戶滑開上層的view，下層的view就顯示出來(lái)了。但是仔細(xì)觀察微信列表的item，很明顯并非這個(gè)實(shí)現(xiàn)方案，微信的item應(yīng)該一個(gè)單層view，只不過(guò)這個(gè)item超出了所在的ListView的寬度，在用戶滑動(dòng)item的時(shí)候，item超出屏幕的view則會(huì)顯示在屏幕之上，這種滑動(dòng)實(shí)現(xiàn)也很不錯(cuò)。

既然推測(cè)出微信的實(shí)現(xiàn)原理，現(xiàn)在就要尋找具體的實(shí)現(xiàn)方案了，我最開始想的比較簡(jiǎn)單，以為寫一個(gè)橫向線性布局LinearLayout，讓其包含兩個(gè)子布局，左邊的子布局寬度設(shè)置為填充父布局的寬度，以為另一個(gè)子布局就自然而然的會(huì)超出父布局的顯示范圍，但是具體測(cè)試的時(shí)候，發(fā)現(xiàn)就算左邊的子布局設(shè)置為填充父布局的寬度，但實(shí)際顯示的時(shí)候還是兩個(gè)子布局被包含在父布局的顯示范圍內(nèi)，右邊的子布局無(wú)法做到超出父布局的顯示范圍。

糾結(jié)了一段時(shí)間，偶然情況下想起了ScrollView還有一種類型是HorizontalScrollView，，這個(gè)android提供的HorizontalScrollView可以做到其子view超出它的顯示范圍，那我可以直接使用HorizontalScrollView來(lái)實(shí)現(xiàn)這個(gè)item，我決定自定義一個(gè)控件，繼承自HorizontalScrollView，在代碼里面直接添加兩個(gè)子布局，并讓左邊的布局寬度填充這個(gè)控件的自身寬度，以便讓右邊的布局超出控件的顯示范圍，不過(guò)很不辛，HorizontalScrollView比較傲嬌，很難駕馭，奇葩bug層出不窮，譬如左邊的子布局渲染出來(lái)了，但是右邊的子布局愣是沒(méi)初始化，更別說(shuō)滑動(dòng)了，弄的焦頭爛額，最后實(shí)在沒(méi)辦法，只得暫時(shí)放下。

最后則是想到了使用一個(gè)自定義的ViewGroup來(lái)實(shí)現(xiàn)這個(gè)item?，F(xiàn)在很多app在第一次啟動(dòng)的時(shí)候，會(huì)出現(xiàn)一個(gè)介紹性的導(dǎo)航界面，用戶一頁(yè)一頁(yè)的滑動(dòng)，看完導(dǎo)航的介紹之后再正式進(jìn)入app，現(xiàn)在這種導(dǎo)航介紹應(yīng)該大多數(shù)是用ViewPager實(shí)現(xiàn)的，ViewPager可以做到兩個(gè)滑動(dòng)的子頁(yè)同時(shí)顯示在屏幕范圍內(nèi)，具有很好的體驗(yàn)效果。但是ViewPager是在之后的support.v4里面引入的，最初并沒(méi)有，那一開始這種導(dǎo)航介紹使用什么方案實(shí)現(xiàn)的呢？當(dāng)然就是自定義的ViewGroup了，其實(shí)supprot.v4.ViewPager本身就是一個(gè)自定義的ViewGroup。關(guān)于使用自定義的ViewGroup實(shí)現(xiàn)導(dǎo)航介紹，csdn上有個(gè)大牛有專門寫過(guò)一個(gè)文章介紹了，這里就不詳細(xì)說(shuō)了。

本篇的要講的是如何使用自定義的ViewGroup實(shí)現(xiàn)item的子view可以超出父布局的顯示范圍這樣的效果。

寫一個(gè)SwipeItemView，繼承自ViewGroup，構(gòu)造方法里面，傳入左邊布局的引用id和右邊布局的引用id，初始化左子布局和右子布局，并將它們添加到SwipeItemView中作為子view，代碼如下：

private void init(Context context, AttributeSet attrs) {
    mScroller = new Scroller(context);

    ......

    if(mPrimaryViewID == -1)
      throw new RuntimeException(
          "Illegal attribute 'primaryView', make sure you have set it");

    mPrimaryView = LayoutInflater.from(getContext()).inflate(
        mPrimaryViewID, null);
    mPrimaryView.setClickable(false);
    addView(mPrimaryView, 0);
    if(mSlidingViewID != -1) {
      mSlidingView = LayoutInflater.from(getContext()).inflate(
          mSlidingViewID, null);
      mSlidingView.setClickable(false);
      addView(mSlidingView, 1);
    }
  }  

接下來(lái)需要重寫VIewGroup的onMeasure()方法，用來(lái)測(cè)量這個(gè)SwipeItemView及其子view的寬高，其中先獲取轉(zhuǎn)入的heightMeasureSpec中包含的heightSize，當(dāng)heightSize的值和heightMeasureSpec相同的時(shí)候，是測(cè)量整個(gè)SwipeItemView的寬高，這是我們不做額外的處理，當(dāng)heightSize不等于的傳入的heightMeasureSpec的時(shí)候，是用于測(cè)量SwipeItemView它包含的子view的寬高，這里我們做一下額外的處理，主要是針對(duì)超出SwipeItemView顯示范圍的右邊的mSlidingView，我想要它的寬只是包裹其內(nèi)容就行，不想它的寬和屏幕范圍等寬，所以構(gòu)造一個(gè)這樣的參數(shù)MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)，具體代碼如下：

@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);

    if(heightSize != heightMeasureSpec) {
      mPrimaryView.measure(MeasureSpec.makeMeasureSpec(widthSize, widthMode),
          MeasureSpec.makeMeasureSpec(heightSize, heightMode));

      if(mSlidingView != null) {
        mSlidingView.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
            MeasureSpec.makeMeasureSpec(heightSize, heightMode));
      }

    } else {
      mPrimaryView.measure(widthMeasureSpec, heightMeasureSpec);
      if(mSlidingView != null)
        mSlidingView.measure(widthMeasureSpec, heightMeasureSpec);
    }
  } 

然后是重寫ViewGroup的onLayout()方法，用來(lái)放置子view在SwipeItemView中的具體位置，主要就是讓右邊的mSlidingView排列在左邊的mPrimaryView的右邊，具體代碼如下：

@Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    mPrimaryView.layout(l, t, r, b);
    if(mSlidingView != null)
      mSlidingView.layout(r, t, r + mSlidingView.getMeasuredWidth(), b);
  }  

 好了，具體的SwipeItemView的初始化完成了，接下來(lái)需要做什么工作呢，看一下上面的構(gòu)造方法，有沒(méi)有看到mScroller = new Scroller(context)這行代碼，我們需要使用這個(gè)mScroller來(lái)做這個(gè)SwipeItemView滑動(dòng)的動(dòng)畫效果。我們知道ViewGroup中提供了scrollBy()和scrollTo()兩個(gè)方法用來(lái)移動(dòng)這個(gè)ViewGroup視圖內(nèi)容的位置，其中scrollBy()移動(dòng)參數(shù)指定的距離，scrollTo()方法移動(dòng)到參數(shù)指定的位置。但是scrollBy()還好，如果每次都是移動(dòng)一小段距離的話，給用戶的感覺(jué)就是一段連續(xù)的動(dòng)畫效果了，但是scrollTo()則是瞬間移動(dòng)，中間沒(méi)有任何動(dòng)畫效果，會(huì)讓人感覺(jué)到非常突兀，這樣我們就需要用到mScroller這個(gè)對(duì)象了。

Scroller是android提供的用來(lái)實(shí)現(xiàn)我們需要的移動(dòng)動(dòng)畫效果的。Scroller本身并非去執(zhí)行移動(dòng)的動(dòng)畫的，感覺(jué)上Scroller更多是作為一個(gè)指揮者，當(dāng)我們調(diào)用它的Scroller.startScroll()方法的時(shí)候，這個(gè)方法我們需要傳入移動(dòng)初始的位置、移動(dòng)的距離以及花費(fèi)的時(shí)間，簡(jiǎn)單理解的話，我們假設(shè)指定的時(shí)間是10s，那第3s的時(shí)候，ViewGroup視圖內(nèi)容應(yīng)該移動(dòng)到什么位置，第7s，應(yīng)該移動(dòng)到哪個(gè)位置，而且這個(gè)時(shí)刻Scroller計(jì)算出來(lái)的位置可以通過(guò)Scroller.getCurrX()和Scroller.getCurrY()獲取到，這個(gè)過(guò)程，Scroller會(huì)回調(diào)ViewGroup中的computeScroll()方法，在這個(gè)回調(diào)方法中，我們調(diào)用scrollTo()執(zhí)行具體的移動(dòng)操作。而我們實(shí)現(xiàn)的這個(gè)scrollToWithAnimation()方法就是提供給后面的SwipeListView用來(lái)移動(dòng)某個(gè)item并且使其移動(dòng)過(guò)程帶有動(dòng)畫效果的方法。代碼如下：

 @Override
  public void computeScroll() {
    if(mScroller.computeScrollOffset()) {
      scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
    }
  }

  /**
   * just like scrollTo(), but with animation :D
   * */
  public void scrollToWithAnimation(int scrollX, int scrollY) {
    mScroller.abortAnimation();
    mScroller.startScroll(getScrollX(), getScrollY(),
        scrollX - getScrollX(), getScrollY() - scrollY, 300);
  }

 接下來(lái)需要實(shí)現(xiàn)一個(gè)自定義的ListView，暫且命名為SwipeListView。下一篇繼續(xù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論