Reveal常用技巧(翻译来自Reveal官网blog)

翻译来自官网:http://revealapp.com/blog/reveal-common-tips-cn.html

以下基于Reveal 1.6。

用于快速上手的内置应用

刚刚下载Reveal,啥都还没配置呢,想先随便玩玩看,怎么办?

我们花了不少时间开发这个复杂程度类似与实际场景的Sample应用──Soundstagram(音频分享版的Instagram, ¯\_(ツ)_/¯),就是为了让大家能最快速地上手Reveal,尝试它的各种强大功能。

在 Help 菜单项中,点击 Inspect Sample App ,稍微等一会,Reveal会将Soundstagram应用拷贝到你的iPhone模拟器中,并自动打开应用,自动连上开始Debug。一键搞定,你马上就会看到活的Reveal了。

集成

关于具体如何将Reveal集成到App中的各种方法,请参考官方的中文文档,当中有非(guo)常(yu)详细的介绍。

这里就啰嗦一句,对于专业的iOS工程师(可是连我们的设计师也毫不留情地采用了这种配置),我个人强烈推荐通过Xcode中加断点的方式集成Reveal。一次配置,终生受益,无论到哪个项目,简直太方便了,有木有。(小缺陷,当你禁用断点时或者不用Xcode而用Appcode开发时,这个方式是不管用的。)

常用的快捷键

这不是一个详细全面的快捷键列表,我只说点特别常用的。

快捷键 作用
(在iPhone模拟器中按)? ? r 切换到Reveal并刷新
? → 和 ? ← 在View的选择历史中,前进后退
? ? 滚动 3D视图时增大/缩小每层视图的间距
? 4 和 ? 5 在2D和3D视图间切换
? r 刷新(强迫症必备)

重度快捷键用户,请到 _Help -> Keyboard Shortcuts 中查看详细列表。

自动布局的调试

自动布局(Auto Layout)已经越来越普遍的深入千家万户了,随着iOS设备分辨率的多(sui)样(pian)化,自动布局已慢慢成为了标准配置。

  1. 你可能经常看到控制台输出类似这样的内容,而不知何处下手:
Unable to simultaneously satisfy constraints.
        Probably at least one of the constraints in the following list is one you don‘t want. Try this: (1) look at each constraint and try to figure out which you don‘t expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you‘re seeing NSAutoresizingMaskLayoutConstraints that you don‘t understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
    (
        "<NSLayoutConstraint:0x7fc82d3e18a0 H:[UIView:0x7fc82aba1210(768)]>",
        "<NSLayoutConstraint:0x7fc82d6369e0 H:[UIView:0x7fc82aba1210]-(0)-|   (Names: ‘|‘:UIView:0x7fc82d6b9f80 )>",
        "<NSLayoutConstraint:0x7fc82d636a30 H:|-(0)-[UIView:0x7fc82aba1210]   (Names: ‘|‘:UIView:0x7fc82d6b9f80 )>",
        "<NSLayoutConstraint:0x7fc82d3e7fd0 ‘UIView-Encapsulated-Layout-Width‘ H:[UIView:0x7fc82d6b9f80(50)]>"
    )

    Will attempt to recover by breaking constraint
    <NSLayoutConstraint:0x7fc82d3e18a0 H:[UIView:0x7fc82aba1210(768)]>

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
    The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
 
  1. 除了我们在编码时自己绑定到View上的约束条件(Constraints)之外,其实许多UIKit控件还会被隐式地地设置上一些约束,而这些可能会带来一些意外的布局结果。

也许曾经你需要使用LLDB来一点点调试Auto Layouts:

(lldb) po 0x7731880
$0 = 124983424 <UIView: 0x7731880; frame = (90 -50; 80 100);
layer = <CALayer: 0x7731450>>

(lldb) po [0x7731880 superview]
$2 = 0x07730fe0 <UIView: 0x7730fe0; frame = (32 128; 259 604);
layer = <CALayer: 0x7731150>>

(lldb) po [[0x7731880 superview] recursiveDescription]
$3 = 0x07117ac0 <UIView: 0x7730fe0; frame = (32 128; 259 604); layer = <CALayer: 0x7731150>>
   | <UIView: 0x7731880; frame = (90 -50; 80 100); layer = <CALayer: 0x7731450>>
   | <UIView: 0x7731aa0; frame = (90 101; 80 100); layer = <CALayer: 0x7731c60>>

有了Reveal,这就方便多了。Reveal对视图上的约束条件提供了相当丰富的检视与实时修改功能,具体看下面这张图,再自己摸索一下就好了。

a显示/隐藏所有约束条件
b 查看关联到此View的所有约束
c 可以直接在Canvas中选中某一约束
d 查看某一约束的具体信息,可以实时修改constant属性,立刻检查效果
e 跳转到某一约束的详细属性页面

实时修改View属性

Reveal不仅仅只是查看各种属性的工具,也支持实时的修改一些属性。如下图中的大部份属性,你都可以实时的在模拟器中看到修改后的效果。这省去了过去总是要修改代码,重新编译运行这个漫长的反馈流程。在和设计师一起尝试各种显示效果时,这个功能特别高效。

Snapshot

