• SOUI3界面编辑器使用说明


    SOUI一直没有官方的界面编辑器,关键是我自己一直坚持手写界面更好控制。

    大概是2年前,网友“指尖”开发了一个SOUI2的编辑器,功能非常多,特点是可以拖动控件来实现可视化布局。

    整体上功能看上去很酷,可惜有些细节处理不到位,导致随时有可能崩溃。后来网友“小新”又在指尖的版本上更新了一版,但也没有解决崩溃这个核心问题。

    这段时间抽时间把编辑器的代码基于自己的理念彻底重构了一遍,重构过程中发现了原版本存在的很多问题并一一修正。

    新版本最大的不同就是将可视化编辑功能修改成实时编辑预览功能。

    可视化编辑目标很远大,但实际效果并不理想。就像Android的UI编辑功能,它提供了可视化编辑功能,但实际上很难用,拖动出来的界面,其XML描述很多时候并不是设计者自己的意图。所以我个人在用Android 的UI编辑器时,只使用它的预览功能。

    秉承这个思路,新版本SOUI编辑器核心就是一个XML编辑+实时预览框架。

    项目源代码:https://github.com/soui3-demo/SouiEditor

    下载:https://soime.cn/download/souieditor3.2.3.zip

    主界面:

     点击“打开工程”按钮,选择一个SOUI3的资源包(只支持文件夹资源包,不支持zip资源包),显示下面状态。

    在左边的tab控件中自动将布局XML和其它XML放到两个列表。双击布局XML,在XML编辑器中编辑XML,在上面的窗格则显示界面预览。

    界面预览是一个独立的预览进程,在预览进程中点击界面元素,XML编辑器会自动定位到该元素的XML数据。

    在右边的XML结构中点击元素节点,也会自动同步XML编辑及预览。

    如果XML中包含有tab控件,需要定位当前隐藏页面的元素,可以按下"alt"键,再点击预览进程来切换tab显示页面,切换到目标页面,再点击就可以同步定位了。

    使用SOUI设计界面,对于初学者可能最大的困扰是不知道一个控件有哪些属性,每个属性有什么功能。 除了编辑预览同步外,新版本编辑器提供了通过填充属性表来配置元素(包含控件及皮肤)XML的功能。

     

    通过点击左边属性表中的属性,就可以组装好一个控件或者皮肤的XML。

    属性的含义也可以在属性表中自动显示(属性表是描述在配置文件中的,目前属性表还不完善,后续有时间再更新。)

    非布局XML则只提供XML编辑功能,自动隐藏预览窗口。

     

    最后,编辑器也提供了一个资源管理界面:

    资源管理界面中,对于图片文件提供了图片预览界面。

     最后感谢“指尖”及“小新”的贡献!

     

  • 相关阅读:
    SpringBoot整合Redis缓存
    手写一个json格式化 api
    MYSQL 5.7 无法启动(Could not open error log file errno 2)
    如何获取算法运行状态
    Spring MVC
    Java设计模式
    Java设计模式
    Java设计模式
    Java设计模式
    学习myBatis
  • 原文地址:https://www.cnblogs.com/setoutsoft/p/15688069.html
Copyright © 2020-2023  润新知