Android 九 patch 图片 （.9.png 格式图片) 的特点和制作 How to draw NinePatch images with Photos
Android 9 patch 图片 （.9.png 格式图片) 的特点和制作 How to draw NinePatch images with Photos
1.首先了解一下 NinePatchDrawable
一个NinePatchDrawable图形是一种可伸展图,android会自动调整适应观点的内容,你要把它为背景。例使用NinePatch是使用android按钮背景——按钮必须标准伸展开来适应不同长度的弦。一个NinePatch可画的是一个标准PNG图片,包括额外的1-pixel-wide边境。它必须被保存和延伸,留到.9.png杂志/可画的/目录,你的项目。
边境是用于定义和静态地区的可延伸的形象。你可伸展部份表明画一个(或者更多个)1-pixel-wide黑线(s)在左边和顶层部分的边界。(你可以有很多种可延伸部分像你希望的那样。)可延伸的相对大小的部分不变,所以最大的部分永远是最大的。
你也可以定义一个可选的可画的部分图像(有效,衬垫线画线)在右边,底线。如果一个视图对象设置NinePatch为背景,然后指定观的文本,它会让自身所有的文本内容只有面积内符合规定的权利和底线(如果包括你在内)。如果衬垫线,不包括机器人使用左边和顶层线,以确定这可画的区域。
阐明了不同线路之间的差距,左边和顶层线定义像素的图像可以被复制为了伸展的形象。底部和右线定义相对范围内的图像的内容所允许的范围之内的观点。
2.使用 9-patch drawables – foo.9.png
[1]. 9-patch drawables 的语法跟CSS3 border image 类似
[2]. 根据边缘的像素宽度切割出不同的拉伸区域
[3]. 最好同时提供 mdpi 和 hdpi 的版本
译者注：drawables 在 Android 里面跟 WPF 里面的 Drawing 类似，用于定义一个可绘制的对象，包括位图，刷子，填充颜色或者以上物件的组合等等。所谓 9-patch drawables，就是将一个 drawable 按照定义的 4 个边缘的宽度大小切割成9个区域，包括4个角落，4条边缘和一个中心区域，当把这个 drawable 绘制到一个任意矩形区域时，drawable 的各个区域有不同的拉伸控制（角落不拉伸，横边横向拉伸，竖边竖向拉伸，中心区域横竖向都拉伸）。通常使用 9-patch drawable 一般是为了绘制出比较漂亮的带圆角背景，这样可以避免圆角及边缘被任意拉伸导致变形。当然，如果你的程序里面绘制的图像和目标区域大小完全一样，就不需要那么麻烦，不过以 Android 的状况来说，为了适应多种设备，最好不要事先假设目标区域的像素大小。
3.如何使用SDK自带工具制作.9.png图片
在sdk下tools工具栏有一个draw9patch.bat文件打开后倒入工程需要修改的图片
这个工具分左右栏 左边是图片当前像素 最下面可调试放大倍数 右边是可预览的效果！
接下来是开始制作图片了，用鼠标左键点击图片上的上边 和左边 这个两个面来确定什么部位进行拉伸
IMG style="MARGIN: 0px 10px 0px 0px" title="Android 9 patch 图片 （.9.png 格式图片) 的特点和制作 How to draw NinePatch images with Photoshop - .9.PNG - 爱海涛涛 - Google Android" alt="Android 9 patch 图片 （.9.png 格式图片) 的特点和制作 How to draw NinePatch images with Photoshop - .9.PNG - 爱海涛涛 - Google Android" src="http://img542.ph.126.net/E1Rdq4rJaAcerq6podIvVQ==/1333346964679521105.png">
中间就是你所要红色的框内就是要拉伸的位置 右键可以消除
这样就可以了 生成过后的图片后缀是.9.png
--------------------------------------------
写了一个简单示例：
<Button
android:id="@+id/open_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/box_green"
android:text="木蚂蚁官方团队博客"
android:textColor="#ffffff"/>
<Button
android:id="@+id/open_bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/box_green_2"
android:text="木蚂蚁官方团队博客"
android:textColor="#ffffff"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/computer"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/computer2"
/>
效果图片：
1.首先了解一下 NinePatchDrawable
一个NinePatchDrawable图形是一种可伸展图,android会自动调整适应观点的内容,你要把它为背景。例使用NinePatch是使用android按钮背景——按钮必须标准伸展开来适应不同长度的弦。一个NinePatch可画的是一个标准PNG图片,包括额外的1-pixel-wide边境。它必须被保存和延伸,留到.9.png杂志/可画的/目录,你的项目。
边境是用于定义和静态地区的可延伸的形象。你可伸展部份表明画一个(或者更多个)1-pixel-wide黑线(s)在左边和顶层部分的边界。(你可以有很多种可延伸部分像你希望的那样。)可延伸的相对大小的部分不变,所以最大的部分永远是最大的。
你也可以定义一个可选的可画的部分图像(有效,衬垫线画线)在右边,底线。如果一个视图对象设置NinePatch为背景,然后指定观的文本,它会让自身所有的文本内容只有面积内符合规定的权利和底线(如果包括你在内)。如果衬垫线,不包括机器人使用左边和顶层线,以确定这可画的区域。
阐明了不同线路之间的差距,左边和顶层线定义像素的图像可以被复制为了伸展的形象。底部和右线定义相对范围内的图像的内容所允许的范围之内的观点。
2.使用 9-patch drawables – foo.9.png
[1]. 9-patch drawables 的语法跟CSS3 border image 类似
[2]. 根据边缘的像素宽度切割出不同的拉伸区域
[3]. 最好同时提供 mdpi 和 hdpi 的版本
译者注：drawables 在 Android 里面跟 WPF 里面的 Drawing 类似，用于定义一个可绘制的对象，包括位图，刷子，填充颜色或者以上物件的组合等等。所谓 9-patch drawables，就是将一个 drawable 按照定义的 4 个边缘的宽度大小切割成9个区域，包括4个角落，4条边缘和一个中心区域，当把这个 drawable 绘制到一个任意矩形区域时，drawable 的各个区域有不同的拉伸控制（角落不拉伸，横边横向拉伸，竖边竖向拉伸，中心区域横竖向都拉伸）。通常使用 9-patch drawable 一般是为了绘制出比较漂亮的带圆角背景，这样可以避免圆角及边缘被任意拉伸导致变形。当然，如果你的程序里面绘制的图像和目标区域大小完全一样，就不需要那么麻烦，不过以 Android 的状况来说，为了适应多种设备，最好不要事先假设目标区域的像素大小。
3.如何使用SDK自带工具制作.9.png图片
在sdk下tools工具栏有一个draw9patch.bat文件打开后倒入工程需要修改的图片
这个工具分左右栏 左边是图片当前像素 最下面可调试放大倍数 右边是可预览的效果！
接下来是开始制作图片了，用鼠标左键点击图片上的上边 和左边 这个两个面来确定什么部位进行拉伸
IMG style="MARGIN: 0px 10px 0px 0px" title="Android 9 patch 图片 （.9.png 格式图片) 的特点和制作 How to draw NinePatch images with Photoshop - .9.PNG - 爱海涛涛 - Google Android" alt="Android 9 patch 图片 （.9.png 格式图片) 的特点和制作 How to draw NinePatch images with Photoshop - .9.PNG - 爱海涛涛 - Google Android" src="http://img542.ph.126.net/E1Rdq4rJaAcerq6podIvVQ==/1333346964679521105.png">
中间就是你所要红色的框内就是要拉伸的位置 右键可以消除
这样就可以了 生成过后的图片后缀是.9.png
--------------------------------------------
写了一个简单示例：
<Button
android:id="@+id/open_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/box_green"
android:text="木蚂蚁官方团队博客"
android:textColor="#ffffff"/>
<Button
android:id="@+id/open_bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/box_green_2"
android:text="木蚂蚁官方团队博客"
android:textColor="#ffffff"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/computer"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/computer2"
/>
效果图片：