Reveal还具有保存现场的功能(快捷键,? s),它将保存应用的截图,所有View的层级结构和具体属性信息。换句话说,下次你打开这个Snapshot文件时,不需要启动iOS应用,也可以看到所有的视图信息。

一些可能的使用场景:你可以在描述布局问题时,给其他团队成员分享Snapshot;还可以对不同大小的模拟器分别保存Snapshot,然后再做详细地比较,找出问题所在。

时间: 2024-10-12 02:36:10

Reveal常用技巧(翻译来自Reveal官网blog)的相关文章

ng2响应式表单-翻译与概括官网REACTIVE FORMS页面

本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将解释响应式表单并用来创建一个英雄详情编辑器. 包含内容: 响应式表单介绍 开始搭建 创建数据模型 创建响应式的表单组件 创建组建的模板文件 引入ReactiveFormsModule 显示HeroDetailComponent 添加一个FormGroup 看看表单模型 介绍FormBuilder 验

【翻译】苹果官网的命名规范之 Naming Properties and Data Types

苹果官方原文:Naming Properties and Data Types 前言:纯属练习英语和学习.翻译错误和不通顺的地方敬请谅解和指正.O(∩_∩)O 属性和数据类型的命名 本节讲述了属性定义.变量.常量.通知和异常的常用命名规范. l 定义属性和变量 一个属性定义会影响该属性的访问方法的定义.所以属性的命名规范大体上和访问器(getter,setter)的命名规范是一致的.如果一个属性是表达一个名词或者动词,那么定义如下: @property(…) type nounOrVerb 例如

jQuery选择器最佳实践--来自jQ官网

1.基于ID选择器进行查询,并且使用find方法. 1 //快速 2 $("#container div.footer"); 3 4 //超快 5 $("#container").find("div.footer"); 使用find方法会减少遍历节点的时间. 2.使用混合选择器时,在右边的选择器最好具体一些. 1 //优化前 2 $("div.data .footer"); 3 4 //优化后 5 $(".data

FineBI学习系列之FineBI官网提供的SAP数据集(图文详解)

不多说,直接上干货! 这是来自FineBI官网提供的帮助文档 http://help.finebi.com/http://help.finebi.com/doc-view-32.html 目录: 1.描述 2.环境准备 3.SAP数据连接 1.描述 加SAP数据集也是服务器数据集的一种情况, 但是由于SAP数据集常用而且有较多需要注意的配置,因此单独做一节进行说明.那客户SAP系统集成时,如何将SAP中的数据导入BI的服务器数据集呢?FineReport8.0版本中,将SAP数据连接功能做成一个

FineBI学习系列之FineBI官网提供的服务器数据集(图文详解)

不多说,直接上干货! 这是来自FineBI官网提供的帮助文档 http://help.finebi.com/http://help.finebi.com/doc-view-30.html 目录: 1.描述 2.设计器远程连接方法及步骤 3.服务器数据集建立步骤 4.服务器数据集使用方法 1.描述 在前面章节中我们介绍了如何通过BI的数据连接功能来连接要访问的数据库,具体见 这一节介绍如何使用服务器数据集.与数据库数据集不同,服务器数据集是不随数据连接的变化而变化的,这些数据存储在BI的服务器中的

FineBI学习系列之FineBI官网提供的程序数据集(图文详解)

不多说,直接上干货! 这是来自FineBI官网提供的帮助文档 http://help.finebi.com/http://help.finebi.com/doc-view-31.html 目录: 1.描述 2.实现原理 3.案例 1.描述 由上一节BI可能通过设计器远程服务器的方式,以服务器数据集的形式来连接数据. 这样其数据来源可以是数据库数据,还可以是其它任何类型的数据,因为BI是通过AbstractTableData抽象类来读取数据源的,而上述所有的数据来源都继承实现其抽象方法,因此BI可

程序员必知的技术官网系列--spring篇

进入官网首先看到的是官网的轮播和首页导航,其中首页导航有四个, 下图有详细介绍, 随后也会单独讲解个导航包含的内容,本文只介绍前两个导航栏的内容, 本文只负责介绍官网的页面结构和文章用到的页面的内容翻译来辅助官网内容结构的讲解, 不做具体技术文档的解释, 以后有机会了再做解释. 好了开干. 首页 官网首页导航 看完导航栏后我们先往下滚动可以看到spring全家桶中的三个明星产品:spring boot,spring cloud,spring data flow和一个居中的标题spring:the

Android 7.0行为变化—开发者应该关注的(官网同步翻译)

Android 7.0行为变化-开发者应该关注的(官网同步翻译) 版权声明:转载必须注明本文转自严振杰的博客: http://blog.yanzhenjie.com 如果想了解更多Android7.0的内容,可以顺便再看看Android7.0写给开发者的一封信(官网同步翻译). 如果你的引文够好,推荐你阅读官网文章: Android 7.0 Behavior Changes Android N 除了提供诸多新特性和功能外,还对系统和 API 行为做出了各种变更.本文重点介绍你应该了解并在开发应用

卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】

问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没有完成(例如,如果它是由一个虚拟机超时中断),和你想继续安装,然后重新安装,做到以下几点:删除文件和目录: 个人建议:这一步虽然是官网这么做,但是下面命令还是不要执行,因为我们后面还会用到下面命令 /usr/share/cmf/uninstall-cloudera-manager.sh 复制代码 当