最近在改版公司的UI,最终效果是这样的:
看到效果有点崩,倒不是有多难实现,主要是这个侧滑UI几乎两三周一换,真的是疲劳.这篇先简单普及一下mac系统下的.9png图片制作.废话不多说,下面开始一步步做起来:
1.首先要准备一个目标图片,最好是png格式,将其复制到android studio的drawable目录下;
2.选中该图片,右击选择create 9-patch-file,选择生成.9png图片所在目录,一般选择mimap目录下,并将drawable下的目标图片删除;
3.双击mimap目录下生成的.9图片,进入编辑模式,,如下图所示:
4.编辑规则如下:
上边黑线：横向拉伸区域，必须要画的，拉伸是横向拉伸，如右边的区域第二个拉伸的就是横向拉伸的效果
左边黑线：纵向拉伸区域，必须要画的，拉伸是纵向拉伸，如右边的区域第一个拉伸的就是纵向拉伸的效果
下边黑线：可选，横向内容显示区域
右边黑线：可选，纵向内容显示区域
拖动四周的边界线即可生成黑线,只有上边和左边是拉伸区域,右边和下面则是里面内容的显示区域
5.画错了想取消重新画怎么办?
很简单,由于mac与windows的差异,快捷键也存在差异,如果想取消某一块的边界线,只需要按住control键,同时选中取消区域的起点,开始划线即可,如图,取消部分的边界线显示为红色
,这样就成功完成了.9图片的制作,接下来自己引用就ok了
补充:本文仅做记录和供大家参考,下篇将会记录上图侧滑栏的实现,有不足之处和意见请大家提出,谢谢.