专栏首页编程最简教程!写个UC浏览器

最简教程!写个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浏览器点击主页按钮要回到网站导航状态,怎么实现呢,很简单。

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

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

本文来自企鹅号 - 菜鸟窝官网媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DeepMind 2017年工作回顾:从AlphaGo Zero到Parallel WaveNet

    【导读】今天DeepMind官方博客发布文章-DeepMind's work in 2017: A Year In Review。 过去一年,从AlphGo到W...

    企鹅号小编
  • 图文详解高斯过程(一)——含代码

    作者:Alex Bridgland 编译:Bot 编者按:高斯过程(Gaussian process)是概率论和统计学中的一个重要概念,它同时也被认为是一种机器...

    企鹅号小编
  • 如何在不会导致服务器宕机的情况下,用 PHP 读取大文件

    英文:Christopher Pitt ,译文:oschina www.oschina.net/translate/performant-reading-big...

    企鹅号小编
  • 逆向分析Spotify.app并hook其功能获取数据

    在开始本文的正式内容之前我想先来吐槽下。大多数的软件开发人员可能都有着这样一个烦恼,就是由于工作和其他责任,不得不搁置自己的一些个人项目甚至是最终完全的遗忘和埋...

    FB客服
  • Linux O(1)调度器

    O(n)调度器采用一个runqueue运行队列来管理所有可运行的进程,在主调度schedule函数中会选择一个优先级最高,也就是时间片最大的进程来运行,同时也会...

    DragonKingZhu
  • Hacker基础之Linux篇:进阶Linux命令一

    这也是Open Source的一个特点,Windows中其他闭源软件是不会提供这种源码编译安装的安装方式的

    用户1631416
  • 【实作】一个将Jetson NANO数据流传递给物联网平台的实验

    物联网云是指为物联网提供动力的任何数量的云服务。这些包括处理和存储物联网数据所需的底层基础设施,无论这些数据是否是实时的。

    GPUS Lady
  • ORA-00932: inconsistent datatypes: expected - got CLOB

          最近数据库从10.2.0.3升级到了10.2.0.5之后,一些对象无法编译通过。查看了这些对象主要表现在之前写法不严格的SQL语法导致了这些pack...

    Leshami
  • Redis系列(6)——RedisTemplate操作模板

    转载地址: http://blog.csdn.net/hotdust/article/details/51832926

    逝兮诚
  • 【机器学习】Quora机器学习Sessions:对话百度首席科学家Andrew Ng

    Writing Sessions是知识共享网站Quora推出的一个与专家交流互动的新板块,在这里你可以看到各个行业领域的专家、学者、名人等对引人注目的问题的独...

    陆勤_数据人网

扫码关注云+社区

领取腾讯云代金券