在实际项目中经常会遇到在某些手机上特别是大屏幕手机上出现毛边,边界看起来模糊不清的情况。这是因为界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。
这种情况下,我们可以UI设计师多切出几套分辨率的图偶来适配,但是这样会导致apk体积增加,有没有一张图就能解决的好办法呢,android平台下的点9PNG就应运而生了。点9图可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果。
首先看一下普通图片和点9图片的区别
布局文件如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" ">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通图"/>
<ImageView
android:layout_width="200dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="点9图"/>
<ImageView
android:layout_width="200dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/ic_launcher_nine_pic"/>
</LinearLayout>
实际显示效果图
搜狗截图20161029194150.png
图中可以看出经过我处理的图片,边角变得不模糊了,虽然不是那么很好看,但这里只是做个例子来说明其作用。
下面来讲讲在android studio中怎么去根据自己实际需求去画这个点9图
先找到图片右键
搜狗截图20161029211334.png
然后修改图片名称,选择目录,注意必须要放在drawable目录里面,不然引用studio会报错
搜狗截图20161029211356.png
然后进入点9图编辑界面
搜狗截图20161029211903.png
最后讲解怎么编辑点9图
只需要在图片边缘鼠标单击即可,一般我们只需要设置左边和上边来调节拉伸区域。
变成黑色表示拉伸的坐标点。图中粉红色的交叉点原本是白色,故而拉伸的区域都在白色点区域。
所以当拉伸时大家就看到了谷歌机器人的外部四个绿色边角区域没有了毛边,实际就是保持其不被拉伸而形成的结果。
无标题.png
L1与T1交叉区域,L2与T2交叉区域,表图片在拉伸的时候只会拉伸所以示只拉伸该区域。
至于右边下边 要是边框是透明色区域则表示这块区域占据空间不被别的内容遮挡,
黑色区域表示可以显示别的内容的区域,比如一个textview放这张图片做背景,如果下面左边一半设置透明色,右边一半设置黑色,那么最后文字只会在黑色区域。
如下图
搜狗截图20161029214826.png
搜狗截图20161029214913.png
以上就是点9图的部分介绍。