微信美化详细图文教程9、修改输入框的背景与下划线

2018年4月15日19:25:06 发表评论 333

修改输入框背景

我们再次回到我们定位到的输入框的布局文件 g0.xml,获取输入框的背景图的资源 ID:

微信美化详细图文教程9、修改输入框的背景与下划线

定位到输入框背景,是一张点九图:

微信美化详细图文教程9、修改输入框的背景与下划线

可以发现其中有两个文件夹中都有输入框背景,从文件夹名也可以看出分别适配的是不同的 dpi,两个文件我们都需要替换为我们已经处理好的输入框背景点九图

这里输入框背景图要注意,如果是使用和我一样的类似的周围镂空的圆角背景,那么周围的颜色应当填充成聊天背景色,而不是使用透明颜色,我一开始想当然的,认为聊天背景延伸到画面最下方,而输入框是覆盖在下方的聊天背景之上,但是事实是输入框由于布局的原因,占据了下方的一部分位置,如果将输入框周围镂空的部分处理成透明,将会导致从主界面点击进入聊天后.. 从镂空的地方可以看到下方主界面的画面,想象一下就好.. 我就不演示了

我自己对于如何解决这个问题也有研究.. 奈何自己能力不足,暂时给不出一个良好的解决方案,只能先放着了,等学好 Java 再来..

微信美化详细图文教程9、修改输入框的背景与下划线

重启微信查看效果:

微信美化详细图文教程9、修改输入框的背景与下划线

输入框背景和下面的选择表情的面板背景一并被替换了,而选择表情的各种按钮需要调整,我们先用「开发者助手」获取 ID 并搜索定位布局文件:

微信美化详细图文教程9、修改输入框的背景与下划线微信美化详细图文教程9、修改输入框的背景与下划线

打开 aa0.xml,代码我已经贴在下面,但在看代码之前,我们先要明确我们要找什么

微信美化详细图文教程9、修改输入框的背景与下划线

从上图可以看出,我们需要做的首先是把被反复套用的输入框背景图去掉,让按钮看起来不会这么奇怪,我们之前找到的输入框背景图的 ID 是 7F020118,所以我们只需要把下面这个布局文件的调用了这个 ID 的部分去掉即可,我在代码中标识了出来:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:mm="http://schemas.android.com/apk/res-auto"
  4.     android:orientation="vertical"
  5.     android:id="@7F10110F"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent">
  8.     <com.tencent.mm.plugin.emoji.ui.smiley.SmileyPanelViewPager
  9.         android:id="@7F101110"
  10.         android:scrollbars="none"
  11.         android:fadingEdge="none"
  12.         android:fadingEdgeLength="0dp"
  13.         android:layout_width="match_parent"
  14.         android:layout_height="0dp"
  15.         android:listSelector="@7F0204DC"
  16.         android:layout_weight="1"
  17.         android:layout_above="@7F101111"
  18.         android:layout_alignParentTop="true"
  19.         android:fadeScrollbars="false" />
  20.     <com.tencent.mm.plugin.emoji.ui.smiley.SmileyPanelScrollView
  21.         android:gravity="center"
  22.         android:orientation="horizontal"
  23.         android:id="@7F101111"
  24.         android:visibility="invisible"
  25.         android:layout_width="match_parent"
  26.         android:layout_height="@7F0C02FF"
  27.         android:layout_above="@7F101112"
  28.         mm:dot_count="1" />
  29.     <LinearLayout
  30.         android:orientation="horizontal"
  31.         android:id="@7F101112"
  32.         android:layout_width="match_parent"
  33.         android:layout_height="@7F0C025A"
  34.         android:layout_toRightOf="@7F101113"
  35.         android:layout_alignParentBottom="true">
  36.         <com.tencent.mm.ui.base.HorizontalListViewV2
  37.             android:id="@7F101114"
  38.             android:background="@7F020118" 这里出现了第一次调用
  39.             android:scrollbars="none"
  40.             android:layout_width="0dp"
  41.             android:layout_height="match_parent"
  42.             android:layout_weight="1"
  43.             android:overScrollMode="never" />
  44.         <ImageButton
  45.             android:layout_gravity="right"
  46.             android:id="@7F101115"
  47.             android:background="@7F020118" 这里是第二次调用
  48.             android:layout_width="@7F0C025C"
  49.             android:layout_height="@7F0C025B"
  50.             android:src="@7F0701BE" />
  51.     </LinearLayout>
  52.     <FrameLayout
  53.         android:layout_gravity="left"
  54.         android:id="@7F101113"
  55.         android:background="@7F020118" 这里是第三次调用
  56.         android:layout_width="@7F0C025E"
  57.         android:layout_height="@7F0C025A"
  58.         android:layout_alignTop="@7F101112"
  59.         android:layout_alignParentBottom="true">
  60.         <ImageView
  61.             android:gravity="center"
  62.             android:layout_gravity="left"
  63.             android:id="@7F101116"
  64.             android:background="@7F020114"
  65.             android:clickable="true"
  66.             android:layout_width="@7F0C025E"
  67.             android:layout_height="@7F0C025A"
  68.             android:src="@7F07014B"
  69.             android:scaleType="center"
  70.             android:minWidth="60dp"
  71.             android:minHeight="@7F0C014D" />
  72.         <ImageView
  73.             android:textSize="@7F0C015D"
  74.             android:textStyle="bold"
  75.             android:textColor="@7F0F02AD"
  76.             android:layout_gravity="center|right|top"
  77.             android:id="@7F101117"
  78.             android:background="@7F070149"
  79.             android:visibility="gone"
  80.             android:layout_width="wrap_content"
  81.             android:layout_height="wrap_content"
  82.             android:layout_margin="@7F0C0154"
  83.             android:scaleType="center" />
  84.     </FrameLayout>
  85.     <TextView
  86.         android:textSize="@7F0C0109"
  87.         android:textColor="@7F0F02E0"
  88.         android:gravity="center"
  89.         android:layout_gravity="right"
  90.         android:id="@7F100DB8"
  91.         android:background="@7F020117"
  92.         android:visibility="gone"
  93.         android:layout_width="wrap_content"
  94.         android:layout_height="@7F0C025A"
  95.         android:minWidth="60dp"
  96.         android:minHeight="@7F0C014D"
  97.         android:text="@7F0801A0"
  98.         android:layout_alignTop="@7F101114"
  99.         android:layout_alignParentRight="true"
  100.         android:layout_alignParentBottom="true" />
  101. </RelativeLayout>

