前言

今天在写代码找有道词典翻译的时候突然想到之前在公众号看到过一篇推送，说的是一个翻译插件，支持 terminal 中直接查询，当时感觉很方便，然后就忘了安装了。所以今天又是翻郭神的公众号又是翻 hongyang 的公众号，找了好一会记录才找到。所以感觉有必要记一下目前在用的几个比较赞的 android studio 插件，以后换电脑什么的也比较好重新设置。

下面用的插件都是直接在 android studio 中的 plugins 中直接搜就可以 get 到。

1.GsonFormat

一键生成 java bean。
这个估计现在大家人手一份（哈哈），因为实在是很方便，从此解放双手，不用一个个去定义字段然后实现 getter and setter 方法了。

链接 ：https://github.com/zzz40500/GsonFormat

2. Alibaba Java Coding Guidelines

alibaba 代码规范插件，使用这个插件后，明显对变量命名规范了很多，特别是多人开发项目比较急，之前变量名称都是自己想怎么写怎么写，含义对不对暂且不说，单个单词拼写都是错的，所以经常见到什么 cancle 、 aplicaton 之类错误的单词，有了这个插件，只要拼写不对，就提示，不改根本不能忍好吗。
并且还包括注释、方法比如 switch case 语句要有 defalut 等。我认为目前在团队中效果实现挺好，至少代码看起来整洁了很多。

链接：https://mp.weixin.qq.com/s/IbibsXlWHlM59kfXJqRvZA#rd

3. AndroidSourceView

这个插件真的是非常赞，对于之前一直懒得甚至不知道怎么下载源码的我来说，真的是很棒的一个插件。对于想看源码或者想看官方文档的，都可以一键直达，并且还有各个 sdk 版本源码差分对比。

链接 ：https://github.com/pengwei1024/AndroidSourceViewer

4. Translation

一个翻译插件，就是文章开头在找的一个。安装后，再也不用担心在 android studio 和 有道翻译间来回跳了。
并且直接在 teminal 中输命令是多么帅气的事情（就是稍微有那么一丢丢慢，但是丝毫不影响心情啊~~）

链接 ：https://github.com/kenshinji/yddict

总结

目前在用的就是这几个，我认为都是平常很有用的。如果你还没用到，赶紧试试吧，说不定就有一款适合你。当然，如果你有什么好的神兵利器，欢迎推荐~~。

前言

在开发中，总是能碰到那种看起来很简单，但是想想又不是一两句代码就好实现的 UI 样式效果。比如前几天在调整 UI 的时候，就遇到过几个下图这样的：

这几张图里面的输入框的背景图乍一看没有什么，但是在认识 <layer-list> 之前你会怎么实现呢？比如一二两张图的输入框，看起来就只有下面一条线，当输入框没有获取焦点时显示灰色，当输入框获取焦点时显示绿色。而第二张图直接左右各多出来半截。如果是我，我估计第一张图我会用俩控件实现，第二张图直接 UI 出 .9 图（捂脸ing）。

而现在，我们可以用 <layer-list>这个属性来更优雅的实现这个效果。

初识 <layer-list>

<layer-list> 是 android 可绘制对象资源中的一种。文档 中描述：可绘制对象资源是一般概念，是指可在屏幕上绘制的图形，以及可以使用 getDrawable(int) 等 API 检索或者应用到具有 android:drawable 和 android:icon 等属性的其他 XML 资源的图形。有以下几类：

这么多种类，里面有几个大家都很熟悉的： 位图文件、九宫格文件 和形状可绘制对象件。就是我们平常用的 drawable、.9 图片 和 shape 文件。其它的种类我还没有接触过。今天说一下其中的图层列表。

<layer-list>属性介绍

图层列表中的每个可绘制对象按照列表的顺序绘制，列表中的最后一个可绘制对象绘于顶部。
每个可绘制对象由单一 <layer-list> 元素内的 <item> 元素表示。
语法示例：

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

这里说一下达到复杂效果常用的几个属性：

很简单，有没有。因为就像定义所说，图层列表按顺序绘制，所以我们经常会根据设置顺序加上上下左右的偏移量来达到 ui 效果。

<layer-list>实战

首先以第一个输入框获取焦点时效果为例，其实思路很简单，就是最底层是一个绿色矩形，然后上面再盖一个灰色矩形，只不过灰色矩形距离底部 1dp 的高度，所以就达到只有底部一条绿线的效果。所以有了顺序和偏移量，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#00BE3C" />
        </shape>
    </item>
    <item
        android:bottom="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#E5E5E5" />
        </shape>
    </item>
</layer-list>

同理，第二个输入框的效果的思路：底部是一个矩形边框，边框颜色为绿色，宽 1dp，填充白色，然后上面再盖一层白色矩形，然后让白色矩形距离底部 4dp，就实现效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="#00BE3C" android:width="1dp"></stroke>
            <solid android:color="#ffffff"></solid>
        </shape>
    </item>
    <item android:bottom="4dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"></solid>
        </shape>
    </item>
</layer-list>

总结

所以其实很简单，我们拿到 UI 效果后，首先要分析根据顺序每一层绘制什么，然后确定每一层的偏移量就好了

参考文章

https://developer.android.com/guide/topics/resources/drawable-resource?hl=zh-cn#LayerList

前言

昨天在处理 UI 界面微调的时候，再一次用到了 .9 格式图片。我们是 UI 只出 JPG 格式的图， .9 图需要自己做。 因为项目之前已经用到了 .9 图，所以我之前也就大致查了下 .9 图的制作方法，只是大致记住调整四条边就 ok 了。然而昨天自己调的时候忘了四条边的含义，折腾了一会。 所以，虽然很简单，还是要记录一下的。

