個人認為UC浏覽器的主界面互動邏輯還是挺好的，界面過度流暢，動畫具有引導性，美觀大方。我們現在嘗試實作它，先來一張美圖：
我按照從入門到跑路的過程分以下步驟給你們講故事：
靜态布局搭建 ——》自定義根布局 ——》各個界面過渡動畫實作 ——》下拉操作（貝塞爾背景）實作 ——》viewpager + tablayout ——》感悟+後續工作
下面開始表演
靜态布局搭建
（1）圖檔資源
先告訴你個壞消息，解壓UCBrowser.apk是沒用哒。唉，一開始就奠定了這是個悲劇。怎麼辦呢？百度咯。這裡我主要用了兩個圖示源（沒錢隻能用免費的啦）。
第一個是阿裡的圖示庫，網址是：http://iconfont.cn/collections。
第二個是github上的一個開源項目：https://github.com/google/material-design-icons。
如果你的項目不是太複雜，這些資源基本上可以滿足需求。找一個看上去差不多的圖示，然後用強大的圖檔編輯工具（美圖秀秀）做一些小小的修改，就可以露臉了。
（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() < ){
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() <= ) 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) >= f) {
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 >= ;
}
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(-f);
mMode = NEWS_MODE;
} else {
mTotalMotionY = ;
onScroll(f);
mMode = NORMAL_MODE;
}
onEndScroll();
resetTouchState();//重置觸摸狀态。
}
}
寫到這，我們的事件處理邏輯算是差不多了，對了UC浏覽器點選首頁按鈕要回到網站導航狀态，怎麼實作呢，很簡單
public void back2Normal(){
mTouchState = TOUCH_STATE_SCROLLING;
checkPoint();
}
大功告成，以後就用這個布局生孩子了。我們來看一下效果：
今天先寫到這，接下來一篇我們将接着水以下效果的實作：
注：這個項目是我在工作之餘寫着玩的，代碼有空優化，歡迎打我。
項目位址：https://github.com/zibuyuqing/UCBrowser
敵人還有五秒到達戰場….
轉載請注明：http://blog.csdn.net/zibuyuqing/article/details/79094503