最简教程！写个UC浏览器

文章转载自

https://juejin.im/post/5a212638f265da431523b663

项目github地址：

https://github.com/zibuyuqing/UCBrowser

个人认为UC浏览器的主界面交互逻辑还是挺好的，界面过度流畅，动画具有引导性，美观大方。

我们现在尝试实现它，先来一张美图：

我按照从入门到跑路的过程分以下步骤给你们讲故事：

静态布局搭建

自定义根布局

各个界面过渡动画实现

下拉操作（贝塞尔背景）实现

viewpager + tablayout

感悟+后续工作

下面开始表演

1

静态布局搭建

（1）图片资源

先告诉你个坏消息，解压UCBrowser.apk是没用哒。唉，一开始就奠定了这是个悲剧。怎么办呢？百度咯。

这里我主要用了两个图标源（没钱只能用免费的啦）。

第一个是阿里的图标库：

iconfont.cn/collections

第二个是github上的一个开源项目：

https://0x9.me/5FuL8

如果你的项目不是太复杂，这些资源基本上可以满足需求。找一个看上去差不多的图标，然后用强大的图片编辑工具（美图秀秀）做一些小小的修改，就可以露脸了。

（2）布局层次

整个主界面被一个UCRootView包裹，它继承自RelativeLayout，里面实现自己的事件传递逻辑，并定义滑动接口。

rootview下有四个大的子view组件，分别是Head，NewsPager，Searchbar和Bottombar，

这些都继承自BaseLayout（自定义的viewgroup）。

到目前为止我们的UC浏览器布局结构如下（如果看的眼花，别打我哈）：

（3）布局搭建

布局的搭建对各位同学来说应该是信手拈来吧，基本上就是玩各种layout，我就来张图吧，大家依葫芦画瓢。

写到这，我们的基本布局组件就搭建好了。接下来我就应该探讨如何让这些界面动起来。

2

自定义根布局

（UCRootView）

因为uc浏览器手势交互比较多，android原生的layout是满足不了我们的需求的，一个字，干！！！

当然这里最重要的还是android的事件分发机制，不熟悉的同学可以看看这篇文章：

http://www.jianshu.com/p/e99b5e8bd67b

首先我们先确定对外的接口，因为很多界面牵扯到位置、大小、透明度等属性的变化，都有一个起始值和最终值，我们规定这个变化是0——>1的过程。

接口我们用一个List来管理，view可以实现接口，当需要监听时，我们的rootview把这些view（接口）加进来，不需要的时候移除掉就可以了。

当我们需要通知各个View变化时，遍历我们的集合，依次调用即可。

紧接着我们需要判断手指动作，以此来决定rootview是否要拦截此事件。

首先重写onInterceptTouchEvent：

determineScrollingStart()方法里主要是判断手指移动距离是否超过我们规定的值，如果超过，定性为滑动。逻辑如下：

因为目前只实现了竖向的滑动处理，所以只判断了y，后期再把x加上。 rootview是否拦截事件用mTouchState != TOUCH_STATE_REST判断，

目前有两种状态：

TOUCH_STATE_REST——正常状态，

TOUCH_STATE_SCROLLING——滑动状态。

后面如果把横向加进来可能要做区分了。

然后重写onTouchEvent

当我们手指离开屏幕之后还没到达指定位置怎么办，这里我采用handle通知view继续更新：

写到这，我们的事件处理逻辑算是差不多了，对了UC浏览器点击主页按钮要回到网站导航状态，怎么实现呢，很简单。

大功告成，以后就用这个布局生孩子了。我们来看一下效果：

夜已经很深了，我要找个地方睡觉去了。今天先写到这，接下来一篇我们将接着水以下效果的实现：