android 自定義ScrollView實現背景圖片伸縮的實現程式碼及思路

yangxi_001發表於2013-12-11
AndroidView

首先還是按照慣例給大家看下示例.

     

用過多米音樂的都會知道， 這個UI可以上下滑動，作用嘛---無聊中可以劃劃解解悶，這被錘子公司老羅稱呼為“情懷”，其實叫“情趣”更合適。嘿嘿.如今移動網際網路發展這麼迅速，市場上已不再是那初期隨便敲個APP放上架就能擁有幾十萬使用者的階段了.最近蘋果公司，為了怕android下載量趕超蘋果商店，大勢聲稱：(第 500 億個下載應用的使用者就可以獲得 10,000 美元的 iTunes 禮品卡，除此之外，緊隨第 500 億之後的前 50 名使用者也可以獲得 500 美元的禮品卡.至於移動發展趨勢，我想搞移動IT的人心裡都比較清楚，扯遠了).其實應用UI特效是應用中很大的一部分，如果同樣功能的兩款軟體，一個功能好點如“網易新聞”,另外一個稍微差點如“新浪新聞”,使用者的你毫無疑問肯定會選擇網易客戶端.總結就是“操作性”對於產品起著至關重要的因素.

接下來我們看下如何實現，首先宣告，這個實現的方式不是很好，我這裡只是提出一個解決方案，大家可以根據自己的想法進行創新.

原理：RelativeLayout+自定義ScrollView.

我們大致看下佈局結構如圖：

             

其實也沒什麼技術含量，我簡單介紹下：紅色代表的是背景照片，綠色的代表自定義ScrollView,粉色是代表你要編輯的透明區域.也不過多解釋，想必大家都明白，我們還是來看程式碼吧。

由於屬於情懷特效（沒有具體的回撥事件要求），那麼就沒有必要自定義監聽,回撥處理，我直接把要處理的UI注入到自定義控制元件中，這樣她方便我也方便.

在此說明一下，前面部分實現中有誤，但是也希望您仔細品讀，相信您一定可以學到一些知識的。


首先我們將背景圖片和頂部線條注入到該控制元件中。接著我們看onTouchEvent事件，因為至始至終都是她在起作用.

[java] view plaincopy
  1. /*** 
  2.      * 觸控事件 
  3.      *  
  4.      * @param ev 
  5.      */  
  6.     public void commOnTouchEvent(MotionEvent ev) {  
  7.         int action = ev.getAction();  
  8.         switch (action) {  
  9.         case MotionEvent.ACTION_DOWN:  
  10.             initTouchY = ev.getY();  
  11.   
  12.             current_Top = initTop = imageView.getTop();  
  13.             current_Bottom = initBottom = imageView.getBottom();  
  14.             lineUp_current_Top = line_up_top = line_up.getTop();  
  15.             lineUp_current_Bottom = line_up_bottom = line_up.getBottom();  
  16.             break;  
  17.         case MotionEvent.ACTION_UP:  
  18.             /** 回縮動畫 **/  
  19.             if (isNeedAnimation()) {  
  20.                 animation();  
  21.             }  
  22.   
  23.             isMoveing = false;  
  24.             touchY = 0;// 手指鬆開要歸0.  
  25.   
  26.             break;  
  27.   
  28.         /*** 
  29.          * 排除出第一次移動計算，因為第一次無法得知deltaY的高度， 然而我們也要進行初始化，就是第一次移動的時候讓滑動距離歸0. 
  30.          * 之後記錄準確了就正常執行. 
  31.          */  
  32.         case MotionEvent.ACTION_MOVE:  
  33.   
  34.             Log.e(TAG, "isMoveing=" + isMoveing);  
  35.   
  36.             touchY = ev.getY();  
  37.   
  38.             float deltaY = touchY - initTouchY;// 滑動距離  
  39.   
  40.             Log.e(TAG, "deltaY=" + deltaY);  
  41.   
  42.             /** 過濾: **/  
  43.             if (deltaY < 0 && inner.getTop() <= 0) {  
  44.                 return;  
  45.             }  
  46.   
  47.             // 當滾動到最上或者最下時就不會再滾動，這時移動佈局  
  48.             isNeedMove();  
  49.   
  50.             if (isMoveing) {  
  51.                 // 初始化頭部矩形  
  52.                 if (normal.isEmpty()) {  
  53.                     // 儲存正常的佈局位置  
  54.                     normal.set(inner.getLeft(), inner.getTop(),  
  55.                             inner.getRight(), inner.getBottom());  
  56.                 }  
  57.                 // 移動佈局(手勢移動的1/3)  
  58.                 float inner_move_H = deltaY / 5;  
  59.                 inner.layout(normal.left, (int) (normal.top + inner_move_H),  
  60.                         normal.right, (int) (normal.bottom + inner_move_H));  
  61.   
  62.                 /** image_bg **/  
  63.                 float image_move_H = deltaY / 10;  
  64.                 current_Top = (int) (initTop + image_move_H);  
  65.                 current_Bottom = (int) (initBottom + image_move_H);  
  66.                 imageView.layout(imageView.getLeft(), current_Top,  
  67.                         imageView.getRight(), current_Bottom);  
  68.   
  69.                 /** line_up **/  
  70.                 float line_up_H = inner_move_H;  
  71.                 lineUp_current_Top = (int) (line_up_top + inner_move_H);  
  72.                 lineUp_current_Bottom = (int) (line_up_bottom + inner_move_H);  
  73.                 line_up.layout(line_up.getLeft(), lineUp_current_Top,  
  74.                         line_up.getRight(), lineUp_current_Bottom);  
  75.             }  
  76.             break;  
  77.   
  78.         default:  
  79.             break;  
  80.   
  81.         }  
  82.     }  
