开源中国(oschina)Android客户端主页返回按钮效果实现

原创 2016年06月01日 14:06:40

先看看效果
这里写图片描述
开源中国的Android客户端的返回按钮就是这样子的,刚开始看的时候感觉好酷,然后就看源码,找着找着发现其实是Android封装好了的一个控件DrawerArrowDrawable,但是这个只是在Android5.0才加入的,于是乎就看了一下这个控件的源码,发现很容易就能抠出来单独用。
于是,我用抠出来的DrawerArrowDrawable写了个demo:https://github.com/brian512/TestDrawerArrowDrawable
当然我也把该控件加入到我的CodeBlog客户端里面了:

        mArrowDrawable = new DrawerArrowDrawable(this);
        mArrowDrawable.setColor(getResources().getColor(R.color.white));
        mTitleBar.setLeftDrawable(mArrowDrawable);
        sm.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onScroll(float percentOpen) {
                mArrowDrawable.setProgress(percentOpen);
            }
        });

对,用起来就是这么简单。

其实,这个控件就是需要不断的调用setProgress(percentOpen)来更新绘制的进度,然后在draw(Canvas canvas)方法里面根据percentOpen计算当前应该绘制的位置和图形:

            final float rotation = lerp(0, ARROW_HEAD_ANGLE, mProgress * 2 - 1);
            final float upStartX = Math.round(mSize/2 * Math.cos(rotation));
            final float upStartY = Math.round(mSize/2 * Math.sin(rotation));

            // 设置线条起点
            mPath.moveTo(mOffsetLeft + mSize/2 - upStartX, mOffsetTop + mSize - upStartY);
            // 设置线条需要绘制的dx、dy,也就是在x轴的偏移量和在y轴的偏移量
            mPath.rLineTo(2 * upStartX, upStartY * 2);

            mPath.moveTo(mOffsetLeft + mSize/2 - upStartX, mOffsetTop + mSize + upStartY);
            mPath.rLineTo(2 * upStartX, upStartY * -2);

其中,mProgress为传入的percentOpen值,即进度;ARROW_HEAD_ANGLE为线条旋转最大角度;

也就是说,这个类只能用于三杠和图标的切换动作(其实旋转角度及进度的计算是固定的,但是可以设置gap,size等参数实现其他类似的效果,但是变化不会太大),当然这个思路还是可以借鉴的:根据滑动的百分比来同步更新过度控件,其实在微信页面滑动切换时下面tab渐隐渐显的效果也是这个思路,当然还可以衍生出很多其他好玩的东西。

更新一个效果:
这里写图片描述
这个效果就是根据动画更新传过来的插入值来更新mArrowDrawable的状态

        alphaAnimator.addUpdateListener(new AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float)animation.getAnimatedValue();
                mArrowDrawable.setProgress(value);
            }
        });

具体的可以看源码:
这里写图片描述
demo:https://github.com/brian512/TestDrawerArrowDrawable


CodeBlog是我做的一个编程技术学习客户端,集成了很多技术网站上的博客,
http://sj.qq.com/myapp/detail.htm?apkName=com.brian.csdnblog
下个版本就会集成上面讲了那个控件。

版权声明:本文为博主原创文章,未经博主允许不得转载。

用开源中国(oschina)Git管理代码

简介 开源中国提供了Git服务(地址:http://git.oschina.net/),在速度上比国外的github要快很多。使用了一段时间,感觉很不错。oschina git提供了演示平台...
  • luanxuye
  • luanxuye
  • 2016年12月27日 10:12
  • 652

用mac Android Studio在开源中国(OSChina)上完成代码版本控制

在项目开发过程中,代码的版本管理是很重要的一部分. 目前主流的代码版本管理工具是SVN和Git.博主在用过两种工具之后,感觉Git功能更加强大. 而且使用互联网Git代码仓库,可以方便的在公司和家庭同...
  • yuanshuaicsdn
  • yuanshuaicsdn
  • 2016年07月14日 11:57
  • 834

Git@OSC 开源中国git与sourceTree联合使用教程

Git@OSC 作为一个中国版的github,明显有着他自己的优势,比如速度快,汉语显示。sourcetree也可称得上是一个不错的git客户端,能够支持windows和mac os。本文就为这两者联...
  • Riven_wn
  • Riven_wn
  • 2015年04月28日 10:44
  • 6774

OSChina App代码分析一

OSChina App代码分析
  • zq2114522
  • zq2114522
  • 2015年12月16日 20:37
  • 1627

开源中国源码分析(一)

咨讯详情页面分析 布局页面文件fragment_general_news_detail.xml布局文件中包含上滑评论条隐藏,下滑评论条显示 相关推荐、相关评论布局是通过继承LinearLayout再填...
  • hard_working1
  • hard_working1
  • 2016年08月19日 18:21
  • 2687

Oschina 安卓客户端源码学习之一

今天主要研究一下两个功能 (1)双击返回键退出程序 (2)接近完美地退出程序 (1) 在很多应用程序里都有一个功能,就是点击返回键,之后提示你再点击返回键就退出程序。之前一直很好奇这是怎么实现的,...
  • bberdong
  • bberdong
  • 2014年10月11日 13:55
  • 3231

9个完整的开源项目

 android开源项目有很多,但是完整的app项目不多,下面是最近我从 jcodecraeer网站 整理的一些开源app项目: 注: jcodecraeer网站上搜集了很多开源项目,...
  • yan8024
  • yan8024
  • 2015年09月14日 14:16
  • 746

android中实现返回首页功能

关于返回首页功能的两种实现最近需要实现一个返回首页的功能,刚开始自己的基本思路就是清除当前站内的所有activity但不包括MainActivity,这种方法也不难,CSDN上一搜就找到了答案。还有一...
  • tgbus18990140382
  • tgbus18990140382
  • 2016年03月23日 17:00
  • 2896

android OSChina 客户端源代码剖析

OSChina Android源代码剖析(8)-咨询详情页的分析(a) 一、关于android中双击事件的实现 打开NewsDetail.java文件,在onCreate方法中有一个regO...
  • u010507199
  • u010507199
  • 2015年08月20日 14:33
  • 745

Android 贝赛尔曲线实现自定义button 果冻-压下形变,抬起后弹弹的效果

最近看到了用贝塞尔曲线 实现的一些动画效果,相比于一般的动画,它可以实现一些形变效果,比如果冻效果,QQ小红点效果等。 下面实现了一个自定义带有弹性的button-压下形变,抬起后弹弹的效果。(虚拟机...
  • u013568090
  • u013568090
  • 2016年06月09日 19:29
  • 1150
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开源中国(oschina)Android客户端主页返回按钮效果实现
举报原因:
原因补充:

(最多只允许输入30个字)