可以看到以上三次调用的语句都是定义了 android:background 这个属性,我们只需要把这三个属性去掉即可,重启微信看看效果:

微信美化详细图文教程9、修改输入框的背景与下划线

可以看到已经自然一些了,现在我们还需要把定义按钮本身的 drawable xml(类似之前修改语音按钮时修改的 xml) 修改一下,使它在不被选中、按压的时候保持透明,但是要如何在布局文件中辨别出哪一个是被调用的 drawable xml 呢?

如果在看之前的部分,足够细心的话,应该会发现一个 ID 代表的文件类型只需要看这个 ID 的前四位就可以清楚了,如下图

微信美化详细图文教程9、修改输入框的背景与下划线

而我们需要找的定义选择表情按钮背景的 drawable xml 属于 drawable,ID 应该是 7F02 开头的,而决定具体显示成什么样子的又一般是 android:background和 android:src 以这个思路我们再次审视一下这一长串代码,同样,我也把可能是按钮背景的 drawable xml 的点标识在了代码里:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:mm="http://schemas.android.com/apk/res-auto"
  4.     android:orientation="vertical"
  5.     android:id="@7F10110F"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent">
  8.     <com.tencent.mm.plugin.emoji.ui.smiley.SmileyPanelViewPager
  9.         android:id="@7F101110"
  10.         android:scrollbars="none"
  11.         android:fadingEdge="none"
  12.         android:fadingEdgeLength="0dp"
  13.         android:layout_width="match_parent"
  14.         android:layout_height="0dp"
  15.         android:listSelector="@7F0204DC"
  16.         android:layout_weight="1"
  17.         android:layout_above="@7F101111"
  18.         android:layout_alignParentTop="true"
  19.         android:fadeScrollbars="false" />
  20.     <com.tencent.mm.plugin.emoji.ui.smiley.SmileyPanelScrollView
  21.         android:gravity="center"
  22.         android:orientation="horizontal"
  23.         android:id="@7F101111"
  24.         android:visibility="invisible"
  25.         android:layout_width="match_parent"
  26.         android:layout_height="@7F0C02FF"
  27.         android:layout_above="@7F101112"
  28.         mm:dot_count="1" />
  29.     <LinearLayout
  30.         android:orientation="horizontal"
  31.         android:id="@7F101112"
  32.         android:layout_width="match_parent"
  33.         android:layout_height="@7F0C025A"
  34.         android:layout_toRightOf="@7F101113"
  35.         android:layout_alignParentBottom="true">
  36.         <com.tencent.mm.ui.base.HorizontalListViewV2
  37.             android:id="@7F101114"
  38.             android:scrollbars="none"
  39.             android:layout_width="0dp"
  40.             android:layout_height="match_parent"
  41.             android:layout_weight="1"
  42.             android:overScrollMode="never" />
  43.         <ImageButton
  44.             android:layout_gravity="right"
  45.             android:id="@7F101115"
  46.             android:layout_width="@7F0C025C"
  47.             android:layout_height="@7F0C025B"
  48.             android:src="@7F0701BE"
  49.             上一行虽然是android:src,但是ID以7F07开头,属于上文提到的raw类型,即svg矢量图,故可以排除/>
  50.     </LinearLayout>
  51.     <FrameLayout
  52.         android:layout_gravity="left"
  53.         android:id="@7F101113"
  54.         android:layout_width="@7F0C025E"
  55.         android:layout_height="@7F0C025A"
  56.         android:layout_alignTop="@7F101112"
  57.         android:layout_alignParentBottom="true">
  58.         <ImageView
  59.             android:gravity="center"
  60.             android:layout_gravity="left"
  61.             android:id="@7F101116"
  62.             android:background="@7F020114"
  63.             上一行定义了background,同时也是7F02开头,列为怀疑对象
  64.             android:clickable="true"
  65.             android:layout_width="@7F0C025E"
  66.             android:layout_height="@7F0C025A"
  67.             android:src="@7F07014B" 显然这也是svg矢量图
  68.             android:scaleType="center"
  69.             android:minWidth="60dp"
  70.             android:minHeight="@7F0C014D" />
  71.         <ImageView
  72.             android:textSize="@7F0C015D"
  73.             android:textStyle="bold"
  74.             android:textColor="@7F0F02AD"
  75.             android:layout_gravity="center|right|top"
  76.             android:id="@7F101117"
  77.             android:background="@7F070149" 同上,也是svg矢量图
  78.             android:visibility="gone"
  79.             android:layout_width="wrap_content"
  80.             android:layout_height="wrap_content"
  81.             android:layout_margin="@7F0C0154"
  82.             android:scaleType="center" />
  83.     </FrameLayout>
  84.     <TextView
  85.         android:textSize="@7F0C0109"
  86.         android:textColor="@7F0F02E0"
  87.         android:gravity="center"
  88.         android:layout_gravity="right"
  89.         android:id="@7F100DB8"
  90.         android:background="@7F020117"
  91.         同样,上一行也定义了background,并且调用的是drawable资源,但是这一段的开头是TextView,基本可以断定是「发送」按钮,而不是选择表情的按钮
  92.         android:visibility="gone"
  93.         android:layout_width="wrap_content"
  94.         android:layout_height="@7F0C025A"
  95.         android:minWidth="60dp"
  96.         android:minHeight="@7F0C014D"
  97.         android:text="@7F0801A0"
  98.         android:layout_alignTop="@7F101114"
  99.         android:layout_alignParentRight="true"
  100.         android:layout_alignParentBottom="true" />
  101. </RelativeLayout>

