17_android_ .9.PNG图片的制作及使用_.9.png生成工具

.9.png介绍说明    

    .9.PNG是安卓开发里面的一种特殊的图片，这种格式的图片通过ADT自带的编辑工具生成，使用九宫格切分的方法，使图片支持在android 环境下的自适应展示。

            1.允许开发人员定义可扩展区域，当需要延伸图片以填充比图片本身更大区域时，可扩展区的内容被延展

            2.允许开发人员定义内容显示区，用于显示文字或其他内容

       总之一句话:.9.PNG是一种很有用的PNG图片格式，它可以在特定区域随文字大小进行缩放.

  .9.png制作介绍   

  .9.png图片可以使用android自带的draw9patch工具来制作，该工具在SDK安装路径的tools目录下.

1.打开命令窗口

2.进入到SDK安装路径的tools目录下

3.执行draw9patch命令

备注：也可以直接双击tools目录下面的draw9patch

4.等待一下会打开draw9patch操作的界面如下：

5.选中File->open 9-patch..

6.选中自己要处理的图片

7.点击打开(0)

工具操作说明：

   1.在宫格区域四周增加一个红色边界，这可能会在图像被延伸时产生人工痕迹。如果你消除所有的坏宫格，延伸视图的视觉一致性将得到维护

  2.区域是导入的图片，以及可操作区域

  3.域这里从上到下，依次为：纵向拉伸的效果预览、横向拉伸的效果预览，以及整体拉伸的效果预览

   其它：

      Zoom ：的长条bar 是对导入的图放大缩小操作，这里的放大缩小只是为了让使用者方便操作;

     Patch scale 是(3)区域中的三种形态的拉伸后的一个预览操作，可以看到操作后的图片拉伸后的效果

     Show lock: 当鼠标在图片区域的时候显示不可编辑区域

     Show patches: 在编辑区域(2)显示图片拉伸的区域 （使用粉红色来标示）

     Show content: 在预览区域(3)显示图片的内容区域（使用浅紫色来标示)

8制作说明

  

       如上图所示，在编辑区域(2)左边那条黑色线代表图片垂直拉伸的区域，上边的那条黑色线代表水平拉伸区域，右边的黑色线代表内容绘制的垂直区域，下边的黑色线代表内容绘制的水平区域，右边和下边的线是可选的，左边和上边的线不能省略(否则制作无效果)。

         备注：制作的过程中拖动水平与垂直的实条细线进行设置水平与垂直拉伸的区域(在图片区域上移动鼠标即可看到实条细线)。

9保存制作好的图片

  9.1点击File->save 9-patch

   

   9.2选择保存的路径及设置保存的文件名称

点击保存即可

        

 .9.png的使用  

     在android项目中res/drawable对应的分辨率下引入该图片,例如：

        

      在res/layout布局文件中使用该图标:例如在activity_main.xml,通过android:background="@drawable/send"使用图标

<RelativeLayout 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"
    tools:context="${relativePackage}.${activityClass}" >
 
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/send"
        android:textSize="30sp"
        android:text="Hello" />
    
    
    
    <TextView
        android:layout_marginTop="20dp"
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/send"
        android:layout_below="@+id/tv1"
        android:textSize="12sp"
        android:text="Study hard, make progress every day!" />
    
    
    
    
     <TextView
        android:layout_marginTop="40dp"
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/send"
        android:textSize="70sp"
        android:layout_below="@+id/tv2"
        android:text="Hello chj" />
 
</RelativeLayout>

  运行项目 观察效果如下：