Nine-Patch使用方法

转载 2015年07月10日 14:36:32

  传统UI开发中,如果背景的大小不一样,一般需要为每种大小都制作一张图片,这在button中尤为明显。当然我们也可以一小块一小块水平重复的画,也可 以垂直的话。在android中专门有一种叫nine patch图片(以 9.png结尾)来解决背景大小不一样时,只用一张背景图片。

     用自带的tools/draw9patch.bat 打开一张png图片,我们可以在png图片最外面的空格画一个像素宽的黑线。左边是编辑区,在左边的图中,左边黑线的高度决定了垂直拉升时的扩展区域,也 即当垂直拉伸时,只有这个区域的图片会被拉伸。同理图片上边的黑线长度决定了水平拉升时的扩展区域。右边区域是拉升的效果图,从上之下分别为垂直拉伸,水 平拉伸,以及两个方向的拉升。该工具提供了所见即所得的nine patch png编辑方式 。

android nine patch draw

把编辑后的png保存为 9.png到工程目录的res/drawable目录下,如果你的9.png中没有黑线,那么eclipse是会报错的。

效果图如下。从中我们也可以理解为什么叫 nine patch,相当于把一张png图分成了9个部分,分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的状态,而2条水 平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指定的区域做拉伸。结果是图片不会走样

9.png


NinePatch是一種「可延展」的PNG圖檔。NinePatch圖檔的用途是製作「可隨文字大小縮放」的圖片,如圖1。

ninepatch-1.png
圖1: 文字背景可隨著文字大小縮放

NinePatch是很有用的圖片格式,可做為widget的「背景圖」。如圖1的範例,其應用程式的設計如下:

  • 文字部份使用TextView元件
  • 使用TextView的XML attribute來設定文字大小
  • 使用TextView的XML attribute來設定一張背景圖
  • 使用NinePatch圖片做為背景圖,如此一來背景圖就可以隨著文字大小縮放

首先,第一個工作就是「製作NinePatch圖檔」,方式如下。

Step 1. 準備一張原始的PNG圖檔,如圖2。

ninepatch-2.png
圖2: 原始PNG圖檔(arrow.png)

Step 2. 啟動Android提供的draw9patch工具,直接執行Android SDK tools/目錄下的draw9patch執行檔即可,如圖3。

ninepatch-3.png
圖3: Android SDK提供的draw9patch工具(點擊看原圖)

Step 3. 開啟原始PNG圖檔,編輯圖檔,如圖4。

ninepatch-4.png
圖4: 開始編輯圖檔(點擊看原圖)

如何編輯NinePatch圖檔

NinePatch圖檔的製作方式是「繪製二條線」,分別在原始圖檔的上方與左方繪出二條「黑線」,黑線所交集的區域即為「可延展」區域。如下圖的粉紅色區域。

ninepatch-5.png
圖5: 定義延展區

「可延展區」是Android框架用來擺放文字的區域,換句話說,文字(TextView)只會被放置在粉紅色區域,並且擺放的原則是「對準粉紅區域的中心點」,即上下置中、左右也置中。非「可延展區」,即綠色部份,並不會隨著文字的大小縮放。所以:

1. 綠色區域是固定大小區域
2. 粉紅色區域是可延展區域、文字擺放於此

圖中的「二條黑線」是怎麼畫出來的呢?方式如下。

Step 4. 移動「Zoom」調整圖檔比例,讓「斑馬線」的大小能適中,如圖6。

ninepatch-6.png
圖6: 調整比例

Step 7: 畫黑線

斑馬線是用來畫黑線的區域,怎麼畫黑線呢?用滑鼠點斑馬線就可以了。要怎麼刪除黑線上?按住「Shift」再點斑馬線即可。斑馬線很不好點,所以如果不是要特意訓練操作滑鼠的技巧以及考驗眼力,善用「Zoom」功能可以幫助黑線的繪製。

勾選「Show patches」選項,即可顯示粉紅色區域,如圖7。

ninepatch-7.png
圖7: 即時顯示可延展區

在draw9patch的右邊也會有縮放的展示圖。

Step 8: 完成NinePatch圖檔

儲存完成的NinePatch圖檔,draw9patch會自動將圖檔的副檔名儲存為*.9.png。完成NinePatch圖檔後,就可以開始寫程式了。

 

開始寫程式: HelloNinePatch

範例HelloNinePatch的實作方式如下。

Step 1. 建立一個新的Android專案,命名為HelloNinePatch。

Step 2. 將arrow.9.png托曳(drag)到HelloNinePatch專案裡的「res/drawable」目錄下。如圖1。

ninepatch-res-1.png
圖1: 將arrow.9.png放進res/drawable資料夾

Step 3. 修改UI(res/layout/main.xml),設計出上一篇教學(#30)裡的圖2畫面。main.xml的內容如下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="small world"
    android:textSize="12sp"
    android:background="@drawable/arrow"
    />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="big world"
    android:textSize="24sp"
    android:background="@drawable/arrow"
    />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="super world"
    android:textSize="48sp"
    android:background="@drawable/arrow"
    />
</LinearLayout>

這裡的做法是,在UI上擺放Button元件,並設定Button上的文字及大小。透過「android:background」屬性的設定,我們將Button的背景設定為「@drawable/arrow」,即「drawable資源(drawable/目錄下)裡的arrow圖檔」,Android框架會去找到arrow.9.png檔案。

因為arrow.9.png是一張NinePatch圖檔,因此會隨著Button上的文字大小延展。

Step 4: 完成HellNinePatch

程式碼不需要做任何修改,直接執行HelloNinePatch專案即可。

C++ 中 子类转父类 和 父类转子类 的方法 ---<C++Primer 5版>

15.3. Conversions and Inheritance 15.3. 转换与继承 Understanding conversions between base a...

Android 开发 之 JNI入门 - NDK从入门到精通

NDK项目源码地址 :  -- 第一个JNI示例程序下载 : GitHub - https://github.com/han1202012/NDKHelloworld.git  -- Java传递...

Android Studio中使用.9(Nine Patch)图片

本文主要结合Android Studio讲述一下.9图片的原理与使用。原理 在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格...

Android Studio中如何制作和使用.9.png(Nine Patch)图片

原理在Android应用开发计程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式...

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

近期在学习制作聊天的界面,设计到了图片的拉伸问题等等,参考了部分书籍学习了制作Nine-Patch图片。 首先先看不使用Nine_patch的代码与效果: xmlns:tools="http:...

Draw9patch使用方法

  • 2012年04月13日 15:38
  • 95KB
  • 下载

二进制patch工具xdelta的使用方法

Xdelta 是一个二进制的diff 工具[同时又兼具了patch 功能],diff 和patch 是Unix 世界里很有用的一对工具:我们通常将它们结合起来实现生成补丁,应用补丁的目的。如果要处理的...

基于linux的patch生成及使用方法

1. 对单个文件打patch old.txt为原文件,new.txt 为已修改后的文件,现在要做的是:制作patch,更新old.txt文件 (1)查看文件内容 [wln@localhost 0...
  • huluboy
  • huluboy
  • 2017年04月07日 14:47
  • 297

Draw 9-Patch使用方法

使用Draw 9-patch工具可以允许你容易的创建NinePatch图像,以下步骤指导你使用Draw 9-patch工具,由PNG图像创建NinePatch图像。 (1)   在你的电脑上找到...

git简介及使用方法&Patch功能

一、git简介及安装 1、git简介 Git 是用于 Linux 内核开发的版本控制工具。与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Nine-Patch使用方法
举报原因:
原因补充:

(最多只允许输入30个字)