簡單說明：

 MotionEvent.ACTION_DOWN：觸控摁下獲取相應的座標.

MotionEvent.ACTION_MOVE:

裡面有個方法isNeedMove。作用：我們滑動的是ScrollView自身呢,還是我們自己模擬的那種滑動.

[java] view plaincopy
  1. /*** 
  2.      * 是否需要移動佈局 inner.getMeasuredHeight():獲取的是控制元件的總高度 
  3.      *  
  4.      * getHeight()：獲取的是螢幕的高度 
  5.      *  
  6.      * @return 
  7.      */  
  8.     public void isNeedMove() {  
  9.         int offset = inner.getMeasuredHeight() - getHeight();  
  10.         int scrollY = getScrollY();  
  11.         // 如果ScrollView的子View們沒有超過一螢幕則scrollY == 0,直接返回true，  
  12.         //如果ScrollView的子View們超過了一螢幕則 getScrollY()==offset說明滑到了ScrollView的低端.這時候才返回true.  
  13.         if (scrollY == 0 || scrollY == offset) {  
  14.             isMoveing = true;  
  15.         }  
  16.     }  
這裡面用到最多的就是：view.layout(l, t, r, b);作用很簡單不解釋。詳情請參看原始碼.

 MotionEvent.ACTION_UP:就是做些善後操作，主要看animation方法.

[java] view plaincopy
  1. /*** 
  2.      * 回縮動畫 
  3.      */  
  4.     public void animation() {  
  5.   
  6.         TranslateAnimation image_Anim = new TranslateAnimation(0, 0,  
  7.                 Math.abs(initTop - current_Top), 0);  
  8.         image_Anim.setDuration(200);  
  9.         imageView.startAnimation(image_Anim);  
  10.   
  11.         imageView.layout(imageView.getLeft(), (int) initTop,  
  12.                 imageView.getRight(), (int) initBottom);  
  13.   
  14.         // 開啟移動動畫  
  15.         TranslateAnimation inner_Anim = new TranslateAnimation(0, 0,  
  16.                 inner.getTop(), normal.top);  
  17.         inner_Anim.setDuration(200);  
  18.         inner.startAnimation(inner_Anim);  
  19.         inner.layout(normal.left, normal.top, normal.right, normal.bottom);  
  20.   
  21.         /** line_up **/  
  22.         TranslateAnimation line_up_Anim = new TranslateAnimation(0, 0,  
  23.                 Math.abs(line_up_top - lineUp_current_Top), 0);  
  24.         line_up_Anim.setDuration(200);  
  25.         line_up.startAnimation(line_up_Anim);  
  26.         line_up.layout(line_up.getLeft(), line_up_top, line_up.getRight(),  
  27.                 line_up_bottom);  
  28.   
  29.         normal.setEmpty();  
  30.   
  31.         /** 動畫執行 **/  
  32.         if (current_Top > initTop + 50 && turnListener != null)  
  33.             turnListener.onTurn();  
  34.   
  35.     }  
