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编辑功能,自动隐藏预览窗口。
最后,编辑器也提供了一个资源管理界面:
资源管理界面中,对于图片文件提供了图片预览界面。
最后感谢“指尖”及“小新”的贡献!
SOUI3界面编辑器使用说明的更多相关文章
- Markdown编辑器使用说明
Markdown编辑器使用说明 #编辑器使用说明编辑器仅用来编辑文章的样式,建议在其他文档中写好内容,再复制到此处编辑样式--- ## 编辑器使用介绍—非开发者 非开发者,可以将编辑框内容全部删掉,使 ...
- 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程
1.1. 为图片添加九宫格信息 在UI编辑器中添加一张图片 使用Photoshop打开这张图片 放大这张图片,使用切片工具,选取LeftTop(左上角固定不变的位置) 双击切片,找到尺寸信息 将尺 ...
- 如何在属性面板中增加一个属性-UI界面编辑器(XproerUI)教程
版权所有 2009-2015 荆门泽优软件有限公司 保留所有权利 产品首页:http://www.ncmem.com/apps/xproerui/index.asp 开发文档(SkinStudio): ...
- 为窗体设置背景图片-UI界面编辑器(SkinStudio)教程
1.1. 为窗体设置背景图片 在窗体的Background属性中选择图片设置为窗体背景图片
- 添加图片按钮-UI界面编辑器(SkinStudio)教程
打开工具箱,选择Button控件 在窗体上添加一个Button控件 给Button控件的ImageNormal属性添加图片 添加完成后的效果 删除Text属性的值(即删除显示的文本)
- 共用字体-UI界面编辑器(SkinStudio)教程
添加一个Label控件,设置好字体属性 再添加一个Label控件,字体属性还是默认的 只需要将字体属性的Name字段名称改为需要使用的字体属性的Name字段名称即可(如Label1使用的字体)
- 控件的相对位置与绝对位置-UI界面编辑器(SkinStudio)教程
绝对位置: 相对位置: 相对位置配合Anchor属性使用 例如Anchor属性选择left|top(即相对位置的left和top保持不变) 窗口大小改变前: 窗口大小改变后: 可以看到控件相对位置的l ...
- 15 个很棒的 Bootstrap UI 界面编辑器
Bootstrap Magic BootSwatchr Bootstrap Live Editor Fancy Boot Style Bootstrap Lavish Bootstrap ThemeR ...
- vi编辑器命令
Linux下的文本编辑器有很多种,vi 是最常用的,也是各版本Linux的标配.注意,vi 仅仅是一个文本编辑器,可以给字符着色,可以自动补全,但是不像 Windows 下的 word 有排版功能.v ...
随机推荐
- 作为Bootstrap中文站维护者-我们再次翻译BootstrapVue项目
点击立即进入BootstrapVue中文站 http://code.z01.com/bootstrap-Vue Bootstrap-Vue 基于全球最流行的前端框架组合应用系统 项目介绍 Bootst ...
- 菜鸡的Java笔记 第二十九 - java 单例设计模式
SingleCase 单例设计模式 1.单例设计模式的特点 2.多例设计模式的特点 内容 单例设计模式 现在如果说有这么一个程序类 class S ...
- Spark SQL知识点大全与实战
Spark SQL概述 1.什么是Spark SQL Spark SQL是Spark用于结构化数据(structured data)处理的Spark模块. 与基本的Spark RDD API不同,Sp ...
- [luogu7340]Balance
构造一个坐标系,共有$n$个黑点和百点,第$i$个黑点为$(p_{i},a_{i})$,第$i$个白点为$(-q_{i},-b_{i})$ 考虑第$i$个黑点和第$j$个白点连线的斜率,恰好就是$f( ...
- 设计模式学习-使用go实现访问者模式
访问者模式 定义 优点 缺点 适用范围 代码实现 什么是 Double Dispatch 参考 访问者模式 定义 访问者模式(Visitor):表示一个作用于某对象结构中的各元素的操作.它使你可以在不 ...
- python网络自动化运维之环境搭建(EVE-NG+pycharm)
参考了很多资料,发现现在很多环境用的都是GNS3加linux下的python,几乎没有是用EVE-NG加上pycharm的教程,EVE的功能如此强大,存在的教程却较少,这里我出一篇教程供使用EVE作为 ...
- jmeter ssh command方式执行hive指令
Hive命令执行 打开任意一个安装了hive的服务器,进入hive bin 路径,可以看到存在以下文件(仅展示部分): -rwxr-xr-x 1 root root 1297 Jun 28 14:29 ...
- 分布式多任务学习论文阅读(四):去偏lasso实现高效通信
1.难点-如何实现高效的通信 我们考虑下列的多任务优化问题: \[ \underset{\textbf{W}}{\min} \sum_{t=1}^{T} [\frac{1}{m_t}\sum_{i=1 ...
- P4569 [BJWC2011]禁忌
题目传送门. 题意简述:给出大小为 \(n\) 的字典 \(s\).设函数 \(g(t)\) 表示 \(t\) 最多能被分割成的单词个数.等概率随机生成长度为 \(len\) 的字符串 \(T\),求 ...
- 【Python小试】计算蛋白序列中指定氨基酸所占的比例
编码 from __future__ import division def get_aa_percentage(protein, aa_list=['A','I','L','M','F','W',' ...