您的位置：首页 > 产品设计 > UI/UE

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

2016-02-27 23:44 435 查看

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


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



一.分辨率


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






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



二.点9切图法


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

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






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






然后我们就来切






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






图片原本的分辨率是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图的表现吧






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






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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航