一招教你打造一個滑動置頂的視覺特效

codeGoogle發表於2017-10-31

一個滑動懸浮置頂的View,通過自定義ScrollView來實現一個精美的固定懸浮效果

效果圖:

效果圖
效果圖

這個特效其實沒有那麼複雜!

思路:

  • 自定義ListView對頭佈局進行處理
  • 自定義 RecycleView 貌似很複雜的樣子
  • 自定義Behavior 把問題複雜化了
  • 自定義listView + PopuWindows
  • 自定義ViewGroup ,(需要重新onLayout登方法)
  • 自定義Scrollview,對View進行處理

思來考去,其實我們寫View的時候以少量的程式碼打造輪子才是精髓。於是對scrollView進行處理。明顯的簡單方面!!!

未完全置頂的時候
未完全置頂的時候

通過廣告欄的高度H和view中Y方向鎖滑動的距離Y進行比較,從而對view進行處理

完全置頂的時候
完全置頂的時候

初始靜態值
初始靜態值

關鍵程式碼:

重寫onTouchEvent獲取滑動的距離

/**
 * 重寫onTouchEvent, 當使用者的手在HoveringScrollview上面的時候,
 */
public boolean onTouchEvent(MotionEvent ev) {
        //直接將HoveringScrollview滑動的Y方向距離回撥給onScroll方法中
        if (onScrollListener != null) {
            onScrollListener.onMyScroll(lastScrollY = this.getScrollY());
        }
        switch (ev.getAction()) {
            //當使用者抬起手的時候,  HoveringScrollview可能還在滑動,
            // 所以當使用者抬起手我們隔6毫秒給handler傳送訊息,
            // 在handler處理 HoveringScrollview滑動的距離
        case MotionEvent.ACTION_UP:
            handler.sendMessageDelayed(handler.obtainMessage(), 20);
            break;
        }
        return super.onTouchEvent(ev);
};
`複製程式碼

需要在Handler裡面進行

 /**
* 用於使用者手指離開MyScrollView的時候獲取MyScrollView滾動的Y距離,然後回撥給onScroll方法中
*/
private Handler handler = new Handler() {

    public void handleMessage(android.os.Message msg) {
        int scrollY = HoveringScrollview.this.getScrollY();

        // 此時的距離和記錄下的距離不相等,在隔6毫秒給handler傳送訊息?
        if (lastScrollY != scrollY) {
            lastScrollY = scrollY;
            handler.sendMessageDelayed(handler.obtainMessage(), 6);
        }
        if (onScrollListener != null) {
            onScrollListener.onMyScroll(scrollY);
        }
    };
};複製程式碼

重要的在監聽回撥裡面做一些操作:


    @Override
    public void onMyScroll(int scrollY) {
        LogUtils.e("yuyahao","scrollY: " +scrollY);
        // TODO Auto-generated method stub
        if (scrollY >= searchLayoutTop) {
            if (hoveringLayout.getParent() != search01) {
                search02.removeView(hoveringLayout);
                search01.addView(hoveringLayout);
            }
        } else {
            if (hoveringLayout.getParent() != search02) {
                search01.removeView(hoveringLayout);
                search02.addView(hoveringLayout);
            }
        }
    }複製程式碼

當廣告欄的高亮 大於手指所華東的高度的時候,所指定固定懸浮的View在他本身父佈局的View中,否則指定一個頂部的父容器新增在裡面即可。

效果圖
效果圖

關於更多

[
高階UI特效仿直播點贊效果—一個優美炫酷的點贊動畫

一個實現錄音和播放的小案例

NDK專案實戰—高仿360手機助手之解除安裝監聽

玩轉自定義柱形圖—教你玩一把牛逼的

玩轉雷達效果—一個炫酷的仿雷達擴散效果竟如此簡單

程式碼並沒有很多,需要的同學可以下載github Demo體驗和學習。

專案Github連結地址

github.com/androidstar…

下載慢?CSDN下載連結:

download.csdn.net/download/an…

技術+職場
技術+職場

相關文章