做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应。
这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用。

1.背景自适应且不失真问题的存在
      制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会。
      比如,列表的背景图一定,但是列表的高度随着列表数据项会发生变化;标题栏的背景,无论横屏还是竖屏,高分辨率还是低分辨率,都能自动填充满,而且不失真等等背景问题。
      根据以往的经验,我们一般采用先切图后拼凑的做法,这种做法本来我想在这里和大家介绍一下,其实有的时候还是很有用的,但是说起来会比较麻烦,就不说这个非重点了,略去,如果大家真的要介绍,在回复中说明,我再考虑一下。
     Android针对这种情况,专门制作了一种.9.PNG格式来解决这个问题。

2.9.PNG格式。
      我不想在这里过多的讨论PNG格式的定义问题。但是.9.PNG确实是标准的PNG格式,只是在最外面一圈额外增加1px的边框,这个1px的边框就是用来定义图片中可扩展的和静态不变的区域。特别说明,left和top边框中交叉部分是可拉伸部分,未选中部分是静态区域部分。right和bottom边框中交叉部分则是内容部分(变相的相当于定义看一个内边距,神似padding功能,后面我会单独介绍一下),这个参数是可选的, 如下图。
     在Android中以9.PNG格式的图片未背景,则能够自定义拉伸而不失真,比如系统的Button就是一个典型的例子。 
     其实呢,无论是left和top,还是right和bottom都是把图片分成9块 (边角四块是不能缩放的,其他的四块则是允许缩放的),所以叫做9.PNG。

3. 使用Draw9Patch.jar制作9.PNG图片之定义拉伸区域。
      前面已经了解到9.PNG格式的工作方式,下面我们使用谷歌提供的Draw9Patch(运行android-sdk-windows\tools目录下的Draw9Patch.bat)来制作.9.PNG图片。
      第一步:准备要拉伸的图片。
                                                           
      非常小的一张图片,我希望以此为背景,中间部分填充文章内容。
      第二步:制作.9.PNG图片
      打开Draw9Patch,把图片拖进去,如下:

      默认的拉伸是整体拉伸,其实边框部分我们并不想拉伸,好,我们自己来定义拉伸区域,如下图:

然后点击File,导出为content.9.png。
       第三步:在layout文件中使用制作的 .9.PNG图片.
       新建工程Draw9Patch,默认主Activity为Draw9PatchActivity.java:

?
1
2
3
4
5
6
@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

我们把content.9.png文件拷贝到/res/drawable文件夹下,打开/res/layout目录下的main.xml,申明如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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"
    android:background="#777"
    android:padding="8dip"
    >
    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="正文:A NinePatchDrawable graphic is a stretchable bitmap image."
    android:background="@drawable/content"
    android:textColor="#000"
    />
</LinearLayout>

如图,

     我们修改text,

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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"
    android:background="#777"
    android:padding="8dip"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="正文:A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border."
    android:background="@drawable/content"
    android:textColor="#000"
    />
</LinearLayout>

如图,

可以看出,边框非常的清晰。下图是未使用.9.PNG的对比图,而且也不是我们要的效果:

      到这里为止,我们已经基本会制作.9.PNG图片了。为了知识体系的全面性和深入性,我们继续。

4.使用Draw9Patch.jar制作9.PNG图片之定义内容区域。
      是不是觉得文字和边距挨的太近,好,我们使用right和bottom边的线来定义内容区域,来达到增大内边距的目的。

      我们定义了一个很小的内容区域,其他的地方则自动充当边框,从而使内边距显的很大,如下图,

      在这里,我要特别说明,一开始为了增大内边距,很容易惯性思维,在<TextView>中申明android:padding="10dip" 之类的,我在这里劝告朋友们不要这么做,一是你将无法预知你的显示,二是这比较混淆,因为设置内容区域就是确定padding,所以我在前面部分说他们是神似。我个人认为通过内容区域设定padding比在布局xml中定义padding更优雅,更简洁!
      关于Draw9Patch工具的其他使用说明,我在次不再累述,因为要说的话太多,为了节省篇幅,请参考官方文档。

5.制作.9.PNG的高级技巧。
       对于初学Draw9Patch的人来说,这可以算是高级技巧,那就是:拉伸区域,可以不是连续的,可以不止一块,而且是和自定义的边框线的长度成正比。
       直接上图说明:

6.SDK中如何处理9.PNG图片。
      SDK专门针对9.PNG做了定义和处理,这里我们只是做个简单的流程分析,Bitmap在读取图像流数据的时候,会把判断图片的NinePatchChunk(9Patch数据块),如果NinePatchChunk不为空,则是NinePatchDrawable,NinePatchDrawable则又会交给NinePatch处理:

?
1
2
3
setNinePatchState(new NinePatchState(
               new NinePatch(bitmap, bitmap.getNinePatchChunk(), "XML 9-patch"),
               padding, dither), r);

NinePatch检验成功则调用本地方法,绘制出最终的图片:

