個人認為UC瀏覽器的主界面交互邏輯還是挺好的，界面過度流暢，動畫具有引導性，美觀大方。我們現(xiàn)在嘗試實現(xiàn)它，先來一張美圖：
我按照從入門到跑路的過程分以下步驟給你們講故事：
靜態(tài)布局搭建 ——》自定義根布局 ——》各個界面過渡動畫實現(xiàn) ——》下拉操作（貝塞爾背景）實現(xiàn) ——》viewpager + tablayout ——》感悟+后續(xù)工作
下面開始表演
靜態(tài)布局搭建
（1）圖片資源
先告訴你個壞消息，解壓UCBrowser.apk是沒用噠。唉，一開始就奠定了這是個悲劇。怎么辦呢？百度咯。這里我主要用了兩個圖標源（沒錢只能用免費的啦）。
第一個是阿里的圖標庫，網(wǎng)址是：http://iconfont.cn/collections。
第二個是github上的一個開源項目：https://github.com/google/material-design-icons。
如果你的項目不是太復雜，這些資源基本上可以滿足需求。找一個看上去差不多的圖標，然后用強大的圖片編輯工具（美圖秀秀）做一些小小的修改，就可以露臉了。
（2）布局層次
整個主界面被一個UCRootView包裹，它繼承自RelativeLayout，里面實現(xiàn)自己的事件傳遞邏輯，并定義滑動接口。rootview下有四個大的子view組件，分別是Head，NewsPager，Searchbar和Bottombar，這些都繼承自BaseLayout（自定義的viewgroup），到目前為止我們的UC瀏覽器布局結(jié)構如下（如果看的眼花，別打我哈）：
（3）布局搭建
布局的搭建對各位同學來說應該是信手拈來吧，基本上就是玩各種layout，我就來張圖吧，大家依葫蘆畫瓢
寫到這，我們的基本布局組件就搭建好了。接下來我就應該探討如何讓這些界面動起來。
自定義根布局（UCRootView）
因為uc瀏覽器手勢交互比較多，android原生的layout是滿足不了我們的需求的，一個字，干！！！
當然這里最重要的還是android的事件分發(fā)機制，不熟悉的同學可以看看這篇文章：http://www.lxweimin.com/p/e99b5e8bd67b
首先我們先確定對外的接口，因為很多界面牽扯到位置、大小、透明度等屬性的變化，都有一個起始值和最終值，我們規(guī)定這個變化是0——>1的過程。
public interface ScrollStateListener{
void onStartScroll();
void onScroll(float rate);
void onEndScroll();
void onTouch(float x,float y);//手指位置
}
接口我們用一個List來管理，view可以實現(xiàn)接口，當需要監(jiān)聽時，我們的rootview把這些view（接口）加進來，不需要的時候移除掉就可以了。
public void attachScrollStateListener(ScrollStateListener listener){
mListeners.add(listener);
}
public void removeScrollStateListener(ScrollStateListener listener){
mListeners.remove(listener);
}
當我們需要通知各個View變化時，遍歷我們的集合，依次調(diào)用即可
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()方法里主要是判斷手指移動距離是否超過我們規(guī)定的值，如果超過，定性為滑動。邏輯如下：
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記錄當前界面是處于網(wǎng)站導航展示（NORMAL_MODE）狀態(tài)還是處于新聞列表狀態(tài)（NEWS_MODE）
if(mMode == NEWS_MODE){
return false;
}
mTouchState = TOUCH_STATE_SCROLLING;
onStartScroll();//通知view滑動開始
scroll = true;
}
return scroll;
}
因為目前只實現(xiàn)了豎向的滑動處理，所以只判斷了y，后期再把x加上。
rootview是否攔截事件用mTouchState != TOUCH_STATE_REST判斷，目前有兩種狀態(tài)：TOUCH_STATE_REST——正常狀態(tài)，TOUCH_STATE_SCROLLING——滑動狀態(tài)。后面如果把橫向加進來可能要做區(qū)分了。
然后重寫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繼續(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)。
}
}
寫到這，我們的事件處理邏輯算是差不多了，對了UC瀏覽器點擊主頁按鈕要回到網(wǎng)站導航狀態(tài)，怎么實現(xiàn)呢，很簡單
public void back2Normal(){
mTouchState = TOUCH_STATE_SCROLLING;
checkPoint();
}
大功告成，以后就用這個布局生孩子了。我們來看一下效果：
夜已經(jīng)很深了，我要找個地方睡覺去了。今天先寫到這，接下來一篇我們將接著水以下效果的實現(xiàn)：
注：這個項目是我在工作之余寫著玩的，代碼有空優(yōu)化，歡迎打我。
項目地址：https://github.com/zibuyuqing/UCBrowser
敵人還有五秒到達戰(zhàn)場....
轉(zhuǎn)載請注明：[http://www.lxweimin.com/p/22ec577c0bf3)
下一篇：嘗試寫個UC瀏覽器（主頁交互篇）