这样,我们大概确定下来其中的 7F020114 是用于定义按钮背景的 drawable xml,我们搜索一下来验证这个结论:

微信美化详细图文教程9、修改输入框的背景与下划线

找到的确实是一个 xml 文件,我们打开这个 xml 文件:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item
  4.         android:state_selected="true"
  5.         android:drawable="@7F02011A" />
  6.     <item
  7.         android:state_checked="true"
  8.         android:drawable="@7F02011A" />
  9.     <item
  10.         android:state_focused="true"
  11.         android:drawable="@7F02011A" />
  12.     <item
  13.         android:state_pressed="true"
  14.         android:drawable="@7F02011A" />
  15.     <item android:drawable="@7F020119" />
  16. </selector>

有了上一个改语音按钮的基础,这一个 xml 里的内容就很明显了,倒数第二行定义的是平时的样子,其余的是按压、选中的样子,分别按 ID 找到这两个图,将平时的替换为 1*1 透明图,按压的替换为纯色图片即可,替换后重启微信:

微信美化详细图文教程9、修改输入框的背景与下划线

基本就还算过得去了,现在再把发送按钮改一改,在上面对布局文件进行分析的时候已经看出来「发送」按钮具体是需要改哪一个按钮了,按部就班找到 drawable xml 并定位到图片然后替换图片即可,这里不再详细演示,把代码再贴一次好了:

  1. <TextView
  2.        android:textSize="@7F0C0109"
  3.        因为我想替换成一个发送的图片,所以文字就不想要了,和隐藏底栏文字一样,把文字的大小调整为0dp即可
  4.        android:textColor="@7F0F02E0"
  5.        android:gravity="center"
  6.        android:layout_gravity="right"
  7.        android:id="@7F100DB8"
  8.        android:background="@7F020117"
  9.        同样,上一行也定义了background,并且调用的是drawable资源,但是这一段的开头是TextView,基本可以断定是「发送」按钮,而不是选择表情的按钮
  10.        android:visibility="gone"
  11.        android:layout_width="wrap_content"
  12.        android:layout_height="@7F0C025A"
  13.        android:minWidth="60dp"
  14.        android:minHeight="@7F0C014D"
  15.        android:text="@7F0801A0"
  16.        android:layout_alignTop="@7F101114"
  17.        android:layout_alignParentRight="true"
  18.        android:layout_alignParentBottom="true" />

