.9这个东东个人之前很少用到。很少去做聊天的这种界面，所以用的并不多。用9patch文件的主要目的，个人认为主要是图片本身会做动态拉伸，当然不能是那种“花里胡哨”的图片，那种你做.9文件也没什么卵用呀-拉伸肯定会变形的。。。。
就比如这种聊天界面：
image
我们重点关注下，红色部分：
image
不管我们的文字有多少行，由于我们是设置的Text的background，所以文字行数将影响图片的宽度/高度。 所以正常情况下做拉伸会变形，我们看看变形情况：
看布局：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--0dp为什么是0dp？你约束条件既然设置了左右约束，如果再用wrap_content -
将导致你的左右margin无效，你可以设置为match_parent-->
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@mipmap/chat_bg_01"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:text="你好你皮虾你皮皮虾虾你虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾你好，皮皮虾"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
看图片：
image
看文字不太多的效果：
image
再看文字比较多的效果：
image
尖尖的地方已经变形了哇。有木有......这就是为什么我们需要引入.9文件了....
而且你要设置padding啥的才能算是显示正常。。。
当然不用.9图片也是可以的。怎么做？ 采用奇淫技巧“把尖尖单独抠图，然后布局在聊天背景的左上角部分，刚刚覆盖一点点 - 貌似也可以保证不变形。 But， 如果你的背景不是像这种纯色，而是多姿多彩的，调试起来就麻烦了。还是别闹了....”
那步入正题吧。。简单了解下.9后我们就以个人理解最简单的方式制作....
随便粘贴点概念吧....哼。。
image
image
总得理解个人认为是两点：
1。 可以设置拉伸区域，进而某些区域不参与拉伸，进而不出现拉伸情况
2。 可以设置内容显示区域 - 假使图片底部有只“小狗”， 你可以设置内容显示在“小狗”下面。 以上设置都可以替代TextView的padding效果，甚至比padding还能更好的控制效果...
Now，let's start it....
我们就拿ic_luncher.png来说吧。。
1.首先选中这张图片，然后点击create p-patch file。我们把它保存到drawable下面吧，然后改个名哈:
image
image
我的目的就是，黑色区域不变形， 红色区域显示文字，而且这个文字要保持在机器人的下面：
image
2.网上有很多关于.9制作的文章，有的是利用工具做的，其实AS还是蛮好的。有的会讲很多原理啥的。。如果你比较着急，想要快速通过尝试来了解，可能看起那些文章相对有点费劲。我们其实只需要了解制作的一点基础概念就可以上手了，然后出问题了再调试调试，这样应该还是可以能比较快的搞定！
当你把鼠标点击该.9文件时，可以发现几条细细的黑线， 我们就利用这个线来拖动产生黑边？后面慢慢道来...
image
2.1 然后了解一个概念就可以实现显示区域控制了：
image
2.2 了解上面目前足矣。我们这就开干可好？
2.2.1 首先我们把显示区域设置下看看是否显示区域已经被我们安排了？
先代码 - 为了让你们相信，我特意加了一个不带.9图片背景的文本控件，方便对比哈...
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--wrap_content为什么是wrap_content？我们想要的显示效果是内容自适应，有个居中效果即可
这个时候不能是0dp哟！0dp相当于match_parent - 你设置了左右约束+0dp就相当于宽度由约束决定【
也就是除了margin之外的区域都是你的呢.....了解过绘制原理和约束的童鞋应该知道...关于约束，
多做点例子和项目实战就可以比较融汇的掌握...】-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="@drawable/ic_launcher_sb"
android:text="你好你"
android:gravity="left|top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="你好你"
android:gravity="left|bottom"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
我们实际做一下：
image
看效果 - 没毛病吧?
image
2.2.2 But, 这是我们图片本身不做缩放，或者说文本本身没有太多（太多自然也就会导致图片缩放，一个说法）。。。
现在文字多点看看妮（顺便测试的控件什么的都给去掉吧）
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--wrap_content为什么是wrap_content？我们想要的显示效果是内容自适应，有个居中效果即可
这个时候不能是0dp哟！0dp相当于match_parent - 你设置了左右约束+0dp就相当于宽度由约束决定【
也就是除了margin之外的区域都是你的呢.....了解过绘制原理和约束的童鞋应该知道...关于约束，
多做点例子和项目实战就可以比较融汇的掌握...】-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="@drawable/ic_launcher_sb"
android:text="你好你你好你你好你你好你你好你你好你"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
你已经可以发现这个时候文字已经不可能在我们圈定的范围内了。。因为文字太多了， 图片拉伸了已经导致我们的范围失效了，唯有左右拉伸方可显示....能撑到图片撑不动为止....
image
3. 这个时候我们该考虑做拉伸区域处理了...
image
我们实际做一下：
image
3.1 此时我们再来看效果 - 此时不管怎么拉伸都能保证文字区域，同时机器人也不会变形。而且保持在“右侧”；
image
3.2 当然如果你拉伸区域设置的是右侧，自然机器人就在左侧
来，我们不厌其烦的操作一下
image
<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">左右拉伸区域设置到右侧</figcaption>
image
<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">左右拉伸时只有右侧区域拉伸，左侧不参与拉伸</figcaption>
4. 其实到这里，我想大家或者说我应该明白一些事情了。内容区域、拉伸区域：内容区域靠右侧黑边线，底部黑边线共同决定， 左侧黑边线决定上下拉伸区域，顶部黑边线决定左右拉伸区域。 简单操作操作应该能基本使用了。。 至于说像qq那样的聊天的背景，我想应该问题不大了....
肯定建议说做简单纯色背景那种， 不要太花里胡哨....当然有那个需求也行。 尽量满足......9文件以前确实很陌生....慢慢来补吧，不慌....
对了。后面一有空，我会补一下做项目的知识，同时纠结一些之前的文章的问题（之前确实没有问题，不过随着项目版本更新和新项目，发现了一些问题。想特别再新增一篇文章来说明下： 一个是推送进入详情的问题， 一个是关于键盘隐藏显示的问题...）
网友评论