這裡我要簡單說明一下，因為我在這裡栽了有些時間.

比如：我們的背景圖片原先座標為：（0，-190，800，300）,隨著手勢移動到（0，-100，800,390）移動了90畫素，那麼我們的TranslateAnimation應該如何寫呢？我之前總認為不就是末尾座標指向初始座標不就完了，結果你會發現，動畫根本不起作用而是一閃而過。原因呢，動畫引數不可以為負數.或許因為動畫是以（0,0）為參照物吧.因此要把動畫寫成TranslateAnimation line_up_Anim = new TranslateAnimation(0, 0,Math.abs(-190- （-100）), 0);這樣我們所需要的動畫效果就實現了.

但是新的問題又出現了:

當你下拉到一定狀態後然後慢慢向上移動，會發現移動的很快（沒有回縮的反應）,而移動到最頂部的時候突然又出現反彈效果。這個效果固然不是我們所需要的那種。我們所需要的效果是：下拉到一定程度，然後反過來上拉的時候要慢慢的移動回到原點（中心位置）停止。如果是上拉的話，不要出現反彈效果，如果是下拉鬆開的話，出現反彈效果。

描述的有點亂，如果想知道具體效果的話，我建議你使用下papa，其實國內這些比較優秀的應用UI都是抄襲國外的，如果你用facebook的話，就會發現，怎麼啪啪的個人頁面長的也忒像facebook了。請看下圖：

       

嘿嘿，不好意思，跑題了，針對上面出現的問題，我簡單說明一下.

首先，比如我們手勢下拉了50畫素，其實是使得自定義ScrollView的孩子也就是LinearLayout這個控制元件的top為50,而這個時候的getScrollY()的值仍為0,但是如果此時你停止下拉反而向上拉取的話，那麼此時的getScrollY()會從0開始逐漸增大,當我們移動到頂部也就是將ScrollView移動到最底部，此時的isMoveing為true，所以你繼續上拉的話會出現反彈效果。

這個問題要如何解決呢，其實也不難，但是我糾結了好長時間，也走了好多彎路。在這裡說明一下我的瞎跑路段以及疑問：當時我就想，getScrollY()這麼不聽話，我何必非要對ScrollView的孩子進行操作呢，為何直接不對本控制元件執行layout(l,t,r,b)呢，後來就照著這個邏輯進行update，終於更改了差不多了，糾結了問題再次出現，在你下拉的時候對ScrollView本身執行layout(l,t,r,b)這個方法可以實現反彈效果，但是此時你確無法進行滑動了，就是ScrollView本身的滑動無緣無故的被禁止掉了.我懷疑是layout的時候引數弄錯了。，後來仔細修改了下發現還是不可以滑動，然後google了半天也杳無音訊，最後固然放棄，又回到了原點。接著琢磨。。。算是功夫不負有心人吧，最終想到了解決方案，希望對您有幫助。

還拿上面說到的那短話，比如我們手勢下拉了50畫素，那麼此時touch的距離也就是50畫素，如果此時我們反向上拉的話，同樣是需要50畫素回到最初的位置。說到這裡我想大家都明白了。（首先我們要將操作分開，分為UP，DOWN，如果是DOWN的話，那麼在下拉後執行上拉的時候我們禁用掉自定義控制元件的滑動，而是通過手勢執行layout執行這50畫素.）

下面我們看部分程式碼:

[java] view plaincopy
  1. /**對於首次Touch操作要判斷方位：UP OR DOWN**/  
  2.             if (deltaY < 0 && state == state.NOMAL) {  
  3.                 state = State.UP;  
  4.             } else if (deltaY > 0 && state == state.NOMAL) {  
  5.                 state = State.DOWN;  
  6.             }  
  7.   
  8.   
  9.             if (state == State.UP) {  
  10.                 deltaY = deltaY < 0 ? deltaY : 0;  
  11.                 isMoveing = false;  
  12.                 shutTouch = false;  
  13.             } else if (state == state.DOWN) {  
  14.                 if (getScrollY() <= deltaY) {  
  15.                     shutTouch = true;  
  16.                     isMoveing = true;  
  17.                 }  
  18.                 deltaY = deltaY < 0 ? 0 : deltaY;  
  19.             }  

