個(gè)人認(rèn)為UC瀏覽器的主界面交互邏輯還是挺好的，界面過(guò)度流暢，動(dòng)畫(huà)具有引導(dǎo)性，美觀大方。我們現(xiàn)在嘗試實(shí)現(xiàn)它，先來(lái)一張美圖：

我按照從入門(mén)到跑路的過(guò)程分以下步驟給你們講故事：
靜態(tài)布局搭建 ——》自定義根布局 ——》各個(gè)界面過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn) ——》下拉操作（貝塞爾背景）實(shí)現(xiàn) ——》viewpager + tablayout ——》感悟+后續(xù)工作

下面開(kāi)始表演

靜態(tài)布局搭建

（1）圖片資源

先告訴你個(gè)壞消息，解壓UCBrowser.apk是沒(méi)用噠。唉，一開(kāi)始就奠定了這是個(gè)悲劇。怎么辦呢？百度咯。這里我主要用了兩個(gè)圖標(biāo)源（沒(méi)錢(qián)只能用免費(fèi)的啦）。
第一個(gè)是阿里的圖標(biāo)庫(kù)，網(wǎng)址是：http://iconfont.cn/collections。
第二個(gè)是github上的一個(gè)開(kāi)源項(xiàng)目：https://github.com/google/material-design-icons。
如果你的項(xiàng)目不是太復(fù)雜，這些資源基本上可以滿足需求。找一個(gè)看上去差不多的圖標(biāo)，然后用強(qiáng)大的圖片編輯工具（美圖秀秀）做一些小小的修改，就可以露臉了。

（2）布局層次

整個(gè)主界面被一個(gè)UCRootView包裹，它繼承自RelativeLayout，里面實(shí)現(xiàn)自己的事件傳遞邏輯，并定義滑動(dòng)接口。rootview下有四個(gè)大的子view組件，分別是Head，NewsPager，Searchbar和Bottombar，這些都繼承自BaseLayout（自定義的viewgroup），到目前為止我們的UC瀏覽器布局結(jié)構(gòu)如下（如果看的眼花，別打我哈）：

（3）布局搭建

布局的搭建對(duì)各位同學(xué)來(lái)說(shuō)應(yīng)該是信手拈來(lái)吧，基本上就是玩各種layout，我就來(lái)張圖吧，大家依葫蘆畫(huà)瓢

寫(xiě)到這，我們的基本布局組件就搭建好了。接下來(lái)我就應(yīng)該探討如何讓這些界面動(dòng)起來(lái)。

自定義根布局（UCRootView）

因?yàn)閡c瀏覽器手勢(shì)交互比較多，android原生的layout是滿足不了我們的需求的，一個(gè)字，干?。?！
當(dāng)然這里最重要的還是android的事件分發(fā)機(jī)制，不熟悉的同學(xué)可以看看這篇文章：http://www.itdecent.cn/p/e99b5e8bd67b
首先我們先確定對(duì)外的接口，因?yàn)楹芏嘟缑鏍砍兜轿恢?、大小、透明度等屬性的變化，都有一個(gè)起始值和最終值，我們規(guī)定這個(gè)變化是0——>1的過(guò)程。

    public interface ScrollStateListener{
        void onStartScroll();
        void onScroll(float rate);
        void onEndScroll();
        void onTouch(float x,float y);//手指位置
    }

接口我們用一個(gè)List來(lái)管理，view可以實(shí)現(xiàn)接口，當(dāng)需要監(jiān)聽(tīng)時(shí)，我們的rootview把這些view（接口）加進(jìn)來(lái)，不需要的時(shí)候移除掉就可以了。

    public void attachScrollStateListener(ScrollStateListener listener){
        mListeners.add(listener);
    }
    public void removeScrollStateListener(ScrollStateListener listener){
        mListeners.remove(listener);
    }

當(dāng)我們需要通知各個(gè)View變化時(shí)，遍歷我們的集合，依次調(diào)用即可

    private void onStartScroll(){
        for(ScrollStateListener listener : mListeners){
            listener.onStartScroll();
        }
    }
    private void onScroll(float rate){
        for(ScrollStateListener listener : mListeners){
            listener.onScroll(rate);
        }
    }

緊接著我們需要判斷手指動(dòng)作，以此來(lái)決定rootview是否要攔截此事件。

首先重寫(xiě)onInterceptTouchEvent：

 @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if(getChildCount() < 0){
            Log.e(TAG,"There are no children to scroll");
            return super.onInterceptTouchEvent(ev);
        }
        final int action = ev.getAction();
        switch (action & MotionEvent.ACTION_MASK){
            case MotionEvent.ACTION_DOWN:
                mLastMotionY = ev.getY();
                mLastMotionX = ev.getX();
            case MotionEvent.ACTION_MOVE: {
                determineScrollingStart(ev);
                Log.i(TAG,"onInterceptTouchEvent :: ACTION_MOVE");
                break;
            }
        }
        return mTouchState != TOUCH_STATE_REST;
    }

