需求描述

最近專案中有這樣一個需求，頁面有titlebar和scrollowview兩部分，在titlebar的下邊有一個頭像，隨著scrollowview的滑動，頭像要縮放到固定大小然後停留在titlebar上不動了。

問題分析

首先這個需求並不陌生，類似於懸浮按鈕。但是不同的是有縮放。如果將這個圖片放在scrollview中的話，隨著scrollview的滑動，圖片是從titlebar的下邊走了，被titlebar遮蓋了。所以說我們要把圖片放在和titlebae，scrollview平級的位置上。通過對scrollowview的changelistener的監聽來改變圖片的位置和大小。

程式碼實現

投機取巧，通過改變padding的方式來改變view的位置和大小

scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if(top <=0){
                    top = rl_userhead.getPaddingTop
 
();
                    bottom = rl_userhead.getPaddingBottom();
                    right = rl_userhead.getPaddingRight();
                    titleHeight = DensityUtil.dip2px(MainActivity.this,44);
                    small_top = DensityUtil.dip2px(MainActivity.this,9);
                    small_bottom = DensityUtil.dip
 
2px(MainActivity.this,55);
                    small_right = DensityUtil.dip2px(MainActivity.this,21);
                }
                Log.e("輸出y：",String.valueOf(scrollY));
                Log.e("輸出：",String.valueOf(scrollY/44.0));

                if(scrollY<=0){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),top,right,bottom);
                }else if(scrollY>0 && scrollY<titleHeight){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),(int)(top-scrollY/44*35.0),(int)(right+ scrollY/44*21.0),(int)(bottom+ scrollY/44*55.0));
                }else {
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),small_top,small_right,small_bottom);
                }
            }
        });

首先需要分析預設情況下的位置，和最後需要固定的位置
下面的程式碼就是計算出預設情況下的padding和最後固定位置的padding

if(top <=0){
    top = rl_userhead.getPaddingTop();
    bottom = rl_userhead.getPaddingBottom();
    right = rl_userhead.getPaddingRight();
    titleHeight = DensityUtil.dip2px(MainActivity.this,44);
    small_top = DensityUtil.dip2px(MainActivity.this,9);
    small_bottom = DensityUtil.dip2px(MainActivity.this,55);
    small_right = DensityUtil.dip2px(MainActivity.this,21);
}

下邊的程式碼是根據滑動的方向和距離來改變padding值

if(scrollY<=0){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),top,right,bottom);
                }else if(scrollY>0 && scrollY<titleHeight){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),(int)(top-scrollY/44*35.0),(int)(right+ scrollY/44*21.0),(int)(bottom+ scrollY/44*55.0));
                }else {
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),small_top,small_right,small_bottom);
                }
            }

ok，到了這裡基本上算是完成了，執行看一下效果，比較滿意。但是還有缺憾，感覺不是很流暢，有點卡頓。打印出來scrollY的值發現跨度比較大，還是int型別的。這樣的話在計算的 過程中肯定要丟精度的。接下來就來優化一下。

優化效果

我們用onTouch來實現

scrollView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if(motionEvent.getAction() == MotionEvent.ACTION_UP){
                    isInTouch = false;
                }
                if(motionEvent.getAction() == MotionEvent.ACTION_DOWN || motionEvent.getAction() == MotionEvent.ACTION_MOVE){
                    isInTouch = true;
                }

                if(top <=0){
                    top = rl_userhead.getPaddingTop();
                    bottom = rl_userhead.getPaddingBottom();
                    right = rl_userhead.getPaddingRight();
                    titleHeight = DensityUtil.dip2px(MainActivity.this,44);
                    small_top = DensityUtil.dip2px(MainActivity.this,9);
                    small_bottom = DensityUtil.dip2px(MainActivity.this,55);
                    small_right = DensityUtil.dip2px(MainActivity.this,21);
                    //XgoLog.e("上下："+top+"..."+bottom);
                }
                //XgoLog.e("上下："+top+"..."+bottom);
                double y = scrollView.getScrollY();
                double s = y/44.0;

                Log.e("輸出y：",String.valueOf(y));
                if(y<=0){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),top,right,bottom);
                }else if(y>0 && y<titleHeight){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),(int)(top-s*35.0),(int)(right+ s*21.0),(int)(bottom+ s*55.0));
                }else {
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),small_top,small_right,small_bottom);
                }

                return false;

            }
        });

程式碼不再解釋了，執行效果非常流暢。但是又出現了另一個問題，快速滑動的時候可能不那麼精確。我們先來想一下，onTouch是觸控的監聽，當快速滑動的時候我們手指離開了螢幕，但是還在滑動，那手指離開了肯定就不會再執行onTouch了，自然圖片也就不會動了。
前邊也說了，雖然ontouch不再執行了，但是scrollow還在滑動呢，所以scrollChangeListener還在執行。我們的優化解決方案就是首先用onTouch來改變，當手指離開後用scrollChangeListener來接手改變view的位置。直接上程式碼

scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

                if(!isInTouch){
                    if(scrollY<=0){
                        rl_userhead.setPadding(rl_userhead.getPaddingLeft(),top,right,bottom);
                    }else if(scrollY>0 && scrollY<titleHeight){
                        rl_userhead.setPadding(rl_userhead.getPaddingLeft(),(int)(top-scrollY/44*35.0),(int)(right+ scrollY/44*21.0),(int)(bottom+ scrollY/44*55.0));
                    }else {
                        rl_userhead.setPadding(rl_userhead.getPaddingLeft(),small_top,small_right,small_bottom);
                    }
                }


            }
        });

        scrollView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if(motionEvent.getAction() == MotionEvent.ACTION_UP){
                    isInTouch = false;
                }
                if(motionEvent.getAction() == MotionEvent.ACTION_DOWN || motionEvent.getAction() == MotionEvent.ACTION_MOVE){
                    isInTouch = true;
                }

                if(top <=0){
                    top = rl_userhead.getPaddingTop();
                    bottom = rl_userhead.getPaddingBottom();
                    right = rl_userhead.getPaddingRight();
                    titleHeight = DensityUtil.dip2px(MainActivity.this,44);
                    small_top = DensityUtil.dip2px(MainActivity.this,9);
                    small_bottom = DensityUtil.dip2px(MainActivity.this,55);
                    small_right = DensityUtil.dip2px(MainActivity.this,21);
                    //XgoLog.e("上下："+top+"..."+bottom);
                }
                //XgoLog.e("上下："+top+"..."+bottom);
                double y = scrollView.getScrollY();
                double s = y/44.0;

                Log.e("輸出y：",String.valueOf(y));
                if(y<=0){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),top,right,bottom);
                }else if(y>0 && y<titleHeight){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),(int)(top-s*35.0),(int)(right+ s*21.0),(int)(bottom+ s*55.0));
                }else {
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),small_top,small_right,small_bottom);
                }

                return false;

            }
        });

兩個配合使用，效果完美。
完工！