程式碼很簡單，不過多解釋了，不明白的話，仔細看下原始碼肯定就明白了。


touch 事件處理：

[java] view plaincopy
  1. /** touch 事件處理 **/  
  2.     @Override  
  3.     public boolean onTouchEvent(MotionEvent ev) {  
  4.         if (inner != null) {  
  5.             commOnTouchEvent(ev);  
  6.         }  
  7.         // ture：禁止控制元件本身的滑動.  
  8.         if (shutTouch)  
  9.             return true;  
  10.         else  
  11.             return super.onTouchEvent(ev);  
  12.   
  13.     }  

說明：如果返回值為true,作用：禁止ScrollView的滑動，此時的Touch事件還存哦！！！如果對Touch事件比較熟悉的同學，相信覺得我有點廢話了，哈哈，我也是個小菜鳥，也卡在這裡過。


最後呢,還有個小BUG，也就是那個頂部拉線，如果你讓ScrollView慣性滑動的話，那麼你會發現，頂部線條沒有跟隨移動，其實就是因為慣性滑動的時候我們是獲取不到getScrollY()的值得造成的，查了半天也沒有找到相關資料，這個問題就暫時就留在這裡，有時間了在續。


這裡我將原始碼貼出來:

[java] view plaincopy
  1. package com.example.scrollviewdemo;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Rect;  
  5. import android.util.AttributeSet;  
  6. import android.util.Log;  
  7. import android.view.MotionEvent;  
  8. import android.view.View;  
  9. import android.view.animation.TranslateAnimation;  
  10. import android.widget.ImageView;  
  11. import android.widget.ScrollView;  
  12.   
  13. /** 
  14.  * 自定義ScrollView 
  15.  *  
  16.  * @author jia 
  17.  *  
  18.  */  
  19. public class PersonalScrollView extends ScrollView {  
  20.   
  21.     private final String TAG = PersonalScrollView.class.getSimpleName();  
  22.   
  23.     private View inner;// 孩子View  
  24.   
  25.     private float touchY;// 點選時Y座標  
  26.   
  27.     private float deltaY;// Y軸滑動的距離  
  28.   
  29.     private float initTouchY;// 首次點選的Y座標  
  30.   
  31.     private boolean shutTouch = false;// 是否關閉ScrollView的滑動.  
  32.   
  33.     private Rect normal = new Rect();// 矩形(這裡只是個形式，只是用於判斷是否需要動畫.)  
  34.   
  35.     private boolean isMoveing = false;// 是否開始移動.  
  36.   
  37.     private ImageView imageView;// 背景圖控制元件.  
  38.     private View line_up;// 上線  
  39.     private int line_up_top;// 上線的top  
  40.     private int line_up_bottom;// 上線的bottom  
  41.   
  42.     private int initTop, initBottom;// 初始高度  
  43.   
  44.     private int current_Top, current_Bottom;// 拖動時時高度。  
  45.   
  46.     private int lineUp_current_Top, lineUp_current_Bottom;// 上線  
  47.   
  48.     private onTurnListener turnListener;  
  49.   
  50.     private ImageView imageHeader;  
  51.   
  52.     public void setImageHeader(ImageView imageHeader) {  
  53.         this.imageHeader = imageHeader;  
  54.     }  
  55.   
  56.     // 狀態：上部，下部，預設  
  57.     private enum State {  
  58.         UP, DOWN, NOMAL  
  59.     };  
  60.   
  61.     // 預設狀態  
  62.     private State state = State.NOMAL;  
  63.   
  64.     public void setTurnListener(onTurnListener turnListener) {  
  65.         this.turnListener = turnListener;  
  66.     }  
  67.   
  68.     public void setLine_up(View line_up) {  
  69.         this.line_up = line_up;  
  70.     }  
  71.   
  72.     // 注入背景圖  
  73.     public void setImageView(ImageView imageView) {  
  74.         this.imageView = imageView;  
  75.     }  
  76.   
  77.     /*** 
  78.      * 構造方法 
  79.      *  
  80.      * @param context 
  81.      * @param attrs 
  82.      */  
  83.     public PersonalScrollView(Context context, AttributeSet attrs) {  
  84.         super(context, attrs);  
  85.     }  
  86.   
  87.     /*** 
  88.      * 根據 XML 生成檢視工作完成.該函式在生成檢視的最後呼叫，在所有子檢視新增完之後. 即使子類覆蓋了 onFinishInflate 
  89.      * 方法，也應該呼叫父類的方法，使該方法得以執行. 
  90.      */  
  91.     @Override  
  92.     protected void onFinishInflate() {  
  93.         if (getChildCount() > 0) {  
  94.             inner = getChildAt(0);  
  95.         }  
  96.     }  
  97.   
  98.     /** touch 事件處理 **/  
  99.     @Override  
  100.     public boolean onTouchEvent(MotionEvent ev) {  
  101.         if (inner != null) {  
  102.             commOnTouchEvent(ev);  
  103.         }  
  104.         // ture：禁止控制元件本身的滑動.  
  105.         if (shutTouch)  
  106.             return true;  
  107.         else  
  108.             return super.onTouchEvent(ev);  
  109.   
  110.     }  
  111.   
  112.     /*** 
  113.      * 觸控事件 
  114.      *  
  115.      * @param ev 
  116.      */  
  117.     public void commOnTouchEvent(MotionEvent ev) {  
  118.         int action = ev.getAction();  
  119.         switch (action) {  
  120.         case MotionEvent.ACTION_DOWN:  
  121.             initTouchY = ev.getY();  
  122.             current_Top = initTop = imageView.getTop();  
  123.             current_Bottom = initBottom = imageView.getBottom();  
  124.             if (line_up_top == 0) {  
  125.                 lineUp_current_Top = line_up_top = line_up.getTop();  
  126.                 lineUp_current_Bottom = line_up_bottom = line_up.getBottom();  
  127.             }  
  128.             break;  
  129.         case MotionEvent.ACTION_UP:  
  130.             /** 回縮動畫 **/  
  131.             if (isNeedAnimation()) {  
  132.                 animation();  
  133.             }  
  134.   
  135.             if (getScrollY() == 0) {  
  136.                 state = State.NOMAL;  
  137.             }  
  138.   
  139.             isMoveing = false;  
  140.             touchY = 0;  
  141.             shutTouch = false;  
  142.             break;  
  143.   
  144.         /*** 
  145.          * 排除出第一次移動計算，因為第一次無法得知deltaY的高度， 然而我們也要進行初始化，就是第一次移動的時候讓滑動距離歸0. 
  146.          * 之後記錄準確了就正常執行. 
  147.          */  
  148.         case MotionEvent.ACTION_MOVE:  
  149.   
  150.             touchY = ev.getY();  
  151.             deltaY = touchY - initTouchY;// 滑動距離  
  152.   
  153.             /** 對於首次Touch操作要判斷方位：UP OR DOWN **/  
  154.             if (deltaY < 0 && state == state.NOMAL) {  
  155.                 state = State.UP;  
  156.             } else if (deltaY > 0 && state == state.NOMAL) {  
  157.                 state = State.DOWN;  
  158.             }  
  159.   
  160.             if (state == State.UP) {  
  161.                 deltaY = deltaY < 0 ? deltaY : 0;  
  162.                 isMoveing = false;  
  163.                 shutTouch = false;  
  164.   
  165.                 /** line_up **/  
  166.                 lineUp_current_Top = (int) (line_up_top - getScrollY());  
  167.                 lineUp_current_Bottom = (int) (line_up_bottom - getScrollY());  
  168.   
  169.                 Log.e(TAG, "top=" + getScrollY());  
  170.   
  171.                 line_up.layout(line_up.getLeft(), lineUp_current_Top,  
  172.                         line_up.getRight(), lineUp_current_Bottom);  
  173.   
  174.             } else if (state == state.DOWN) {  
  175.                 if (getScrollY() <= deltaY) {  
  176.                     shutTouch = true;  
  177.                     isMoveing = true;  
  178.                 }  
  179.                 deltaY = deltaY < 0 ? 0 : deltaY;  
  180.             }  
  181.   
  182.             if (isMoveing) {  
  183.                 // 初始化頭部矩形  
  184.                 if (normal.isEmpty()) {  
  185.                     // 儲存正常的佈局位置  
  186.                     normal.set(inner.getLeft(), inner.getTop(),  
  187.                             inner.getRight(), inner.getBottom());  
  188.                 }  
  189.                 // 移動佈局(手勢移動的1/3)  
  190.                 float inner_move_H = deltaY / 5;  
  191.   
  192.                 inner.layout(normal.left, (int) (normal.top + inner_move_H),  
  193.                         normal.right, (int) (normal.bottom + inner_move_H));  
  194.   
  195.                 /** image_bg **/  
  196.                 float image_move_H = deltaY / 10;  
  197.                 current_Top = (int) (initTop + image_move_H);  
  198.                 current_Bottom = (int) (initBottom + image_move_H);  
  199.                 imageView.layout(imageView.getLeft(), current_Top,  
  200.                         imageView.getRight(), current_Bottom);  
  201.   
  202.                 /** line_up **/  
  203.                 lineUp_current_Top = (int) (line_up_top + inner_move_H);  
  204.                 lineUp_current_Bottom = (int) (line_up_bottom + inner_move_H);  
  205.                 line_up.layout(line_up.getLeft(), lineUp_current_Top,  
  206.                         line_up.getRight(), lineUp_current_Bottom);  
  207.             }  
  208.             break;  
  209.   
  210.         default:  
  211.             break;  
  212.   
  213.         }  
  214.     }  
  215.   
  216.     /*** 
  217.      * 回縮動畫 
  218.      */  
  219.     public void animation() {  
  220.   
  221.         TranslateAnimation image_Anim = new TranslateAnimation(0, 0,  
  222.                 Math.abs(initTop - current_Top), 0);  
  223.         image_Anim.setDuration(200);  
  224.         imageView.startAnimation(image_Anim);  
  225.   
  226.         imageView.layout(imageView.getLeft(), (int) initTop,  
  227.                 imageView.getRight(), (int) initBottom);  
  228.   
  229.         // 開啟移動動畫  
  230.         TranslateAnimation inner_Anim = new TranslateAnimation(0, 0,  
  231.                 inner.getTop(), normal.top);  
  232.         inner_Anim.setDuration(200);  
  233.         inner.startAnimation(inner_Anim);  
  234.         inner.layout(normal.left, normal.top, normal.right, normal.bottom);  
  235.   
  236.         /** line_up **/  
  237.         TranslateAnimation line_up_Anim = new TranslateAnimation(0, 0,  
  238.                 Math.abs(line_up_top - lineUp_current_Top), 0);  
  239.         line_up_Anim.setDuration(200);  
  240.         line_up.startAnimation(line_up_Anim);  
  241.         line_up.layout(line_up.getLeft(), line_up_top, line_up.getRight(),  
  242.                 line_up_bottom);  
  243.   
  244.         normal.setEmpty();  
  245.   
  246.         /** 動畫執行 **/  
  247.         if (current_Top > initTop + 50 && turnListener != null)  
  248.             turnListener.onTurn();  
  249.   
  250.     }  
  251.   
  252.     /** 是否需要開啟動畫 **/  
  253.     public boolean isNeedAnimation() {  
  254.         return !normal.isEmpty();  
  255.     }  
  256.   
  257.     /*** 
  258.      * 執行翻轉 
  259.      *  
  260.      * @author jia 
  261.      *  
  262.      */  
  263.     public interface onTurnListener {  
  264.   
  265.         /** 必須達到一定程度才執行 **/  
  266.         void onTurn();  
  267.     }  
  268.   
  269. }  


效果圖：

                   

介面有點醜陋，不過UI可以自己根據需求進行調整.


最後我在多侃一點，這裡我用的是TableLayout佈局，不是ListView，因為ListView和ScrollView本身就有衝突，雖說有解決方案，但是我還是喜歡用TableLayout。程式碼裡面模擬了3D旋轉效果，這裡就不解釋了，網上相關文章也有好多。就說到這裡，將原始碼供出,如果有問題請留言。


原始碼下載

相關文章