尝试写个UC浏览器（布局篇）
把钥匙反锁到家里了，回不了家了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
敌人还有五秒到达战场....