determineScrollingStart()方法里主要是判斷手指移動(dòng)距離是否超過(guò)我們規(guī)定的值，如果超過(guò)，定性為滑動(dòng)。邏輯如下：

    private boolean determineScrollingStart(MotionEvent ev, float touchSlopScale) {
        //touchSlopScale的值是1.0f。
        boolean scroll = false;
        final float y = ev.getY();
        // final float x = ev.getX();
        float deltaY = y - mLastMotionY;

        final int yDiff = (int) Math.abs(deltaY);

        final int touchSlop = Math.round(touchSlopScale * mTouchSlop);
        boolean yMoved = yDiff > touchSlop;
        Log.i(TAG,"determineScrollingStart :: touchSlop =:" + touchSlop+",xDiff =:" + yDiff);
        if (yMoved) {
            // 這里的mMode記錄當(dāng)前界面是處于網(wǎng)站導(dǎo)航展示（NORMAL_MODE）狀態(tài)還是處于新聞列表狀態(tài)（NEWS_MODE）
            if(mMode == NEWS_MODE){
                return false;
            }
            mTouchState = TOUCH_STATE_SCROLLING;
            onStartScroll();//通知view滑動(dòng)開(kāi)始
            scroll = true;
        }
        return scroll;
    }

因?yàn)槟壳爸粚?shí)現(xiàn)了豎向的滑動(dòng)處理，所以只判斷了y，后期再把x加上。
rootview是否攔截事件用mTouchState != TOUCH_STATE_REST判斷，目前有兩種狀態(tài)：TOUCH_STATE_REST——正常狀態(tài)，TOUCH_STATE_SCROLLING——滑動(dòng)狀態(tài)。后面如果把橫向加進(jìn)來(lái)可能要做區(qū)分了。

然后重寫(xiě)onTouchEvent

 @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (getChildCount() <= 0) return super.onTouchEvent(ev);
        acquireVelocityTrackerAndAddMovement(ev);
        final int action = ev.getAction();
        float y = ev.getY();
        float x = ev.getX();
        onTouch(x,y);//更新手指位置
        switch (action & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:{
                Log.i(TAG,"onTouchEvent :: ACTION_DOWN");
                break;
            }
            case MotionEvent.ACTION_MOVE:{
                if (mTouchState == TOUCH_STATE_SCROLLING) {
                    float deltaY = y - mLastMotionY;
                    float deltaX = x - mLastMotionX;
                    mTotalMotionY += deltaY;//記錄總滑動(dòng)距離
                    if(Math.abs(deltaY) >= 1.0f) {
                        float rate = mTotalMotionY / mFinalDistance;//計(jì)算滑動(dòng)進(jìn)度，其中mFinalDistance為起始與最終位置的距離。
                        onScroll(rate);//通知view更新
                    }
                } else {
                    determineScrollingStart(ev);
                }
                Log.i(TAG,"onTouchEvent :: ACTION_MOVE mTouchState =:" +mTouchState);
                mLastMotionY = y;
                mLastMotionX = x;
                //attachToFinal()方法判斷是否到達(dá)目的地
     
                return attachToFinal();
            }
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                checkPoint();//手指離開(kāi)屏幕后檢測(cè)是否到達(dá)目的地
                Log.i(TAG,"onTouchEvent :: ACTION_UP");
                break;
        }
        return true;
    }

    private boolean attachToFinal(){
        if(mMode == NEWS_MODE){
            return mTotalMotionY >= 0;
        }
        return -mTotalMotionY >= mFinalDistance;
    }

當(dāng)我們手指離開(kāi)屏幕之后還沒(méi)到達(dá)指定位置怎么辦，這里我采用handle通知view繼續(xù)更新：

    private void init(){
        final ViewConfiguration configuration = ViewConfiguration.get(mContext);
        mTouchSlop = configuration.getScaledTouchSlop();
        mHandler = new Handler(Looper.getMainLooper()){
            @Override
            public void handleMessage(Message msg) {
                if(msg.what == MSG_FLING){
                    //FLING_SPEED = 50
                    int speed = mMode == NORMAL_MODE ? -FLING_SPEED : FLING_SPEED;
                    mTotalMotionY += speed;
                    onScroll(mTotalMotionY / mFinalDistance);//繼續(xù)更新view
                    checkPoint();
                }
                super.handleMessage(msg);
            }
        };
    }

    ///...///

    private void checkPoint() {
        if(mTouchState == TOUCH_STATE_REST){
            return;
        }
        if(!attachToFinal()){
            mHandler.sendEmptyMessage(MSG_FLING);
        } else {
            mHandler.removeMessages(MSG_FLING);
            if(mMode == NORMAL_MODE) {
                mTotalMotionY = -mFinalDistance;
                onScroll(-1.0f);
                mMode = NEWS_MODE;
            } else {
                mTotalMotionY = 0;
                onScroll(0.0f);
                mMode = NORMAL_MODE;
            }
            onEndScroll();
            resetTouchState();//重置觸摸狀態(tài)。
        }
    }

寫(xiě)到這，我們的事件處理邏輯算是差不多了，對(duì)了UC瀏覽器點(diǎn)擊主頁(yè)按鈕要回到網(wǎng)站導(dǎo)航狀態(tài)，怎么實(shí)現(xiàn)呢，很簡(jiǎn)單

    public void back2Normal(){
        mTouchState = TOUCH_STATE_SCROLLING;
        checkPoint();
    }

大功告成，以后就用這個(gè)布局生孩子了。我們來(lái)看一下效果：

上滑.gif

下拉.gif

敵人還有五秒到達(dá)戰(zhàn)場(chǎng)....

轉(zhuǎn)載請(qǐng)注明：[http://www.itdecent.cn/p/22ec577c0bf3)

下一篇：嘗試寫(xiě)個(gè)UC瀏覽器（主頁(yè)交互篇）