手把手让你爱上Android sdk自带“9妹”(9patch 工具)

前几天群成员讨论过关于9patch的工具【我比较喜欢喊它9妹子,西西(*^_^*)】、而后研究了一下,比较简单可是很实用的一个Android sdk 自带工具、这里给你们作一个分享下经验!android

 

  1.什么是“9妹”(9patch)?canvas

它是一个对png图片作处理的一个工具,可以为咱们生成一个"*.9.png"的图片;编辑器

  2.何为"*.9.png"?工具

所谓"*.9.png"这是Android os里所支持的一种特殊的图片格式,用它能够实现部分拉伸;这种图片是通过”9妹“进行特殊处理过的,若是不处理的话,直接用PNG图就会有失真,拉伸不正常的现象出现。字体

  3.它的用途是?this

       说到用途,这种特殊格式的png图,我也看了网上的相关文章但都是用一个能自适应的button举例子!(以下图)清一色抄袭.. - -、code

          (此实例我们直接无视掉,在后面我会给你们灌输游戏中实例)orm

 这个例子是指当button上的字体大小改变,那么文字底下的png图也会自动适应文字。对象

 这彷佛代表作Android 软件应用 使用一些组件的的时候会时经常使用到;游戏

       4.那么实际在游戏中到底如何使用呢?什么状况下去使用呢?

   ....固然啦,身为作游戏我必定要”9妹“利用在我们游戏中才行,否则岂不是白研究了、通过思考忽然想到了一些状况,而且发现“9妹”确实在游戏开发中占有必定的份量!下面咱们来先熟习“9妹”工具,而后再跟你们举例,贴图来讲明其用途、毕竟有图有真相 呵呵~

 

启动9妹:

在你Android SDK 路径下 X:/android sdk/tools ,你会找到一个 【draw9patch.bat】,没错这就是9妹啦、官方名 NinePatch ;

         \

 

提示导入一张png图片,而后真正进入"9妹"的操做界面(以下图):     (图1)

 

      \

 

 

序列 ① :在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,若是彻底消除该内容则图片拉伸后是没有变形的,也就是说,无论如何缩放图片显示都是良 好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来讲只要色差不是太大不用考虑这个设置。) 

序列 ② :区域是导入的图片,以及可操做区域。

序列 ③ :这里 zoom:的长条bar 是对导入的图放大缩小操做,这里的放大缩小只是为了让使用者更方便操做,毕竟是对像素点操做比较费眼,下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操做,能够看到操做后的图片拉伸后的效果。

序列 ④: 区域这里从上到下,依次为:纵向拉伸的效果预览、横向拉伸的效果预览,以及总体拉伸的效果预览

序列 ⑤: 这里若是你勾选上,那么当你鼠标放在 ② 区域内的时候而且当前位置为不可操做区域就会出现lock的一张图,就是显示不可编辑区域 ;

序列 ⑥: 这里勾选上,那么在④ 区域中你就会看到当前操做的像素点在拉伸预览图中的相对位置和效果。

序列 ⑦: 在编辑区域显示图片拉伸的区域;

 

如何操做:

                   鼠标左键选取须要拉伸的像素点;  shift+鼠标左键取消当前像素点。

 

 

操做区域:

                                    \

     你们看到导入的png图片默认周围多了一像素点,也就是这一圈一像素点就是我们的可操做区域。由于方和右方可操做区域是指定内容的显示区域,属于可选区域,可不予理会;可是要注意内容区域的标记不能有间断,也就是说标记要连续且仅有一处,不然.9.png图片在放入项目下会报错。

      主要你们注意Left 和 top 操做区域;

 

     Top操做区域的一排像素点,表示横向拉伸的像素点; 

     Left操做区的一排像素点,表示纵向拉伸的像素点;

 

 

下图是我对图片的操做:

                                            (图2)

      \

 

 

你们看到上方和左边的黑色像素了么?对,这些是我手动操做的地方,我这里是想让此png图像拉伸操做的时候,只是中间区域被拉伸。选择上方中间区域是为了横向拉伸的时候选取的拉伸像素点,左边则是纵向拉伸的;

  

那么你们如今回头看一眼(图1)而后对比(图2),看到区别了吧!很明显,(图1)咱们没有任何操做,默认总体拉伸,那么拉伸的效果很明显的失真了...而(图2)咱们指定了拉伸的像素点因此只是中间的被拉伸,图片的花边咱们保留不拉伸这样看起来就好太多啦 娃哈哈、

而后经过“9妹”就能够保存出来一张“*.9.png”图片,咱们放在android 项目的res 下的 drawable 下就能够拉!

 

