一款用来展示你的 Github 贡献图的 Android 桌面小部件

Android · donglua · 于 发布 · 最后由 barryhappy回复 · 311 次阅读
96

GithubContributionsWidget 是一款开源的桌面小部件,用来展示 Github 的贡献图。

image

  • 数据准备:

Github 目前还没有提供可以直接拿到用户每天的贡献度的接口。经过一番搜索,在 stackoverflow 找到了有用的信息。我们可以通过/users/<username>/contributions 这个接口拿到一个 SVG 文件。比如,在浏览器打开 https://github.com/users/donglua/contributions 这个链接,显示的是下面这个图片,显示的是过去一年里每天的贡献度。

https://github.com/users/donglua/contributions

查看其网页源码,文本格式如下:

<svg width="676" height="104" class="js-calendar-graph-svg">
<g transform="translate(16, 20)">
<g transform="translate(0, 0)">
<rect class="day" width="10" height="10" x="13" y="0" fill="#eeeeee" data-count="0" data-date="2016-01-03"/>
<rect class="day" width="10" height="10" x="13" y="12" fill="#d6e685" data-count="1" data-date="2016-01-04"/>
<rect class="day" width="10" height="10" x="13" y="24" fill="#eeeeee" data-count="0" data-date="2016-01-05"/>
<rect class="day" width="10" height="10" x="13" y="36" fill="#eeeeee" data-count="0" data-date="2016-01-06"/>
<rect class="day" width="10" height="10" x="13" y="48" fill="#eeeeee" data-count="0" data-date="2016-01-07"/>
<rect class="day" width="10" height="10" x="13" y="60" fill="#eeeeee" data-count="0" data-date="2016-01-08"/>
<rect class="day" width="10" height="10" x="13" y="72" fill="#eeeeee" data-count="0" data-date="2016-01-09"/>
</g>
<g transform="translate(13, 0)">
<rect class="day" width="10" height="10" x="12" y="0" fill="#eeeeee" data-count="0" data-date="2016-01-10"/>
<rect class="day" width="10" height="10" x="12" y="12" fill="#eeeeee" data-count="0" data-date="2016-01-11"/>
<rect class="day" width="10" height="10" x="12" y="24" fill="#eeeeee" data-count="0" data-date="2016-01-12"/>
<rect class="day" width="10" height="10" x="12" y="36" fill="#eeeeee" data-count="0" data-date="2016-01-13"/>
<rect class="day" width="10" height="10" x="12" y="48" fill="#eeeeee" data-count="0" data-date="2016-01-14"/>
<rect class="day" width="10" height="10" x="12" y="60" fill="#eeeeee" data-count="0" data-date="2016-01-15"/>
<rect class="day" width="10" height="10" x="12" y="72" fill="#eeeeee" data-count="0" data-date="2016-01-16"/>
</g>
<g transform="translate(26, 0)">
<rect class="day" width="10" height="10" x="11" y="0" fill="#eeeeee" data-count="0" data-date="2016-01-17"/>
...
...

不难看出这些数据的规律, 其中的fill="#eeeeee" data-count="0" data-date="2016-01-03"就是我们所需要的数据,包括颜色、提交次数和时间。

于是,可以直接用正则表达式把每天的数据匹配出来(这里是 Kotlin 的代码,区别不大):

val matcher = Pattern.compile("\"(#[a-z0-9]{6})\"" +
        " data-count=\"([\\d]+)\"" +
        " data-date=\"([\\d]{4}-[\\d]{2}-[\\d]{1,2})\"")
        .matcher(svgString)

while (matcher.find()) {
    val color = Color.parseColor(matcher.group(1))
    val dataCount = Integer.parseInt(matcher.group(2))
    val day = matcher.group(3)
    // ...
}

上面代码里的正则表达式匹配出像 "#d6e685" data-count="1" data-date="2016-01-04" 这样的数据,加上括号的是三个捕获组,表示我们要取出来的数据。

这样,我们就拿到了每天的数据。

好了,先写到这里吧。核心主要是拿到数据,然后用 AppWidgetProvider 显示出来。感兴趣的直接看代码吧(https://github.com/donglua/GithubContributionsWidget),这里就不细讲了,毕竟桌面小部件也不常用。

共收到 3 条回复
2
jixiaohua · #1 ·

能不能把这个功能抽出来,做得形式多样一些,但是核心都是展示贡献图啊,活跃图啊,你点开我的个人中心,diycode 也有一个活跃图的功能

96
donglua · #2 ·

#1楼 @jixiaohua 这个可以有,改成支持显示各个网站的活跃度。不过每个网站不一样,要单独解析。

2553

要支持显示各个网站的活跃度,可以用我这个View呀,😁
——https://github.com/barryhappy/TContributionsView,支持若干种数据源以及自定义Adapter等~

我整这个东西的时候,也想找一个能拿到某个用户每天的贡献度的接口,最后发现大家也都是用SVG的链接来做的,比如这个:https://github.com/Nightonke/GithubWidget
像楼主直接用svg的颜色来是木有问题的,我看到有一些别的wiget是通过这个颜色来判断级别,然后自定义颜色的来显示,就有可能会遇到一个问题:这个svg的颜色可能是会变的(比如万圣节,就变成了南瓜灯的颜色),然后就导致数据错误了~~

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册