为什么用.9图片

我们知道一般的图片被拉伸会失真。而我们有些场景如聊天消息气泡因内容不固定，如果被拉伸就会失真。如下图：

用了.9图后，效果是这样的：

是不是立竿见影？

如何制作 .9 图片？

1.修改文件后缀名

拿到 UI 给的 jpg 的 图片导入到 android studio 之后，需要修改图片名称添加 .9 标识。如 message_bubble.9.png 。

修改完名称后，就可以看到，图片预览那一栏下面多了两个 tab 栏：9-Patch 和 ImageFileEditor .。 选中 9-Patch 栏，我们可以看到如下界面：

左边的是我们的原图，右边可以看到有3张图。其中1代表竖直方向拉伸后的图片，2 代表水平方向拉伸后的图片，3代表竖直方向和水平方向都拉伸后的图片。
可以看到，拉伸后气泡的那个尖角已经变形了。这张图也许变形的不明显，这时我们调整一下patch scale 放大查看，效果就很明显了。

所以，下面就让我们开始制作.9图片吧。

2.制作.9图片

将鼠标移到左边原图上，这个时候会看到边界显示的有好几条线，通过移动这几条线，就可以给图片绘制1px宽度的黑线。

这里就必须说一下四条边上黑线的含义了，也是制作的秘诀。

• 上边：控制图片水平方向可拉伸的区域
• 左边：控制图片竖直方向可拉伸的区域
• 右边：控制图片内包裹内容的竖直显示区域
• 下边：通知图片内包裹内容的水平显示区域

也就是左上两条边控制图片本身的拉伸，右下两条边控制图片包裹内容的显示区域。

那聊天气泡的.9图就可以这样做了：

这里说一下我为什么要这么做，因为是消息气泡，所以这几条边是这样弄的:

• 上边：代表水平可拉伸区域，在水平方向设置一点黑线（不用设置很长，因为黑线区域就表示可无限拉伸）
• 左边：代码竖直方向可拉伸的区域，注意这个黑线我是设置在尖角下方位置的，因为我想要的是如果竖直方向内容很多，尖角还是偏上，不要居中。
• 右边，内容竖直方向区域是要充满气泡的，但不能到圆角部分
• 下边，内容水平方向区域是要充满气泡的，但是不能到圆角部分

设置完后，就可以看到这图的效果了，然后我们设置一下scale参数，发现就算被放大到很大，图片依然没有失真，那我们的 .9 就算成功了。

这里再说一下上图中几个可勾选内容的意思：

• show lock :暂时不知道什么意思，只是注意到如果勾选，鼠标放到原图上会出现一块红黑色区域
• show content ：图片包裹内容的显示区域，也就是上图右边部分图篇蓝色部分
• show patches：显示图片被拉伸的区域，也就是上图左边原图中间那个红色小区域
• show bad patches: 显示做的不好的可拉伸的区域。比如，我们的消息气泡的那个尖尖我们肯定不想被拉伸，如果我们照如下图设置左边黑线让尖角也是可拉伸的区域，就会显示 bad patches。

到此，我们的 .9 图就制作完毕了。

参考文章

https://www.jianshu.com/p/3fd048644e3f
http://www.ui.cn/detail/290941.html

昨天在网上搜关于自定义 React Native 组件的时候，看到一个 超级 nice 的个人博客，主题非常赞了。简洁大方，非常赏心悦目啊。然后就在想，如果自己有了这样的一个博客，一定会增加写博客的欲望吧。

咳咳，好吧，知道以自己这种三分钟热度的习惯，估计很难坚持的。但是不试试怎么知道呢？

自己上篇博客还是停留在 2017 年 11 月份 （捂脸，一个世纪过去了）。
作为一个程序员，也是很羞愧了。特别是看到 CSDN 个人勋章还是“恒”，就更加惭愧了。

好在，现在又有了写博客的欲望（动力，因为危机感，囧），所以，就坚持写下去吧。哪怕两星期一篇，只要不停。突然想起香蜜中润玉的一段话：“无妨爱我淡薄，只求每天爱我一点点，日日复月月，月月复年年，年年复此生”。然后我在这里改为“无妨写的浅薄，只求两月写一文，周周复月月，月月复年年，年年复此生”。哈哈，矫情一把。平常抽出刷剧、玩游戏的一个小时，多点学习吧。毕竟知识更新迭代的太快，如果我们不主动去学去吸收新的知识，慢慢就会被淘汰。就像我今天之前，一直想着，好像苏州这边也没看见有人用 kotlin，所以暂时不用学，其实是在心里怀疑它的普及度的。以为只有很少部分人在用。知道今天逛简书得时候，发现博主的代码是用 kotlin 写的。虽然功能知识点我知道，但是代码就是读不懂。所以，当时很慌。连别人的代码都读不懂，这不是一件很可怕的事情吗。

所以，从现在起，比之前要再努力一点点。

然后，个人博客的开篇，不是写怎么搭建博客的。毕竟网上优秀的方案一大把。只说说自己的感悟及初衷。我的博客是按照 这个来的，原本想用特别喜欢的博主用的主题，发现以 Jekyll 为基础。本人比较懒惰也比较笨，所以就只用了超简洁的这个HEXO的 next 主题。

好了，让我们一起开启这次旅程吧。

今日 Momentum 上的一句话也是很符合自己现在的心境了：

“So many of our dreams at first seem impossible. Then they seem improbable.
And then, when we summon the will, they soon become inevitable”

–我们的许多梦想一开始看似不可能实现，接着变得不大可能实现。然后，在我们下定决心后，它们很快变得必然会实现