?
1
2
3
nativeDraw(canvas.mNativeCanvas, location,
                mBitmap.ni(), mChunk, paint != null ? paint.mNativePaint : 0,
                canvas.mDensity, mBitmap.mDensity);

7.android系统中大量应用了9.PNG图片。
     通过解压随便一个rom,找到里面的framework_res.apk,里面有大量的9.PNG格式文件,被广泛的应用起来,比如常见的有:
     按钮:  
     解锁:  
     下拉框:  
     标题栏:
     Toast:
      还有搜索,键盘,放大缩小控件,时间加减等等,我就不一一列举。

8.最后送上一些图例,以飨读者,以做后鉴:
 
赏图1 本人之作

 赏图2 下拉按钮
 
赏图3 文章头部背景 
 
赏图4 系统头部背景

赏图5 再来一个头部背景 
谢谢大家的支持。

转载于:https://www.cnblogs.com/greywolf/archive/2012/12/25/2832036.html

Android学习系列(4)--App自适应draw9patch不失真背景相关推荐

  1. Android App自适应draw9patch不失真背景

    做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应. 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1 ...

  2. Android学习系列(10)--App列表之拖拽ListView(上)

    研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.       鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...

  3. Android学习系列(15)--App列表之游标ListView(索引ListView)

    游标ListView,提供索引标签,使用户能够快速定位列表项.       也可以叫索引ListView,有的人称也为Tweaked ListView,可能更形象些吧.       一看图啥都懂了: ...

  4. Android学习系列(34)--App应用之发布各广告平台版本

    Android的广告平台是很多的,各市场对各平台的接受程度是不一样的,Android的开发者如果想集成广告基本要考虑下面两个问题: (1)集成什么广告,会赚钱? (2)集成什么广告,不会被市场拒绝? ...

  5. Android学习系列(11)--App列表之拖拽ListView(下)

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.      在这个方法中我们主要是处 ...

  6. Android学习系列(27)--App缓存管理

    随笔- 53 文章- 10 评论- 1064 Android学习系列(27)--App缓存管理 无论大型或小型应用,灵活的缓存可以说不仅大大减轻了服务器的压力,而且因为更快速的用户体验而方便了用户. ...

  7. Android学习系列(7)--App轮询服务器消息

    这篇文章是android开发人员的必备知识. 1.轮询服务器      一般的应用,定时通知消息可以采用轮询的方法从服务器拿取消息,当然实时消息通知的话,建议采用推送服务.     其中需要注意轮询的 ...

  8. Android学习系列(16)--App列表之圆角ListView

    有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈.甚至,有时觉得设计之殇是审美疲劳. 直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone ...

  9. Android学习系列(22)--App主界面比较

    本文算是一篇漫谈,谈一谈当前几个流行应用的主界面布局,找个经典的布局我们自己也来实现一个. 不是为了追求到底有多难,而是为了明白我们确实需要这么做.  走个题,android的UI差异化市场依然很大, ...

  10. Android学习系列(19)--App离线下载

    宜未雨而绸缪,毋临渴而掘井.----朱用纯<治家格言> 离线下载,在有网络的情况下下载服务器数据,以便无网络时也能阅读,就是离线阅读. 离线下载的功能点如下:       1.下载管理(开 ...

最新文章

  1. 五句话搞定JavaScript作用域【转】
  2. RuntimeError: maximum recursion depth exceeded
  3. DDMS的使用、内存溢出的调试和模拟器的启动命令参数
  4. x264 scan8存储分析
  5. js <->java 时区处理
  6. JavaScript中的输入输出语句
  7. matlab tabular,LaTeX表格tabular背景色添加技巧
  8. 天涯.只看楼主的bookmarklet
  9. ubuntu 910 下安装万能五笔
  10. 高一物理必修第二册公式整理
  11. python视频笔记17(控制窗体)
  12. 清华大学转到计算机专业一年几个,计算机专业(转).doc
  13. CF869E The Untended Antiquity 解题报告
  14. 华为云更换服务器系统,华为云更换服务器系统
  15. linux 文件-s,linux下文件的特殊权限s和t
  16. 为Windows右键新建菜单添加菜单项
  17. B. The Monster and the Squirrel
  18. 嵌入式系统考试题库(CSU)
  19. jieba分词TFIDF算法2
  20. 程序员犯的错误都这么屌吗?

热门文章

  1. PHP:同时发送多个异步ajax请求,但数据却是按同步顺序返回
  2. MAC机上JAVA对话框死锁的案例之一
  3. fatal error: krb5.h: 没有那个文件或目录
  4. 软件基本功:测试听着简单,会做的没几个
  5. H264编码质量屏幕截图
  6. msys2编译ffmpeg:ERROR: libx264 not found
  7. VS2017社区版离线下载办法
  8. EXCEL中,函数中的双引号如何表示?
  9. 管理感悟:产品功能比别人差,所以不能用?
  10. Linux的互斥锁、条件锁的用法