Android-.9/9Patch图标制作(AS)

.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文件以前确实很陌生....慢慢来补吧,不慌....

对了。后面一有空,我会补一下做项目的知识,同时纠结一些之前的文章的问题(之前确实没有问题,不过随着项目版本更新和新项目,发现了一些问题。想特别再新增一篇文章来说明下: 一个是推送进入详情的问题, 一个是关于键盘隐藏显示的问题...)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配。 由于Android系统的开...
    知青的叶阅读 1,482评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  • 主啊!是时候了。夏日曾经很盛大。把你的阴影落在日规上,让秋风刮过田野。 让最后的果实长得丰满,再给它们两天南方的气...
    简书蒲公英阅读 218评论 0 3
  • 国庆假期,我回了老家,连续几天的雨,终于在那天的下午停止,但是天还是阴阴的。 雨一停止,我就急不可耐的出去了,只是...
    刑素素阅读 808评论 0 2