.9图片的使用

1. 控制宽高伸缩

.9图片的使用_第1张图片

使用Draw9patch工具,打开一张图片,在不做任何伸缩处理的情况下其在分别在宽、高、以及宽高同时缩放时的显示效果,如图一:

.9图片的使用_第2张图片
图1

其中图1为高伸缩时的显示效果,图2为宽伸缩时的效果,图3为宽高都伸缩时的效果;

2. 使高拉伸,我们现在左边边框箭头上半部分点一点,此时效果如图2所示:

.9图片的使用_第3张图片
图2

此时我们看到,在高发生伸缩时的变化,如图右边1、3所示,箭头的位置显示在了整个图片的底部,而这正是因为我们在左边的黑点引起的和。当点了这个点后,图片在高度上发生拉伸时,黑点横向整条线都会拉伸,而黑点以外部分怎不会拉伸,所以箭头就会显示在整个图片的底部,那么,为了让箭头还显示在中间改怎么做呢?既然在箭头的上部分加个黑点之后图片发生了拉伸,那么在箭头下部分再加个黑点呢,我们来看看效果

.9图片的使用_第4张图片
图3

没错,在箭头下部分加黑点之后,箭头的位置就回到了中间。在左边不同位置划黑线后,会按黑线的长度比例缩放,如图4:

.9图片的使用_第5张图片
图4

可以看到右边1和3的缩放在高度上的缩放效果

3. 横向拉伸,图片的上边框外1px是控制图片横向伸缩的地方。我们在控制横向伸缩的地方再划一个点如图5:

.9图片的使用_第6张图片
图5

可以看到做横向拉伸处理后,显示的效果如图5右边。横向伸缩和纵向伸缩道理一样。图片在适应屏幕发生拉伸时黑点纵向所在线会做相应拉伸。

4. 内容控制,图片的右边和下边外1px区域是控制图片中间内容距离边框的位置(相当于View的padding属性),在右边和下边划黑线后可以看到如下图所示效果:

.9图片的使用_第7张图片
图6

图中右边紫色区域为图片内容区域,可以看到内容距离上下边框的距离相等,而距离右边框的距离大些。

你可能感兴趣的:(.9图片的使用)