这样做完之后基本就完成了底部的修改

微信美化详细图文教程9、修改输入框的背景与下划线

去掉输入框下划线

我们可以看到输入框还有一个很影响观感的下划线,我们最好把它给去掉

微信美化详细图文教程9、修改输入框的背景与下划线

回到输入框的布局文件,g0.xml,经过一个简单的查找就可以把下面这一段揪出来:

  1. <com.tencent.mm.ui.widget.MMEditText
  2.     android:textColor="@7F0F004E"
  3.     android:layout_gravity="bottom"
  4.     android:id="@7F100441"
  5.     android:layout_marginTop="8dp"
  6.     android:maxHeight="@7F0C007E"
  7.     android:minHeight="@7F0C007F"
  8.     android:hint="@null"
  9.     android:singleLine="false"
  10.     android:layout_weight="1"
  11.     android:inputType="textCapSentences|textMultiLine"
  12.     style="@style/MMEditText$7F0D018E" />
  13. </LinearLayout>

我们重点看最后的 style="@style/MMEditText$7F0D018E" 这一行,我在之前也有提到 style 是定义了被反复调用的样式,那么这个 style 指向的其实就是微信几乎所有的输入框的样式,我们按照它所给的 7F0D018E 这个 ID 去搜索会发现它指向一个 style,而在 MT 管理器中,style 里的条目打开是这样子的:

微信美化详细图文教程9、修改输入框的背景与下划线

是的,都是一些不明所以的内容,而且这个样式的名字也被混淆了,并不是 MMEditText,我们再来看看 PC 端反编译后的 /value/styles.xml 中,这个样式长什么样子:

微信美化详细图文教程9、修改输入框的背景与下划线

这样才能让人看得懂啊.. 各个值分别定义的是什么属性都一目了然了,而 MT 管理器的视图下看不到每一个条目分别定义的属性,也无法增加属性,这也是 MT 局部反编译的局限性

所以说还是希望大家能够从一开始修改的时候就直接用 APKDB 反编译再回编译一次,省的各种混淆看的心烦,能取消一点混淆就取消一点吧 (这里的 MMEditText 就是在反编译过程中被重命名的一部分内容)

我们看到它的 background 属性是 drawable/ez,我们到 k 文件夹下 (也就是实际的 drawable 文件夹),找到这个 ez.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item
  4.         android:state_focused="true"
  5.         android:drawable="@7F0203BE" />
  6.     <item android:drawable="@7F0203BF" />
  7. </selector>

然后分别把两个 ID 指向的文件替换成透明图片即可,这里不再演示了。

weinxin
微信主题定制
主题定制、壁纸查找等各种微信相关问题,请扫二维码或添加792541152咨询。
微信主题网

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: