Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

Android UI技巧(一)——Android中伸缩自如的点9图片切法,没有美工自给自足


相信大家对.9 图片应该都很熟悉吧,有些人可能自己都会了,此篇献给那些不会的同学,咱们一起来聊聊.9图片的切法

一.分辨率

其实相对于Android和IOS两大平台来讲,Android的适配问题一直是大家工作上的一个大问题,这里,我做了一个分辨率的对照表,大家先来连接一下这个简单的东西吧

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

当然,现在2K的屏幕都出来了,不过这个咱不管哈

二.点9切图法

上面了解了大致的分辨率,我们就来切图了,所谓的.9图就是无论你怎么拉伸,只要我们设置一个边宽,这部分就会保持不变形,应用范围也比较广泛,比如聊天起泡什么的

我们要想切.9图,就要用到你SDK目录下/tools/draw9patch.bat,对,没错,就是这个工具,我们打开它

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

这里我们可以点击左上角的File-OPen 9patch,然后打开一张图片制作,也可以直接把图片拖进去,这里,我们新建一个工程——NinePatch,来测验我们制作的成果,首先拖进去一张图片

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

然后我们就来切

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

我们仔细看就会看到一条黑线,这条黑线区域的内容是可以拉伸的,而其他位置的是不可拉伸的,既然如此,那我们放进APP看看效果,首先,来看一下原图是什么样子的

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

图片原本的分辨率是212X130的,我直接设置成

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <Button
        android:background="@drawable/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        />

</RelativeLayout>

那我们来看看.9图的表现吧

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

我们现在只是让他在很窄的地方拉伸,当然,点9图片还是要应用在一个合适的场合,我们看看他在真机上的表现吧

Android UI技巧(一)——Android中伸缩自如的9patch图片切法,没有美工自给自足

我们可以发现,上面那部分我设置成不可拉伸,他就是保持原样,但是我下边那部分,也就是黑边的部分,就没那么幸运了,那就一个惨不忍睹,这样,我们答题也有一个认知,我们针对某一个特定场合的图片使用.9可能会出奇效,但是如果你乱用的话可能适得其反,现在的话,你答题应该知道怎么去切一张.9图片了吧

上一篇:PHP使用数据库的并发问题(转)


下一篇:服务设计模式一:Web服务概述