1,如何实现图片自适应
如何实现图片自适应,我们用.9.patch,
左侧和上侧的直线共同决定了图片的缩放区域,左侧边直线绘制的区域决定了纵向缩放的区域;上侧直线绘制的区域决定了水平方向可以缩放的区域;
右侧和下侧的直线共同决定了图片的内容显示区域,右侧直线绘制的区域决定了纵向内容的区域;下侧直线绘制的区域决定了水平方向上内容的区域;
一般内容区域的大小不缩放;
2,举例应用
如何理解上边所说的概念,我们做一个图说明一下
image.png
如图中1和2组合的位置不拉伸;4的区域可以左右拉伸,3的区域可以上下拉伸;效果就是中间的logo不会被拉伸,变形;这个时候我们可以在logo位置添加文字,会显的很合适;
再如网上的例子如下:
a.左边加上黑线区域表示整个图片在上下/纵向拉伸时候保证只有黑色区域的像素参与拉伸,其他地方都是原样,具体效果可以参考右侧的预览;
b.上边加上黑线区域表示整个图片在左右/横向拉伸时候保证只有黑色区域的像素参与拉伸其他地方都是原样,具体效果可以参考右侧的预览;
c,右侧加上黑线区域表示在上下拉伸时候整个图片中显示的文字等内容只在黑色像素区域内显示,其他地方不显示图片内的内容;
d,底部加上黑线区域表示在左右拉伸时候整个图片中显示的文字等内容只在黑色像素区域内显示,其他地方不显示图片内的内容
因为拉伸的区域只有左侧和上侧表示的区域,右侧和下侧的区域不拉伸,所以可以在这个位置放置文字
image.png
image.png