注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

_

_

 
 
 

日志

 
 

Android Drawable Resource学习(三)、NinePatchDrawable和NinePatch图片的制作  

2015-07-30 19:32:41|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Android Drawable Resource学习(三)、NinePatchDrawable和NinePatch图片的制作

分类: Android基础知识学习 2012-11-08 14:55 5271人阅读 评论(0) 收藏 举报

目录(?)[+]

  1. 一创建NinePatchDrawable
  2. 二创建一个9png格式的图片

一、创建NinePatchDrawable

一个NinePatch也是一个PNG的图片,不过不同的是可以为这种格式的图片定义可伸缩的区域,当某个视图的内容超过了正常的尺寸的时候,这种格式的图片会自动拉伸以适应不同的尺寸。一般这种图片是作为视图的背景,并且视图至少有一个尺寸(layout_width或者layout_height)是设置为"warp_content"。当视图自增长来适应内容的时候,Nine-Patch格式的图片也会相应的进行缩放来匹配视图的尺寸。

NinePatchDrawable的创建方式几乎和BitmapDrawable一模一样,使用方式也没有多大的区别。只是在xml创建的时候,没有那么多的属性。

[java] view plaincopyprint?

  1. <nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
  2. ??? android:src=""
  3. ??? android:dither=""/>?
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src=""
    android:dither=""/>

它只有这三个属性。

二、创建一个.9.png格式的图片

在androidsdk的tools目录下,有这样一个工具draw9patch.bat。使用这个工具,可以很快速的绘制一个.9.png格式的图片。

这种格式的图片在android 环境下具有自适应调节大小的能力。

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

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

如上图所示:

左侧和上方的黑线交叉的部分即可扩展区域。右侧和下方的黑线交叉的部分即内容显示区。用它可以实现部分拉伸,从而实现图片在安卓系统上的完美应用

有这样一张图片,图片名为mask.png.

将它制作了一个有拉伸部分的mask1.9.png图片。和有内容限制和拉伸部分的mask2.9.png图片。

[java] view plaincopyprint?

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. ??? xmlns:tools="http://schemas.android.com/tools"
  3. ??? android:layout_width="match_parent"
  4. ??? android:layout_height="match_parent"
  5. ??? android:orientation="vertical">?
  6. ??? <!-- 普通图片为背景的按钮 ,内容较少,不会拉伸-->?
  7. ??? <Button?
  8. ??????? android:layout_width="wrap_content"
  9. ??????? android:layout_height="wrap_content"
  10. ??????? android:background="@drawable/mask"
  11. ??????? android:text="1111"/>?
  12. ??? <!-- 普通图片为背景的按钮 ,内容过多,图片会拉伸,图片变形模糊-->?
  13. ???? <Button?
  14. ??????? android:layout_width="wrap_content"
  15. ??????? android:layout_height="wrap_content"
  16. ??????? android:background="@drawable/mask"
  17. ??????? android:text="111111111111111111111"/>?
  18. ???? <!-- 有拉伸设置的.9.png片为背景的按钮 ,内容过多,拉伸部分会拉伸 ,图片不会变形-->?
  19. ???? <Button?
  20. ??????? android:layout_width="wrap_content"
  21. ??????? android:layout_height="wrap_content"
  22. ??????? android:background="@drawable/mask1"
  23. ??????? android:text="111111111111111111111"/>?
  24. ???? <!-- 有内容限制和拉伸设置的.9.png片为背景的按钮 ,内容过多,拉伸部分会拉伸 ,并且文字内容位置改变-->?
  25. ???? <Button?
  26. ??????? android:layout_width="wrap_content"
  27. ??????? android:layout_height="wrap_content"
  28. ??????? android:background="@drawable/mask2"
  29. ??????? android:text="1111111111"/>?
  30. </LinearLayout>?
<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">
    
    <!-- 普通图片为背景的按钮 ,内容较少,不会拉伸-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mask"
        android:text="1111"/>
    
    <!-- 普通图片为背景的按钮 ,内容过多,图片会拉伸,图片变形模糊-->
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mask"
        android:text="111111111111111111111"/>
     
     <!-- 有拉伸设置的.9.png片为背景的按钮 ,内容过多,拉伸部分会拉伸 ,图片不会变形-->
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mask1"
        android:text="111111111111111111111"/>
     
     <!-- 有内容限制和拉伸设置的.9.png片为背景的按钮 ,内容过多,拉伸部分会拉伸 ,并且文字内容位置改变-->
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mask2"
        android:text="1111111111"/>
</LinearLayout>

效果图:

版权声明:本文为博主原创文章,未经博主允许不得转载。

  评论这张
 
阅读(186)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017