[转]微信零基础美化反编译教程 – 4 – 点九图与布局文件

重点都在标题里了.. 我就不多啰嗦了

文件夹 r – 替换资源、修改布局展开目录

我们进入文件夹 r,可以看到许多以字母命名的文件夹

MT管理器中的文件夹 r

这里文件夹的作用我们在电脑端反编译之前只能靠经验寻找,比如众所周知的 a3 文件夹里存放了微信主要的图片资源,而 f 文件夹里则存放了微信的布局文件。

实例 3. 替换启动图 / 聊天气泡展开目录

启动图展开目录

在 a3 文件夹中寻找,很容易就可以发现启动图是 arc.jpg,我们替换它就完成了最简单的修改,值得一提的是,如果只是替换启动图并且使用的是相同分辨率的图片 (1080*1920),是不需要重新签名的,但是这种不需要重签名的场景几乎只出现在替换启动图的时候,别的情况下很难保证我们替换的图片和原有的图片分辨率相同。

聊天气泡展开目录

在文件夹中寻找气泡,我们会发现有许多的长得差不多的气泡图像,其中一些是平时聊天的气泡,一些是分享链接时显示的气泡 (分享气泡的关系比较复杂,我们暂时不讨论),经过反复尝试我们可以确定下来聊天气泡有如下对应关系

文件 对应
adk.9.png / adm.9.png 自己的气泡 / 按下的气泡
vw.9.png / vx.9.png 对方的气泡 / 按下的气泡

可以注意到这里的图片都是以 .9.png 的后缀命名的,俗称点九图,我们替换进去的图片也应为点九图,关于点九图的介绍和画法,网上有许多介绍,我这里简单说一下,下图是使用了点九图的拉伸效果示例:

点九图介绍

点九图在制作时周围有 1 像素宽的地方画上了黑线,其中上方和左边的黑线是规定可拉伸的部分,而右边和下方的黑线则是规定可显示文字的部分。这样图像在拉伸的时候四个角就不会改变 (如上图 1 的效果),文字也可以在图像中合适的地方显示。关于具体的介绍,我强烈推荐这篇文章:

Android 设计中的. 9.png

而我会具体的讲述点九图的画法和处理

如何画点九图?展开目录

  • Android 端 (推荐)
  1. 先下载工具 9 Patch Editor
  2. 我们来看一下界面,丑但实用:

9 Patch Editor 界面

  1. 点击右上角的文件夹图标选择图片导入 (聊天气泡的长宽最好在 100 像素上下,小了如果气泡样式还好的话问题不大,但是如果太大了.. 那效果.. 可以自己试试看)
  2. 随后点击右上角的加号添加拉伸区域:

添加拉伸区域

  1. 进行调整:

调整后

  1. 在内容区域则是点击右上角的扩张按钮

  1. 微调

  1. 点击预览

预览图

滑动下方的滑块可以自由缩放图的大小,便于测试各种缩放情况下气泡的样式

  1. 点击右上角三个点菜单选择「保存」,然后选择「Saved Complied」保存为已经编译好的点九图 (否则直接保存微信会无法正确识别为点九图)

这个软件还有一些设置项,比如背景颜色和文字颜色的调整等,这里就不一一赘述了

  • PC 端
  1. 下载工具 (运行需要前文提到的 Java JDK)
  2. 解压后里面有两个文件夹,我们双击 9png 文件夹下的批处理文件
  3. 在随后弹出的窗口里拖入我们需要处理的图片就可以开始画黑线,按住 Shift 可以涂掉已经画好的黑线
  4. 同时工具还提供了 Show Content 的选项让我们可以直观地看到文字的显示区域,防止画歪,也决定我们最终画好的气泡文字与边界的距离,确定最终气泡的「胖瘦」,另外「下方和右方的黑线必须要连续」,不能有断点,否则后续的处理会出错

气泡点九图画法

