美文网首页
启动图制作:Android Studio制作.9.png图亲测详

启动图制作:Android Studio制作.9.png图亲测详

作者: 喜欢桉树叶 | 来源:发表于2022-09-01 10:15 被阅读0次

    概要
    主要运用场景:原生安卓开发APP的启动图、 uniapp开发安卓app自定义启动图。

    制作.9.png图 的方式也有多种,Android Studio是其中比较常见的一种方式。该方式制作.9图也是我在做uniapp打包app项目过程中亲测完成,接下来我会将用每步图解加文字描述的方式分解整个流程。

    制作.9.png图详细流程

    1. 安装Android Studio

    安装Android Studio环境是第一步,需要耐心根据教程,一步步的安装。在这里就不做Android Studio安装的详细讲解,因为已经有很多很好的教程,就直接使用吧。在这里推荐一个大佬的安装教程Android Studio的安装,史上最详细(超多图)!!。再推荐一个菜鸟教程作为备用Android 开发环境搭建。

    1. 新建app工程

    安装好Android Studio之后,新建一个app项目:

    新建:


    1.png

    选择一个模板:


    2.png

    填写APP工程基本信息:


    3.png

    到这里,app工程建立成功!

    1. drawable下放入启动图

    启动图存放位置:找到app根目录 =》 app文件夹 =》 src文件夹 =》 main文件夹 =》 res文件夹 =》 drawable文件夹


    4.png
    1. 创建.9.png图片

    选中要制作的图片,然后鼠标右键选择菜单中的Create 9-Patch file...:


    5.png

    生成 .9图后的效果:


    6.png
    1. 开始 制作.9.png图片

    第一部分,将Zoom调到较大位置如图第②点,将图片的视角拉到右下方,鼠标左键点击图④中的位置直接可以将右方和下方的边框给拉黑,拉黑的方式如图中第④点:


    4f2367c04544c1eb3d25a8287b9b379a.png

    第二部分,将视觉拉到左下方,鼠标左键按下从上往下拉一条短黑线,整个短黑线的横向(绿色横条)不能与图片上的内容重合,如图中第⑤点:


    99.png

    第三部分,将视觉拉到左上方,鼠标左键按下从下往上拉一条短黑线,整个短黑线的横向(绿色横条)不能与图片上的内容重合,如图中第⑥点:


    80.png

    第四部分,将视觉拉到左上方,鼠标左键按下从右往左拉一条短黑线,整个短黑线的竖向(绿色竖条)不能与图片上的内容重合,这里可以看出,与横线交叉的部分是紫色,说明是正确的,如图中第⑥点:


    894.png

    第五部分,将视觉拉到右上方,鼠标左键按下从左往右拉一条短黑线,整个短黑线的竖向(绿色竖条)不能与图片上的内容重合,这里可以看出,与横线交叉的部分是紫色,说明是正确的,如图中第⑥点:


    0391bf.png

    到这里,制作.9图完成,可以将Zoom调到最小看下整体效果:


    f9.png
    1. 使用 .9.png图

    最后,打开drawable文件夹,复制出需要的 .9.png图就OK啦!


    51d0007abddde5902eaf978447cc5706.png

    相关文章

      网友评论

          本文标题:启动图制作:Android Studio制作.9.png图亲测详

          本文链接:https://www.haomeiwen.com/subject/byojnrtx.html