如今我就能够跟你们讲下使用“*.9.png”的好处:

 

  在咱们手机游戏开发的过程当中,咱们最关系的是生成的安装文件、好比j2me 的jar 包,塞班的sis、sisx 以及我们andrid中的apk都但愿打包后的包越小越好、虽然如今的手机趋向于智能了,可是毕竟手机的容量和内存仍是有限、身为移动设备开发者的咱们对此都很看重,那么经过"9妹"处理后的图片咱们就能够省去很多的内存和容量。

  1. 省精力和时间!

    若是咱们有一张50*50的相似上面那种带花边的png图片,那么咱们在android或者大分辨率的机器上使用的画,确定须要对其处理,那么要不就是让美工的mm们给我们从新作一张,那么经过"9妹"处理获得的“*.9.png”就会省去美工的负担了。

  2.省内存!

   若是不想用代码来对其小图进行缩放来再次使用(由于考虑会失真),那么可能会多加了图片,这样一来游戏包的大小就会增长了,几K—几十K不等,而利用"9妹"处理的就省去了这些麻烦。

  3.减小代码量! 

  有些童鞋该说啦,我用代码同样能实现(图2)的效果不失真,OK,我也知道。当初我在J2ME平台作RPG的时候也是利用设置可视区域等代码来实现的,可是若是你用“.9.png”的方式就更简单!!!

 

很少吹 “9妹”的好处,下面咱们来看看代码如何实现此格式的方式和效果吧!

 

 

 

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

package com.himi; 

import android.content.Context; 

import android.graphics.Bitmap; 

import android.graphics.BitmapFactory; 

import android.graphics.Canvas; 

import android.graphics.Color; 

import android.graphics.NinePatch; 

import android.graphics.Paint; 

import android.graphics.RectF; 

import android.util.Log; 

import android.view.SurfaceHolder; 

import android.view.SurfaceView; 

import android.view.SurfaceHolder.Callback; 

public class MySurfaceView extends SurfaceView implements Callback, Runnable { 

    private Thread th = new Thread(this); 

    private SurfaceHolder sfh; 

    private Canvas canvas; 

    private Paint paint; 

    private Bitmap bmp_old; 

    private Bitmap bmp_9path; 

    private NinePatch np; 

    public MySurfaceView(Context context) { 

        super(context); 

        this.setKeepScreenOn(true); 

        bmp_old = BitmapFactory.decodeResource(getResources(), R.drawable.himi_old); 

        bmp_9path = BitmapFactory.decodeResource(getResources(), R.drawable.himi_9path); 

        np = new NinePatch(bmp_9path, bmp_9path.getNinePatchChunk(), null); 

        //建立一个ninePatch的对象实例,第一个参数是bitmap、第二个参数是byte[],这里其实要求咱们传入 

        //如何处理拉伸方式,固然咱们不须要本身传入,由于“.9.png”图片自身有这些信息数据, 

        //也就是咱们用“9妹”工具操做的信息! 咱们直接用“.9.png”图片自身的数据调用getNinePatchChunk()便可 

        //第三个参数是图片源的名称,这个参数为可选参数,直接null~就OK~ 

        sfh = this.getHolder(); 

        sfh.addCallback(this); 

        paint = new Paint(); 

        paint.setAntiAlias(true); 

        setFocusable(true); 

    } 

    public void surfaceCreated(SurfaceHolder holder) { 

        Log.v("Himi", "surfaceCreated"); 

        th.start(); 

    } 

    /**

     * @author Himi

     */ 

    public void draw() { 

        canvas = sfh.lockCanvas(); 

        canvas.drawColor(Color.BLACK); 

        RectF rectf_old_two = new RectF(0, 50, bmp_old.getWidth() * 2, 120 + bmp_old.getHeight() * 2);//备注1 

        RectF rectf_old_third = new RectF(0, 120 + bmp_old.getHeight() * 2, bmp_old.getWidth() * 3, 

                140 + bmp_old.getHeight() * 2 + bmp_old.getHeight() * 3); 

        // --------下面是对正常png绘画方法----------- 

        canvas.drawBitmap(bmp_old, 0, 0, paint); 

        canvas.drawBitmap(bmp_old, null, rectf_old_two, paint); 

        canvas.drawBitmap(bmp_old, null, rectf_old_third, paint); 

        RectF rectf_9path_two = new RectF(250, 50, 250 + bmp_9path.getWidth() * 2, 90 + bmp_9path.getHeight() * 2); 

        RectF rectf_9path_third = new RectF(250, 120 + bmp_9path.getHeight() * 2, 250 + bmp_9path.getWidth() * 3, 

                    140 + bmp_9path.getHeight() * 2 

                + bmp_9path.getHeight() * 3); 

        canvas.drawBitmap(bmp_9path, 250, 0, paint); 

        // --------下面是".9.png"图像的绘画方法----------- 

        np.draw(canvas, rectf_9path_two); 

        np.draw(canvas, rectf_9path_third); 

        sfh.unlockCanvasAndPost(canvas); 

    } 

    public void run() { 

        // TODO Auto-generated method stub 

        while (true) { 

            draw(); 

            try { 

                Thread.sleep(100); 

            } catch (Exception ex) { 

            } 

        } 

    } 

    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { 

        Log.v("Himi", "surfaceChanged"); 

    } 

    public void surfaceDestroyed(SurfaceHolder holder) { 

        Log.v("Himi", "surfaceDestroyed"); 

    } 

}   

 

下图是模拟器中的效果图、

 

 

                       \

 

左边是正常png的缩放不一样大小的状况,右边是我们的9妹处理过的“*.9.png”、娃哈哈,怎么样  效果明显不同吧!

 

 

好啦,到这里就结篇吧,挺累的 写了三个多小时了....... 但愿你们之后多多的利用 “9妹”哦