android .9图片详解及应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhujiangtaotaise/article/details/76906661

.9.png是干什么用的呢?这里我就不再说明了。
我们知道.9.png图片的上下左右都有1px宽度且长度任意的黑线,那么这些黑线的作用是什么呢?可以总结成一句话“左上拉伸,右下填充”,就是说左边和上边的黑色线条表示是可以拉伸的区域,右边和下边的黑线表示内容填充的区域。这么说,可能不是很好理解,下面会有例子加以说明。

我们先来看张.9.png的图:
这里写图片描述

左边和上边的黑线对应可以拉伸的区域,黑线以外的区域不能拉伸。
右边和下边的黑线表示填充的内容的区域。比方说,TextView的背景就是这个.9图片,那么我们设置的text最左边的位置就是下边黑线的起始位置;最右边的位置就是下边黑线的结束位置;同理,最上面的位置就是右边黑线的起始位置;最下面的位置就是右边黑线的结束位置。后续会有例子来说明。

为了举例说明,那就得自己制作.9.png图片啦,方法很简单,直接运行android-sdk-windows\tools目录下的Draw9Patch.bat。下面是我制作好的.9.png。
这里写图片描述

这个图片是原图,有点小,我放大点看:
这里写图片描述

可以看到4条黑线的具体位置。上边的黑线表示水平拉伸的区域,左边黑线表示竖直拉伸的区域,拉伸的效果如右边的3个小图所示。可以看出拉伸对应区域。

下面写个例子来说明,看看内容填充的位置是不是对应的右边和下边的区域。我制作的这个.9图,下边的黑线距离左边是31px,距离右边是15px.

 <ImageView 
        android:layout_marginLeft="20px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tag"
        android:src="@drawable/music_home_nav_cursor"
        />

就是为ImageView 设置背景,背景就是刚才的制作的.9.png图。效果如下:
这里写图片描述

得到的图片后,用画图工具打开这个这张图片,发现,蓝色图片的位置距离最左边几近于31px,距离右边的距离也接近于15px。可以发现右、下的黑线就是确定填充内容区域。

猜你喜欢

转载自blog.csdn.net/zhujiangtaotaise/article/details/76906661
今日推荐