.9这个东东个人之前很少用到。很少去做聊天的这种界面,所以用的并不多。用9patch文件的主要目的,个人认为主要是图片本身会做动态拉伸,当然不能是那种“花里胡哨”的图片,那种你做.9文件也没什么卵用呀-拉伸肯定会变形的。。。。
就比如这种聊天界面:
我们重点关注下,红色部分:
不管我们的文字有多少行,由于我们是设置的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>
看图片:
看文字不太多的效果:
再看文字比较多的效果:
尖尖的地方已经变形了哇。有木有......这就是为什么我们需要引入.9文件了....
而且你要设置padding啥的才能算是显示正常。。。
当然不用.9图片也是可以的。怎么做? 采用奇淫技巧“把尖尖单独抠图,然后布局在聊天背景的左上角部分,刚刚覆盖一点点 - 貌似也可以保证不变形。 But, 如果你的背景不是像这种纯色,而是多姿多彩的,调试起来就麻烦了。还是别闹了....”
那步入正题吧。。简单了解下.9后我们就以个人理解最简单的方式制作....
随便粘贴点概念吧....哼。。
总得理解个人认为是两点:
1。 可以设置拉伸区域,进而某些区域不参与拉伸,进而不出现拉伸情况
2。 可以设置内容显示区域 - 假使图片底部有只“小狗”, 你可以设置内容显示在“小狗”下面。 以上设置都可以替代TextView的padding效果,甚至比padding还能更好的控制效果...
Now,let's start it....
我们就拿ic_luncher.png来说吧。。
1.首先选中这张图片,然后点击create p-patch file。我们把它保存到drawable下面吧,然后改个名哈:
我的目的就是,黑色区域不变形, 红色区域显示文字,而且这个文字要保持在机器人的下面:
2.网上有很多关于.9制作的文章,有的是利用工具做的,其实AS还是蛮好的。有的会讲很多原理啥的。。如果你比较着急,想要快速通过尝试来了解,可能看起那些文章相对有点费劲。我们其实只需要了解制作的一点基础概念就可以上手了,然后出问题了再调试调试,这样应该还是可以能比较快的搞定!
当你把鼠标点击该.9文件时,可以发现几条细细的黑线, 我们就利用这个线来拖动产生黑边?后面慢慢道来...
2.1 然后了解一个概念就可以实现显示区域控制了:
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>
我们实际做一下:
看效果 - 没毛病吧?
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>
你已经可以发现这个时候文字已经不可能在我们圈定的范围内了。。因为文字太多了, 图片拉伸了已经导致我们的范围失效了,唯有左右拉伸方可显示....能撑到图片撑不动为止....
3. 这个时候我们该考虑做拉伸区域处理了...
我们实际做一下:
3.1 此时我们再来看效果 - 此时不管怎么拉伸都能保证文字区域,同时机器人也不会变形。而且保持在“右侧”;
3.2 当然如果你拉伸区域设置的是右侧,自然机器人就在左侧
来,我们不厌其烦的操作一下
<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>
<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文件以前确实很陌生....慢慢来补吧,不慌....
对了。后面一有空,我会补一下做项目的知识,同时纠结一些之前的文章的问题(之前确实没有问题,不过随着项目版本更新和新项目,发现了一些问题。想特别再新增一篇文章来说明下: 一个是推送进入详情的问题, 一个是关于键盘隐藏显示的问题...)