把鑰匙反鎖到家裡了，回不了家了o(╥﹏╥)o，已聯絡了撬鎖公司，今天開工...現在都晚上10點半了（今天在公司湊合吧），有點無聊，喝了兩口農藥後決定擼這篇散（水）文，等待大家口誅筆伐。再哭一次，我回不了家了。
個人認為UC瀏覽器的主介面互動邏輯還是挺好的，介面過度流暢，動畫具有引導性，美觀大方。我們現在嘗試實現它，先來一張美圖：
我按照從入門到跑路的過程分以下步驟給你們講故事： 靜態佈局搭建 ——》自定義根佈局 ——》各個介面過渡動畫實現 ——》下拉操作（貝塞爾背景）實現 ——》viewpager + tablayout ——》感悟+後續工作
下面開始表演
靜態佈局搭建
（1）圖片資源
先告訴你個壞訊息，解壓UCBrowser.apk是沒用噠。唉，一開始就奠定了這是個悲劇。怎麼辦呢？百度咯。這裡我主要用了兩個圖示源（沒錢只能用免費的啦）。
第一個是阿里的圖示庫，網址是：iconfont.cn/collections 。
第二個是github上的一個開源專案：github.com/google/mate…。
如果你的專案不是太複雜，這些資源基本上可以滿足需求。找一個看上去差不多的圖示，然後用強大的圖片編輯工具（美圖秀秀）做一些小小的修改，就可以露臉了。
（2）佈局層次
整個主介面被一個UCRootView包裹，它繼承自RelativeLayout，裡面實現自己的事件傳遞邏輯，並定義滑動介面。rootview下有四個大的子view元件，分別是Head，NewsPager，Searchbar和Bottombar，這些都繼承自BaseLayout（自定義的viewgroup），到目前為止我們的UC瀏覽器佈局結構如下（如果看的眼花，別打我哈）：
（3）佈局搭建
佈局的搭建對各位同學來說應該是信手拈來吧，基本上就是玩各種layout，我就來張圖吧，大家依葫蘆畫瓢
自定義根佈局（UCRootView）
因為uc瀏覽器手勢互動比較多，android原生的layout是滿足不了我們的需求的，一個字，幹！！！ 當然這裡最重要的還是android的事件分發機制，不熟悉的同學可以看看這篇文章：http://www.jianshu.com/p/e99b5e8bd67b 首先我們先確定對外的介面，因為很多介面牽扯到位置、大小、透明度等屬性的變化，都有一個起始值和最終值，我們規定這個變化是0——>1的過程。
public interface ScrollStateListener{
void onStartScroll();
void onScroll(float rate);
void onEndScroll();
void onTouch(float x,float y);//手指位置
}
複製程式碼介面我們用一個List來管理，view可以實現介面，當需要監聽時，我們的rootview把這些view（介面）加進來，不需要的時候移除掉就可以了。
public void attachScrollStateListener(ScrollStateListener listener){
mListeners.add(listener);
}
public void removeScrollStateListener(ScrollStateListener listener){
mListeners.remove(listener);
}
複製程式碼當我們需要通知各個View變化時，遍歷我們的集合，依次呼叫即可
private void onStartScroll(){
for(ScrollStateListener listener : mListeners){
listener.onStartScroll();
}
}
private void onScroll(float rate){
for(ScrollStateListener listener : mListeners){
listener.onScroll(rate);
}
}
複製程式碼緊接著我們需要判斷手指動作，以此來決定rootview是否要攔截此事件。
首先重寫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()方法裡主要是判斷手指移動距離是否超過我們規定的值，如果超過，定性為滑動。邏輯如下：
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記錄當前介面是處於網站導航展示（NORMAL_MODE）狀態還是處於新聞列表狀態（NEWS_MODE）
if(mMode == NEWS_MODE){
return false;
}
mTouchState = TOUCH_STATE_SCROLLING;
onStartScroll();//通知view滑動開始
scroll = true;
}
return scroll;
}
複製程式碼因為目前只實現了豎向的滑動處理，所以只判斷了y，後期再把x加上。 rootview是否攔截事件用mTouchState != TOUCH_STATE_REST判斷，目前有兩種狀態：TOUCH_STATE_REST——正常狀態，TOUCH_STATE_SCROLLING——滑動狀態。後面如果把橫向加進來可能要做區分了。
然後重寫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;//記錄總滑動距離
if(Math.abs(deltaY) >= 1.0f) {
float rate = mTotalMotionY / mFinalDistance;//計算滑動進度，其中mFinalDistance為起始與最終位置的距離。
onScroll(rate);//通知view更新
}
} else {
determineScrollingStart(ev);
}
Log.i(TAG,"onTouchEvent :: ACTION_MOVE mTouchState =:" +mTouchState);
mLastMotionY = y;
mLastMotionX = x;
//attachToFinal()方法判斷是否到達目的地
return attachToFinal();
}
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
checkPoint();//手指離開螢幕後檢測是否到達目的地
Log.i(TAG,"onTouchEvent :: ACTION_UP");
break;
}
return true;
}
private boolean attachToFinal(){
if(mMode == NEWS_MODE){
return mTotalMotionY >= 0;
}
return -mTotalMotionY >= mFinalDistance;
}
複製程式碼當我們手指離開螢幕之後還沒到達指定位置怎麼辦，這裡我採用handle通知view繼續更新：
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);//繼續更新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();//重置觸控狀態。
}
}
複製程式碼寫到這，我們的事件處理邏輯算是差不多了，對了UC瀏覽器點選主頁按鈕要回到網站導航狀態，怎麼實現呢，很簡單
public void back2Normal(){
mTouchState = TOUCH_STATE_SCROLLING;
checkPoint();
}
複製程式碼大功告成，以後就用這個佈局生孩子了。我們來看一下效果：
專案地址：https://github.com/zibuyuqing/UCBrowser
敵人還有五秒到達戰場....
轉載請註明：juejin.im/post/5a2126…
下一篇：嘗試寫個UC瀏覽器（主頁互動篇）