android Nine-Patch的使用(制作聊天界面必学)

近期在学习制作聊天的界面,设计到了图片的拉伸问题等等,参考了部分书籍学习了制作Nine-Patch图片。

首先先看不使用Nine_patch的代码与效果

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/frame_left2"
android:text="hello!I‘am xujiajia 654684684613"
android:textSize="20sp"
android:layout_marginRight="50dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/frame_right2"
android:textSize="30sp"
android:text="hello!I‘am linghang"
android:layout_marginLeft="50dp"/>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/Next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="NextActivity"
/>
</LinearLayout>
</LinearLayout>

再看一下使用了Nine_Patch的代码以及效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/frame_left3"
android:text="hello!I‘am xujiajia 654684684613"
android:textSize="20sp"
android:layout_marginRight="50dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/frame_right3"
android:textSize="30sp"
android:text="hello!I‘am linghang"
android:layout_marginLeft="50dp"/>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/Return"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Return"
/>
</LinearLayout>
</LinearLayout>

可以很清楚的看到,两者在代码上只有在background中使用到的图片不同,其他的都一样,这就是Nine_patch的作用了。

首先先看一下drawable中的图片:

使用Nine_patch处理过的图片名字后都会有“.9”,但是在使用的时候不需要写出来,比如上述代码:

android:background="@drawable/frame_left3"

android:background="@drawable/frame_right3"

接下来就是讲下 Nine_patch的使用。

首先先要找到Nine_patch。

它位于SKD文件夹中的tools中,名为draw9patch.bat,找到后双击打开即可。

以下是在我电脑中的目录:D:\安卓环境\adt-bundle-windows-x86_64-20140702\sdk\tools

这是效果:

另外是show一下做的图片的前后对比:

                            

在png的图片中,仅仅就是多了几条小黑条,但是在layout的图片使用中就完全不同了。

(本人比较愚笨,在此点上纠结了很久,一直在纠结为什么做过的图片没有什么变化,使用之后才明白其理)

小黑条自己打开文件后鼠标点点就可以了,在此说一下上下左右四面的小黑条的不同作用。

左边线条:当图片进行纵向拉伸时,由此线条从图片左边水平位移到图片右边所形成的区域都是可以进行纵向拉伸的,此区域外则不进行拉伸,保留原来效果;

上边线条:当图片进行水平拉伸时,由此线条从图片上边垂直位移到图片下边所形成的区域都是可以进行横向拉伸的,此区域外则不进行拉伸,保留原来效果;

(简单地说左边和上边的线条就是决定你图片拉伸的区域)

右边线条:控制图片填充内容的垂直padding留白;

下边线条:控制图片填充内容的水平padding留白;

(这两点就是确定你的文字所成列的区域)

时间: 2024-10-10 00:03:52

android Nine-Patch的使用(制作聊天界面必学)的相关文章

Android笔记自定义View之制作表盘界面

前言 最近我跟自定义View杠上了,甚至说有点上瘾到走火入魔了.身为菜鸟的我自然要查阅大量的资料,学习大神们的代码,这不,前两天正好在郭神在微信公众号里推送一片自定义控件的文章--一步步实现精美的钟表界面.正适合我这种菜鸟来学习,闲着没事,我就差不多依葫芦画瓢也写了一个自定义表盘View,现在纯粹最为笔记记录下来.先展示下效果图: 下面进入正题 自定义表盘属性 老规矩,先在attrs文件里添加表盘自定义属性 <declare-styleable name="WatchView"&

xib制作聊天界面

仿QQ聊天布局 目前查到的资料大部分都是这样的效果,而且设计的思路都是一样的, 一个tableview使用一个自定义的cell,当cell成功创建以后,依靠一个中介类传递的数据来判断到底是左边还是右边发送的数据,然后重新绘制内容或者布局. 但是对于习惯xib来说,并不擅长代码适配和布局,遂根据思路调整 首先界面 然后是自定义的cell 虽然看起来很奇怪 但是根据思路的话这是一种简单粗暴的方法,这个cell其实是两边单独显示时的效果合并在一起的,通过数据的中介类可以知道应该需要显示那边,然后隐藏另

Android学习笔记(十二)——实战:制作一个聊天界面

//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Patch图片是一种被特殊处理过的 png 图片,能够指定哪些区域可以被拉伸而哪些区域不可以.一般用来作为聊天信息的背景.在此我们先准备一张png图片.然后在 Android sdk 目录下有一个 tools 文件夹,在这个文件夹中找到 draw9patch.bat文件. 双击打开之后, 在导航栏点击 File→

Android开发学习之路--UI之简单聊天界面

学了很多的ui的知识,这里就来实现个聊天的界面,首先来实现个layout的xml,代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:lay

android#编写一个聊天界面

摘自<第一行代码>——郭霖 既然是要编写一个聊天界面,那就肯定要有收到的消息和发出的消息.上一节中我们制作的message_left.9.png可以作为收到消息的背景图,那么毫无疑问你还需要再制作一张message_right.9.png作为发出消息的背景图.图片都提供好了之后就可以开始编码了,首先还是编写主界面,修改activity_main.xml中的代码,如下所示: <LinearLayout xmlns:android="http://schemas.android.c

Android,iOS打开手机QQ与指定用户聊天界面

在浏览器中可以通过JS代码打开QQ并弹出聊天界面,一般作为客服QQ使用.而在移动端腾讯貌似没有公布提供类似API,但是却可以使用schema模式来启动手机QQ. 以下为具体代码: Android: String url="mqqwpa://im/chat?chat_type=wpa&uin=123456"; startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); iOS: UIWebView *webView

android 仿微信聊天界面

一些IM聊天软件我们发现,他的展现形式,是左右分开的形式,而我们的listview很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),它是显示listview中有多少种布局,默认是显示是1,像微信那样聊天界面,是有2种布局方式,:另外一个getItemViewType(),它是在那些item条目中显示那种布局,下面就简单的模拟下微信的聊天界面做法: MainActivity.java

android 仿微信聊天界面,以及语音录制功能

extends:http://104zz.iteye.com/blog/1709840 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" an

Android 仿微信QQ聊天界面

一些IM聊天软件的展现形式是左右分开的形式.比如说,别人给你发的信息全部靠左显示,你自己发给别人的信息全部靠右显示. 而我们的ListView很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),显示ListView中有多少种布局(默认是显示是1),像微信那样聊天界面,是有2种布局方式:另外一个getItemViewType(),可以让不同item条目加载不同的布局,下面就简单的模拟下