利用9-Patch PNG来实现ListView的圆角显示

  次阅读 作者:智能小宝 来源:互联网 2015-11-26 10:17 我要评论(0)

说到圆角显示,可能很多人的第一反应就是覆盖onDraw方法来自己画个圆角,可能以前写过其它Windows程序,比如Delphi的人会更有这种冲动吧。

不过在Android中,我们不需要这么麻烦,事实上整个Android系统的UI都是基于Style来实现的,有兴趣的朋友可以去研究一下Android的源码,看看如Button, Radio是如何实现的,就会明白Android的UI体系是非常强大、简单,又有趣的。

本文会以List View为例来讲解,如何使用Style来实现圆角(想想哪个控件已经是有圆角的了?)。

何为Style

Android系统中的UI都是基于一个个的Style来显示的,同1个控件,换1个Style,效果就完全不同了。Style其实就是一堆显示属性的集合,包括文字属性,颜色设置,背景设置,而一堆Style的集合就构成了Theme.

尤其值得一提的是Style定义中经常会看到Selector,用于描述1个控件在不同的场景(Normal, Pressed, Disabled)下的显示。如以下的style定义代码:

文件:drawable/setting_button.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"android:drawable="@drawable/setting_icon_pressed"/>

<item android:state_focused="true"android:drawable="@drawable/setting_icon_pressed"/>

<item android:drawable="@drawable/setting_icon_normal"/>

</selector>

这是最简单的selector定义,它的含义是有1个按钮,在pressed或focused时,显示图标 @drawable/setting_icon_pressed,否则显示@drawable/setting_icon_normal,而这个 selector本身就可以用在button的android:background属性中, 如:android:background= @drawable/setting_button 。如此一来,Android就会在你按下按钮的时候自 动切换背景图片。

何为9-Patch

讲到了背景图片,就必然会联想到图片的大小和缩放问题,总不能不断去麻烦美工MM来帮你修改图的大小吧,更何况我们还要适应Android手机众多的分辨率?

这就要说到9-Patch了,先来看看Google官方关于这个工具的1个截图:

首先,这是1个PNG图片。其次,在用draw9patch打开的时候,会自动在边缘添加1个像素点的透明边框。而这个边框就是你的工作范围了,左键点击会添加1个黑点,右键点击会去掉1个黑点,这些黑点连成的线就构成了9-Patch图片的效果。其中:左边和上面表述的是图片缩放的范围,右边和下边表述的是内容的Padding范围。

好像有点不大明白?运行这个工具(在android sdk的tools目录下),并且拖1个PNG图片进去,选中下方的2个Checkbox,再试用一会儿就明白了。

OK,我们来准备今天这个教程所需要的图片,请美工MM帮你画1个圆角图片吧,但不用切开,图片大小大概在40 40即可,主要是根据你所需要的最小的大小来决定,然后拖到draw9patch中,看下开始的效果。

然后我们在图片边缘点击进行绘制,并且点选下方2个Checkbox,结束时的效果如下图:

在使用这个图片时,左右2个绿色区域是会自动的上下拉伸,而上下2个绿色区域会自动的左右拉伸,中间的粉色区域会做4个方向的拉伸,至于4个角 嘛,你已经知道了,它们不会缩放。而下方的的黑线表示,控件的内容会从最左边到最右边,几乎不留空隙,右边的黑线表示,控件的内容会在上下各留一些空间。

好了,将这个文件保存为float_panel.9.png,并保存到res/drawable目录下。记得扩展名必须是9.png,否则不会生效。另外下次你再次编辑这个文件时,draw9patch工具就不会再添加黑边了。

编写布局文件

文件:res/layout/coner_round_list_activity.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...