【Android应用开发技术:用户界面】9Patch图片设计

作者:郭孝星

微博:郭孝星的新浪微博

邮箱:[email protected]

博客:http://blog.csdn.net/allenwells

Github:https://github.com/AllenWells

【Android应用开发技术:用户界面】章节列表

9Patch图片是一种特殊的PNG图片,该图片以.9.png为后缀名,它在原始图片四周各添加一个宽度为1像素的线条,这4条线决定了该图片的缩放规则和内容显示格则。

一 9Patch图片的显示规则

9Patch图片left边和top边的直线共同决定了图片的缩放区域,以左边直线为左边界绘制矩形,它覆盖的区域可以纵向缩放,以上面直线为上边界绘制矩形,它覆盖的区域可以水平缩放,它们二者的交集可以在两个方向上缩放。

9Patch图片right边和bottom边的直线共同决定了图片内容的显示区域,以右边直接为右边界绘制矩形,以下边直线绘制矩形,它们两者的交集就是图片内容的显示区域。

这4条线把图片分成9个部分,因此称为.9.png

二 9Patch图片的制作方法

Android提供了制作9Patch图片的drew9patch.bat工具,在Android SDK安装路径的tools目录下,该文件内容如下所示:

@echo off
rem Copyright (C) 2008 The Android Open Source Project
rem
rem Licensed under the Apache License, Version 2.0 (the "License");
rem you may not use this file except in compliance with the License.
rem You may obtain a copy of the License at
rem
rem      http://www.apache.org/licenses/LICENSE-2.0
rem
rem Unless required by applicable law or agreed to in writing, software
rem distributed under the License is distributed on an "AS IS" BASIS,
rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
rem See the License for the specific language governing permissions and
rem limitations under the License.

rem don‘t modify the caller‘s environment
setlocal

rem Set up prog to be the path of this script, including following symlinks,
rem and set up progdir to be the fully-qualified pathname of its directory.
set prog=%~f0

rem Change current directory and drive to where the script is, to avoid
rem issues with directories containing whitespaces.
cd /d %~dp0

rem Check we have a valid Java.exe in the path.
set java_exe=
call lib\find_java.bat
if not defined java_exe goto :EOF

set jarfile=draw9patch.jar
set frameworkdir=.
set libdir=

if exist %frameworkdir%\%jarfile% goto JarFileOk
    set frameworkdir=lib

if exist %frameworkdir%\%jarfile% goto JarFileOk
    set frameworkdir=..\framework

:JarFileOk

set jarpath=%frameworkdir%\%jarfile%

call "%java_exe%" "-Djava.ext.dirs=%frameworkdir%" -jar %jarpath% %*

2.1 打开一张PNG图片

如下图所示,PNG图片在横向和纵向拉伸的时候都变形失真了,如下图所示:

2.2 定义不被拉伸的区间

从top边拉直线覆盖机器人,可以发现纵向机器人显示正常,如下图所示:

我们在从left边拉直线直到覆盖整个机器人,可以发现横向的机器人也显示正常,如下图所示:

三 Android系统对9Patch图片的处理

Bitmap在读取图像流数据的时候会判断图片的9Patch数据块,即NinePatchChunk,如果NinePatchChunk不为空,则该图像为NinePatchDrawable。

NinePatchDrawable会交由NinePatch处理,如下所示:

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

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

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

版权声明:当我们认真的去做一件事的时候,就能发现其中的无穷乐趣,丰富多彩的技术宛如路上的风景,边走边欣赏。

时间: 2024-10-11 10:57:34

【Android应用开发技术:用户界面】9Patch图片设计的相关文章

【Android应用开发技术:用户界面】界面设计中易混淆的概念汇总

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Android应用开发技术:用户界面]章节列表 一 px.dp.sp px:即像素,每个px对应屏幕上的一个点. dp:即设备独立像素,一种基于屏幕密度的抽象单位,在每英寸160点的显示器上:1 dp = 1 px. sp:即比例像素,主要用来处理字体大小,可以根据用户字体

【Android应用开发技术:用户界面】章节列表

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Android应用开发技术:用户界面]章节列表 [Android应用开发技术:用户界面]用户界面基本原理 [Android应用开发技术:用户界面]设备适配 [Android应用开发技术:用户界面]用户界面布局技巧 [Android应用开发技术:用户界面]View基本原理 [

【Android应用开发技术:用户界面】布局管理器

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Android应用开发技术:用户界面]章节列表 布局管理继承于ViewGroup.它用来管理Android应用用户界面里各组件,它的使用使得Android应用的图形用户界面具有良好的平台无关性. 常见的布局方式例如以下所看到的: 线性布局 表格布局 帧布局 相对布局 网络布

【Android应用开发技术:图像处理】Bitmap显示性能优化分析

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Android应用开发技术:图像处理]章节列表 Bitmap经常会消耗大量内存而导致程序崩溃,常见的异常如下所示:java.lang.OutofMemoryError:bitmap size extends VM budget,因此为了保证程序的稳定性,我们应该小心处理程序

本人讲课时录制的Android应用开发技术教学视频

网盘地址:http://yun.baidu.com/pcloud/album/info?query_uk=1963923831&album_id=3523786484935252365 本人讲课时录制的视频,采用webex录制,视频文件内容相对较小30-50兆左右,1个视频文件平均大概有1个小时左右的时间,每个例子基本上从建立项目开始边做边讲. 由于讲课范围是Android应用开发技术,视频没涉及搭建环境,基础控件的使用等基础内容. 主要内容包括: 后台服务. 服务的绑定.服务和线程.远程服务和

【Android应用开发技术:网络通信】网络服务可发现基本原理

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells [Android应用开发技术:网络通信]章节列表 网络服务发现(Network Service Discovery)是一种在局域网内可以辨识并使用其他设备上提供的服务的技术,这种技术在端对端应用(例如:文件共享.联机游戏)中提供很好的帮助. NSD是基于Apple的Bonjo

【Android应用开发技术:用户界面】自定义View类设计

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 设计良好的类总是相似的,它使用一个易用的接口来封装一个特定的功能,它能有效的使用CPU和内存,我们在设计View类时,通常会考虑以下因素: 遵循Android标准规则 提供自定义的风格属性值并能够被Android XML Layout所识别. 发出可访问的事件 能够兼容And

【Android应用开发技术:用户界面】界面导航设计

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:[email protected] 博客:http://blog.csdn.net/allenwells Github:https://github.com/AllenWells 设计开发App的起初步骤之一就是决定用户能够在App上看到什么和做什么,一旦我们知道了用户在App上和哪种内容互动,我们就可以去设计用户在App上的不同内容块之间的切换.进入和回退. 一 多视窗布局 小尺寸屏幕只适合每次展示单个纵向内容视窗,一个列表或列表项的具体信息,这种设

Android开发中,9-patch 图片设置背景带来的问题

9-patch 为了解决不同分屏下的图片适应性,对图片做了padding,而在android中,要给一个控件设置背景图,最终是要调用 setBackgroundDrawable  方法来设置图片资源,而此方法执行是这样的,如果图片资源带有padding的话,会缺省作为控件的padding.基于这样,如果控件没有明确设置自己的padding,很肯能会出现图片能出来,但是里边的内容,如文字看不到的情况,此时需要自己给控件设置下padding,才可以正常显示.