把钥匙反锁到家里了,回不了家了o(╥﹏╥)o,已联系了撬锁公司,今天开工...现在都晚上10点半了(今天在公司凑合吧),有点无聊,喝了两口农药后决定撸这篇散(水)文,等待大家口诛笔伐。再哭一次,我回不了家了。
个人认为UC浏览器的主界面交互逻辑还是挺好的,界面过度流畅,动画具有引导性,美观大方。我们现在尝试实现它,先来一张美图:
我按照从入门到跑路的过程分以下步骤给你们讲故事: 静态布局搭建 ——》自定义根布局 ——》各个界面过渡动画实现 ——》下拉操作(贝塞尔背景)实现 ——》viewpager + tablayout ——》感悟+后续工作
下面开始表演
先告诉你个坏消息,解压UCBrowser.apk是没用哒。唉,一开始就奠定了这是个悲剧。怎么办呢?百度咯。这里我主要用了两个图标源(没钱只能用免费的啦)。
第一个是阿里的图标库,网址是:iconfont.cn/collections 。
第二个是github上的一个开源项目:github.com/google/mate…。
如果你的项目不是太复杂,这些资源基本上可以满足需求。找一个看上去差不多的图标,然后用强大的图片编辑工具(美图秀秀)做一些小小的修改,就可以露脸了。
整个主界面被一个UCRootView包裹,它继承自RelativeLayout,里面实现自己的事件传递逻辑,并定义滑动接口。rootview下有四个大的子view组件,分别是Head,NewsPager,Searchbar和Bottombar,这些都继承自BaseLayout(自定义的viewgroup),到目前为止我们的UC浏览器布局结构如下(如果看的眼花,别打我哈):
布局的搭建对各位同学来说应该是信手拈来吧,基本上就是玩各种layout,我就来张图吧,大家依葫芦画瓢
写到这,我们的基本布局组件就搭建好了。接下来我就应该探讨如何让这些界面动起来。
因为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是否要拦截此事件。
- @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——滑动状态。后面如果把横向加进来可能要做区分了。
- @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
敌人还有五秒到达战场....
来源: https://juejin.im/post/5a212638f265da431523b663