画好之后的图就是点九图了,但是这样的图直接替换到 apk 中是无法起到点九图的效果的,我们需要用工具把我们刚刚画上的黑线隐藏起来 (在把项目编译成 apk 的时候,会把 .9.png 编译成隐藏黑线的样子,我们这里相当于编译了我们制作的 .9.png)

  1. 把我们刚刚处理好的 .9.png 文件放到 xUItimate-d9pc-x86\example1\res\drawable-hdpi 中
  2. 返回到 xUItimate-d9pc-x86 文件夹下,运行 xUltimate-d9pc.exe
  3. 到 xUItimate-d9pc-x86\done\example1\res\drawable-hdpi 中即可看到已经处理好的点九图

最后我们把处理好的点九图覆盖到 apk 中即可

实例 4. 隐藏底栏文字 – 改布局文件 textSize 为 0展开目录

要实现这一点,我们需要更改底栏的布局文件,将底栏的文字大小调整为 0dp

什么是布局文件?展开目录

关于布局,我们需要知道的是,我们所看到的所有的界面,都是由一个个小小的控件 (View) 组成的 (一个小按钮,输入框,一段文字等等),而布局文件则是定义这些控件的各种属性 (大小,宽度,位置,调用的图片资源等等),来使最终呈现出来的界面不会杂乱无章

而其中的控件 (View,以下统一称 View),我通过经验主义分为两类

  • 系统自带的 View,如 ImageView,TextView,ButtonImageView 等等,通过字面意思可以知道其代表的意思
  • 在开发过程中开发者自定义的 View,一般名称会比较长,比如 com.tencent.mm.ui.TabIconView,代表的是底栏 Tab 的图标

明确了这个之后可以帮助我们理解布局文件里定义的 View 与我们实际看到的界面的对应关系

操作过程展开目录

  1. 打开 r3/f/z8.xml代码如下
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:background="@7F02051F"
       android:paddingTop="@7F0C0154"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <!--下面的各种 LinearLayout, RelativeLayout 代表的是布局的方式,我们这里不作过多介绍,有兴趣的可以自行搜索,我们这里主要介绍如何界面与 View 的对应关系-->
       <LinearLayout
           android:gravity="center_horizontal"
           android:orientation="vertical"
           android:id="@7F100D13"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true">
           <RelativeLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content">
             <!--根据 TabIconView 可以知道下面这段定义了底栏图标-->
               <com.tencent.mm.ui.TabIconView
                   android:id="@7F100720"
                   android:layout_width="32dp"
                   android:layout_height="28dp"
                   android:layout_centerInParent="true" />
               <TextView
                   android:id="@7F100D14"
                   android:visibility="invisible"
                   android:layout_marginRight="-10dp"
                   android:layout_alignTop="@7F100720"
                   android:layout_alignRight="@7F100720"
                   style="@style/UnreadCountTipsStyle$7F0D02CD" />
             <!--UnreadCountTips 翻译过来就是未读计数提示,由此可以知道这个 TextView 是未读小点上的数字,并不是我们需要寻找的底栏文字-->
               <ImageView
                   android:id="@7F100D15"
                   android:visibility="invisible"
                   android:layout_marginTop="1dp"
                   android:layout_marginRight="-3dp"
                   android:layout_alignTop="@7F100720"
                   android:layout_alignRight="@7F100720"
                   style="@style/UnreadDotStyle$7F0D02CE" />
             <!--UnreadDotStyle 可以看出这一部分是未读小点-->
           </RelativeLayout>
         <!--那么下面这个 TextView 就是定义我们需要更改的底栏文字的部分了,我们把 android:textSize 改为 0dp 就大功告成了-->
           <TextView
               android:textSize="@7F0C0155"
               android:textColor="@7F0F02AD"
               android:gravity="center"
               android:id="@7F100D16"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@7F080C2E" />
       </LinearLayout>
    </RelativeLayout>

    新版本补充:微信之后的版本似乎直接更改 textSize 无法隐藏文字了,不过我们还可以将 layout_height 改为 0dp,也可以实现同样的效果

文 / anson
LEAVE A REPLY
loading