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编辑功能,自动隐藏预览窗口。

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

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

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

SOUI3界面编辑器使用说明的更多相关文章

  1. Markdown编辑器使用说明

    Markdown编辑器使用说明 #编辑器使用说明编辑器仅用来编辑文章的样式,建议在其他文档中写好内容,再复制到此处编辑样式--- ## 编辑器使用介绍—非开发者 非开发者,可以将编辑框内容全部删掉,使 ...

  2. 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

    1.1.   为图片添加九宫格信息 在UI编辑器中添加一张图片 使用Photoshop打开这张图片 放大这张图片,使用切片工具,选取LeftTop(左上角固定不变的位置) 双击切片,找到尺寸信息 将尺 ...

  3. 如何在属性面板中增加一个属性-UI界面编辑器(XproerUI)教程

    版权所有 2009-2015 荆门泽优软件有限公司 保留所有权利 产品首页:http://www.ncmem.com/apps/xproerui/index.asp 开发文档(SkinStudio): ...

  4. 为窗体设置背景图片-UI界面编辑器(SkinStudio)教程

    1.1.   为窗体设置背景图片 在窗体的Background属性中选择图片设置为窗体背景图片

  5. 添加图片按钮-UI界面编辑器(SkinStudio)教程

    打开工具箱,选择Button控件 在窗体上添加一个Button控件 给Button控件的ImageNormal属性添加图片 添加完成后的效果 删除Text属性的值(即删除显示的文本)

  6. 共用字体-UI界面编辑器(SkinStudio)教程

    添加一个Label控件,设置好字体属性 再添加一个Label控件,字体属性还是默认的 只需要将字体属性的Name字段名称改为需要使用的字体属性的Name字段名称即可(如Label1使用的字体)

  7. 控件的相对位置与绝对位置-UI界面编辑器(SkinStudio)教程

    绝对位置: 相对位置: 相对位置配合Anchor属性使用 例如Anchor属性选择left|top(即相对位置的left和top保持不变) 窗口大小改变前: 窗口大小改变后: 可以看到控件相对位置的l ...

  8. 15 个很棒的 Bootstrap UI 界面编辑器

    Bootstrap Magic BootSwatchr Bootstrap Live Editor Fancy Boot Style Bootstrap Lavish Bootstrap ThemeR ...

  9. vi编辑器命令

    Linux下的文本编辑器有很多种,vi 是最常用的,也是各版本Linux的标配.注意,vi 仅仅是一个文本编辑器,可以给字符着色,可以自动补全,但是不像 Windows 下的 word 有排版功能.v ...

随机推荐

  1. 作为Bootstrap中文站维护者-我们再次翻译BootstrapVue项目

    点击立即进入BootstrapVue中文站 http://code.z01.com/bootstrap-Vue Bootstrap-Vue 基于全球最流行的前端框架组合应用系统 项目介绍 Bootst ...

  2. 菜鸡的Java笔记 第二十九 - java 单例设计模式

    SingleCase 单例设计模式        1.单例设计模式的特点        2.多例设计模式的特点    内容    单例设计模式        现在如果说有这么一个程序类 class S ...

  3. Spark SQL知识点大全与实战

    Spark SQL概述 1.什么是Spark SQL Spark SQL是Spark用于结构化数据(structured data)处理的Spark模块. 与基本的Spark RDD API不同,Sp ...

  4. [luogu7340]Balance

    构造一个坐标系,共有$n$个黑点和百点,第$i$个黑点为$(p_{i},a_{i})$,第$i$个白点为$(-q_{i},-b_{i})$ 考虑第$i$个黑点和第$j$个白点连线的斜率,恰好就是$f( ...

  5. 设计模式学习-使用go实现访问者模式

    访问者模式 定义 优点 缺点 适用范围 代码实现 什么是 Double Dispatch 参考 访问者模式 定义 访问者模式(Visitor):表示一个作用于某对象结构中的各元素的操作.它使你可以在不 ...

  6. python网络自动化运维之环境搭建(EVE-NG+pycharm)

    参考了很多资料,发现现在很多环境用的都是GNS3加linux下的python,几乎没有是用EVE-NG加上pycharm的教程,EVE的功能如此强大,存在的教程却较少,这里我出一篇教程供使用EVE作为 ...

  7. jmeter ssh command方式执行hive指令

    Hive命令执行 打开任意一个安装了hive的服务器,进入hive bin 路径,可以看到存在以下文件(仅展示部分): -rwxr-xr-x 1 root root 1297 Jun 28 14:29 ...

  8. 分布式多任务学习论文阅读(四):去偏lasso实现高效通信

    1.难点-如何实现高效的通信 我们考虑下列的多任务优化问题: \[ \underset{\textbf{W}}{\min} \sum_{t=1}^{T} [\frac{1}{m_t}\sum_{i=1 ...

  9. P4569 [BJWC2011]禁忌

    题目传送门. 题意简述:给出大小为 \(n\) 的字典 \(s\).设函数 \(g(t)\) 表示 \(t\) 最多能被分割成的单词个数.等概率随机生成长度为 \(len\) 的字符串 \(T\),求 ...

  10. 【Python小试】计算蛋白序列中指定氨基酸所占的比例

    编码 from __future__ import division def get_aa_percentage(protein, aa_list=['A','I','L','M','F','W',' ...