在本教程中,将详细介绍OPhone中引入的NinePatch图片格式,以及如何使用NinePatch图片来创建和OPhone系统风格统一的应用程序。在下面的教程中使用OPhone系统中的控件Button来作为演示。 OPhone系统背景图片 首先来看看OPhone系统Button的背景样式。 创建一个示例项目,添加几个Button, layout代码如下: view plaincopy to clipboardprint? 1.<?xml version="1.0" encoding="utf-8"?> 2.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent"> 6. <TextView 7. android:layout_width="fill_parent" 8. android:layout_height="wrap_content" 9. android:text="@string/hello" /> 10. <Button 11. android:layout_width="wrap_content" 12. android:layout_height="wrap_content" 13. android:id="@+id/smallButton" 14. android:text="@string/smalltext"/> 15. <Button 16. android:layout_width="wrap_content" 17. android:layout_height="wrap_content" 18. android:id="@+id/mediumButton" 19. android:text="@string/mediumtext"/> 20. <Button 21. android:layout_width="wrap_content" 22. android:layout_height="wrap_content" 23. android:id="@+id/longButton" 24. android:text="@string/longtext"/> 25.</LinearLayout> <?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"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/smallButton" android:text="@string/smalltext"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/mediumButton" android:text="@string/mediumtext"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/longButton" android:text="@string/longtext"/> </LinearLayout> (为了节约篇幅,下面的布局代码只提供Button代码,其他代码省略。) 程序截图如下: 图一:OPhone系统默认按钮背景,第二个按钮是取得焦点时候的背景 从上图可以看到不管按钮有多长,背景都可以很好的展示。在有些情况下,可能系统提供的背景图片不适合你的应用程序主题,这个时候就要使用自定义背景来实现特殊的主题风格了。 使用颜色做背景 通过指定View中的background 值为颜色值来设置颜色背景,代码如下: view plaincopy to clipboardprint? 1.<Button 2. android:layout_width="wrap_content" 3. android:layout_height="wrap_content" 4. android:text="@string/smalltext" 5. android:id="@+id/smallButton" 6. android:background="@color/red" 7. android:layout_margin="4px"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/smalltext" android:id="@+id/smallButton" android:background="@color/red" android:layout_margin="4px"/> 在Button中指定了背景android:background="@color/red",red是在colors.xml文件中定义的颜色值,定义方式查看项目代码中的res/values/colors.xml文件。现在程序截图如下: 图二:使用颜色值作为Button背景 由上图可见,使用颜色背景得到的是一个矩形填充的背景,这和系统提供的圆角背景是不一样的。因此要使应用程序和OPhone系统风格统一,不要使用颜色值 来做组件的背景。当然,这不是绝对的,如果使用自定义组件可以自己来绘制组件的背景,这个时候就可以自由的来控制背景如何绘制了,关于自定义组件的内容已 经超出本教程范围了,这里不做讨论。既然使用颜色值做背景看起来不统一,那么使用自定义的图片又如何呢? 自定义图片背景 使用如下的图片来做Button的背景,layout 代码如下: 图三:自定义背景图片 view plaincopy to clipboardprint? 1.<Button 2. android:layout_width="wrap_content" 3. android:layout_height="wrap_content" 4. android:text="@string/smalltext" 5. android:id="@+id/smallButton" 6. android:background="@drawable/btn_bg" 7. android:layout_margin="4px"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/smalltext" android:id="@+id/smallButton" android:background="@drawable/btn_bg" android:layout_margin="4px"/> 程序截图如下: 图四:使用自定义背景图片的Button 由上图可见,在Button长度刚好和组件长度差不多的时候,看起来还不错,随着Button内容的增加,背景图片被拉伸变形。这时可能你会想到,对于不 同长度的Button使用不同的背景图片,这样不就没问题咯!是的,这样的可以的,但是如果长度是动态变化的呢? NinePatch背景图片 现在该看看OPhone是如何实现组件背景的了,在OPhone中Button的默认背景图片为 btn_default_small_normal.9.png 如下图: 图五:OPhone默认Button背景图片 Button取得焦点时候的背景图片如下: 图六:OPhone中Button取得焦点的背景图片 OPhone的系统资源图片可以到如下目录下查看: <OPhone SDK>toolslibresdefaultdrawable 由图片名称就可以看出有点与众不同,是以9.png结尾的,这是OPhone系统特定的图片格式,被称为NinePatch图片。NinePatch图片和普通的图片的区别只是比普通图片四周多了一个边框(注意观察上面图片周围的黑线)。 在NinePatch图片中,左边那条黑色线代表图片垂直拉伸的区域,上边的那条黑色线代表水平拉伸区域,右边的黑色线代表内容绘制的垂直区域,下边的黑色线代表内容绘制的水平区域,右边和下边的线是可选的。 NinePatch图片编辑器 在OPhone SDK中也提供了一个编辑NinePatch图片的工具, 在<OPhone SDK>tools 目录下面执行 draw9patch.bat 就可以打开该工具,下面就使用该工具来编辑自定义的Button背景图片。 启动编辑器,把btn_bg.png图片拖到NinePatch编辑器窗口中(或则通过菜单:File > Open 9-patch...来选择图片)来编辑,在编辑器的左边是编辑区域,右边是预览区域,在预览区域中显示了水平拉伸,垂直拉伸和水平垂直都拉伸情况下的预 览图形。 NinePatch编辑器还提供了一些操作选项: • Zoom: 用来缩放左边编辑区域的大小 • Patch scale: 用来缩放右边预览区域的大小 • Show lock: 当鼠标在图片区域的时候显示不可编辑区域 • Show patches: 在编辑区域显示图片拉伸的区域 (使用粉红色来标示) • Show content: 在预览区域显示图片的内容区域(使用浅紫色来标示) • Show bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良 好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。) 图七: NinePatch图片编辑器 然后设置水平和垂直拉伸区域,在需要拉伸的位置绘制像素,如下图(使用鼠标左键点击绘制点,右键删除绘制的点): 图8:编辑后的自定义图片 可以在右边预览区域看到现在图片拉伸后的效果,同时还可以看到现在的内容区 域在没有设置的时候是整个图片(注意:在这里显示的内容区域为整个图片,其实当不设置内容区域的时候,在OPhone中使用的内容区域就是设置的拉伸区 域,也就是上图中的粉红色区域,这个在教程后面会有示例说明)。 把这个图片保存为NinePatch图片(btn_bg.9.png),替换前面使用的btn_bg.png图片后,程序截图如下: 图九:使用自定义NinePatch图片的Button 由上图可以看到NinePatch图片在背景图中应用的优势,指定颜色值变化范围比较小的区域为伸缩区域来防止图片伸缩变形。由于没有设置内容区域 (NinePatch图片的右边和下边的指示线条),Button在显示的时候默认是使用拉伸区域的,所以这里看不出有什么不妥当的地方,下面来测试的右 边和下边指示线的作用。 现在编辑图片如下: 图十:设置了内容区域的NinePatch图片 为了使测试明显,这里使用中间和上部区域作为内容区域,保存该图片为btn_bg.9.png,使用该图片后的程序截图如下: 图十一:使用不恰当设置的内容区域的图片 和前面程序截图对比就可以发现内容区域的作用了。所以现在再看看OPhone的默认背景图片btn_default_small_normal.9.png 就可以发现其中四周线条设置的奥妙了,同样自定义背景设置为下图所示就更为合理了: 图十二:更加合理的NinePatch设置 图十三:使用合理的NinePatch图片的截图 到此,你就应该知道NinePatch图片在OPhone系统中的奥妙了,在系统资源文件目录中(<OPhone SDK>toolslibresdefaultdrawable)可以发现大量的NinePatch图片,现在你可以使用自定义的 NinePatch图片来设置自己的应用程序了。 最后再来验证下前面提到过的OPhone系统使用不设置内容区域NinePatch图片的实际显示情况,这里使用下面的图片作为Button背景图片: 这里设置水平拉伸比较长,垂直拉伸比较靠近上部,程序截图如下: 由上图可见,当不设置内容区域的时候,NinePatch图片使用的就是拉伸区域作为内容区域,而不是NinePatch编辑器中指示的图片全部区域。 总结 要使OPhone应用程序和系统具有统一的主题风格,背景不要使用颜色值而尽量的使用NinePatch图片。 NinePatchTutorial.rar 中包含本教程使用的项目文件和其他自定义NinePatch图片资源。 注:本文中的内容完全适用于Android已经发布的各个版本。
您还没有登录,请您登录后再发表评论
ninepatch-editor-1.25
Android NinePatch 技术
使用此技术,您可以定义多个具有相同图像资产的UI组件(如面板或按钮)的背景。 您还可以使用减少的图像资源来创建大型面板,因此对于优化项目资源非常有用。 入门 首先,您想获得该插件的全新副本。 您可以从此...
切片Android样式的9色补丁图像,调整大小并进行交互式预览。 有关9补丁的说明,请参见 。 安装 如果要使用交互式查看器,请阅读“交互式查看器”下的其他安装说明。 $ pip install ninepatch Python用法 from ...
NinePatch图(9-Patch图,.9图)是一种可拉伸的图片。 该压缩包含有两种类型的Nine-Patch图片,一种是微信聊天背景,另一种是QQ聊天背景(海浪)。
(实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。) 序列 ② :区域是导入的图片,以及可操作区域。 序列 ③ :这里 zoom:的长条bar 是对...
自动去黑边,自动识别点九过的图片的处理信息,重新进行编辑。处理完的点九信息在查看时看不到边缘黑线,但是可以在手机上被正确识别,做手机界面设计等的可以来取了
在Android应用开发当中经常需要使用图片,而图片又经常需要进行拉申,图片拉申的时候会出现变形,制作NinePatch图片可以指定图片的拉申区域,使图片拉申后还能获得比较好的效果。
让您在 iOS 上轻松使用 9-Patch PNG 图片。 该技术只是将 9-patch PNG 图像转换为 iOS 兼容、可调整大小的 UIImage 对象。 有关详细信息,请参阅 UIImage 的 resizableImageWithCapInsets:(UIEdgeInsets)insets ...
photoshop网站切图高级教程
NinePatchTest是Ninepatch的方法的实现工程
一个常用的工具类,用于装饰recyclerview,支持ninepatch镜像。
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...
React Native 9patch映像 此模块支持使用Android的本机9patch可绘制对象和iOS的capInsets。入门安装本机模块$ npm i --save react-native-9patch-image将本机模块链接到您的项目$ react-native link react-native-9...
用于装饰RecyclerView的通用工具类,支持ninepatch图像。 文档在这里 您可以使用gradle或maven导入此lib,因为它存在于JCenter中。 lib中将显示更多可扩展的有用方法。 该库将合并到ExpandRecyclerView lib中。 ...
1. Draw 9-Patch:这个九宫格绘画安卓开发工具可以让开发者轻松地创建一个九宫格NinePatch图,提高开发效率。 Draw 9-Patch是一个可视化的编辑器,可以让开发者通过所见即所得(WYSIWYG)的方式创建NinePatch图,...
Android人员开发工具 这个九宫格绘画工具(draw9patch.bat)可以让你很容易的通过一个所见即所得(WYS|WYG)的编辑器来创建一个九宫格NinePatch图
9patch mac版 点9工具(安装包)
图像NinePatch 作为视图的背景上使用具有伸缩性的位图图像,必须使用项目目录中的9.png扩展名 进行保存res/drawable/左侧和顶部绘制一条(或
Android原生的9patch图片制作工具,上传到CSDN以供大家学习以及参考,免去自行搜索下载的烦恼
相关推荐
ninepatch-editor-1.25
Android NinePatch 技术
使用此技术,您可以定义多个具有相同图像资产的UI组件(如面板或按钮)的背景。 您还可以使用减少的图像资源来创建大型面板,因此对于优化项目资源非常有用。 入门 首先,您想获得该插件的全新副本。 您可以从此...
切片Android样式的9色补丁图像,调整大小并进行交互式预览。 有关9补丁的说明,请参见 。 安装 如果要使用交互式查看器,请阅读“交互式查看器”下的其他安装说明。 $ pip install ninepatch Python用法 from ...
NinePatch图(9-Patch图,.9图)是一种可拉伸的图片。 该压缩包含有两种类型的Nine-Patch图片,一种是微信聊天背景,另一种是QQ聊天背景(海浪)。
(实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。) 序列 ② :区域是导入的图片,以及可操作区域。 序列 ③ :这里 zoom:的长条bar 是对...
自动去黑边,自动识别点九过的图片的处理信息,重新进行编辑。处理完的点九信息在查看时看不到边缘黑线,但是可以在手机上被正确识别,做手机界面设计等的可以来取了
在Android应用开发当中经常需要使用图片,而图片又经常需要进行拉申,图片拉申的时候会出现变形,制作NinePatch图片可以指定图片的拉申区域,使图片拉申后还能获得比较好的效果。
让您在 iOS 上轻松使用 9-Patch PNG 图片。 该技术只是将 9-patch PNG 图像转换为 iOS 兼容、可调整大小的 UIImage 对象。 有关详细信息,请参阅 UIImage 的 resizableImageWithCapInsets:(UIEdgeInsets)insets ...
photoshop网站切图高级教程
NinePatchTest是Ninepatch的方法的实现工程
一个常用的工具类,用于装饰recyclerview,支持ninepatch镜像。
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...
React Native 9patch映像 此模块支持使用Android的本机9patch可绘制对象和iOS的capInsets。入门安装本机模块$ npm i --save react-native-9patch-image将本机模块链接到您的项目$ react-native link react-native-9...
用于装饰RecyclerView的通用工具类,支持ninepatch图像。 文档在这里 您可以使用gradle或maven导入此lib,因为它存在于JCenter中。 lib中将显示更多可扩展的有用方法。 该库将合并到ExpandRecyclerView lib中。 ...
1. Draw 9-Patch:这个九宫格绘画安卓开发工具可以让开发者轻松地创建一个九宫格NinePatch图,提高开发效率。 Draw 9-Patch是一个可视化的编辑器,可以让开发者通过所见即所得(WYSIWYG)的方式创建NinePatch图,...
Android人员开发工具 这个九宫格绘画工具(draw9patch.bat)可以让你很容易的通过一个所见即所得(WYS|WYG)的编辑器来创建一个九宫格NinePatch图
9patch mac版 点9工具(安装包)
图像NinePatch 作为视图的背景上使用具有伸缩性的位图图像,必须使用项目目录中的9.png扩展名 进行保存res/drawable/左侧和顶部绘制一条(或
Android原生的9patch图片制作工具,上传到CSDN以供大家学习以及参考,免去自行搜索下载的烦恼