尝试写个UC浏览器(布局篇)

个人认为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浏览器布局结构如下(如果看的眼花,别打我哈):

![](http://upload-images.jianshu.io/upload_images/8719000-34ed1cb1a093e47f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(3)布局搭建

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

![](http://upload-images.jianshu.io/upload_images/8719000-975e730bed9f2d68.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 写到这,我们的基本布局组件就搭建好了。接下来我就应该探讨如何让这些界面动起来。

自定义根布局(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把这些v

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值