腾讯开源利器:让iOS UI调试更高效

最近逛G站,偶然发现一款 iOS UI 调试工具,那就是腾讯 QMUI团队 开源的LookinServer。初步体验了一下,功能还是非常强大,简单记录并分享一下。

简介

腾讯的LookinServer是一款专为iOS开发者设计的UI调试工具,类似于 Xcode 自带的 UI Inspector 工具,或者以前常用的另一款软件Reveal

LookinServer

基本功能

1、实时UI查看:
LookinServer可以实时捕捉并显示iOS应用的UI层级结构。这包括所有的视图(Views)、控件(Controls)以及它们的属性(Properties)等。

2、层级视图展示:
通过图形化界面,开发者可以方便地浏览UI的层级关系。这有助于快速定位UI问题,例如某些视图被错误地覆盖或布局不正确。

3、属性编辑:
开发者可以直接在LookinServer中修改视图的属性(如frame、color等),并立即在应用中看到效果。这种所见即所得的调试方式大大加快了UI调整的效率。

4、视图调试:
LookinServer支持对单个视图进行详细调试,包括查看其布局约束、事件响应链、以及性能指标等。

工作原理

1、数据抓取:
LookinServer会将目标iOS应用中的UI数据抓取下来。这通常涉及到通过iOS的运行时(Runtime)机制和反射机制来获取应用当前的UI层级和视图信息。

2、通信机制:
LookinServer客户端与iOS应用之间通过网络通信进行数据传输。应用中集成的LookinServer SDK会将视图层级、属性等数据打包发送到LookinServer客户端进行展示。

3、动态更新:
当开发者在LookinServer客户端中修改视图属性时,修改指令会通过通信机制发送回iOS应用,应用立即应用这些修改并更新显示。通过这种方式,实现了实时的UI调试。

使用场景

1、UI布局调试:
快速发现并修正UI布局问题,例如视图错位、层级不正确等。

2、UI性能优化:
查看每个视图的性能指标,找出性能瓶颈并进行优化。

3、快速迭代:
在开发过程中频繁修改UI时,通过LookinServer可以快速预览效果,减少编译和重启应用的时间。

优势

1、提高效率:
实时查看和修改UI,大大减少了传统调试方式的时间成本。

2、直观可视化:
图形化的视图层级展示,让开发者可以更直观地理解UI结构。

3、易于集成:
LookinServer Framework易于集成到现有项目中,支持CocoaPods、 Swift Package Manager以及手动集成,支持OC和Swift,不需要对项目做大的改动。

小试牛刀

1、安装Lookin:
官网下载并安装Lookin Mac客户端。

2、安装 LookinServer Framework:

  • 通过 CocoaPods
    • Swift项目:pod ‘LookinServer’, :subspecs => [‘Swift’], :configurations => [‘Debug’]
    • ObjC项目:pod ‘LookinServer’, :configurations => [‘Debug’]
  • 通过 Swift Package Manager:https://github.com/QMUI/LookinServer/
  • 手动集成:下面以OC项目为例
    将下载的源码导入项目中,注意Swift文件夹里面的可以删除,或者将文件LKS_SwiftTraceManager.swift不加到target里参与编译。
    在这里插入图片描述

Debug模式下,打开SHOULD_COMPILE_LOOKIN_SERVER宏定义。
在这里插入图片描述

3、简单使用:
建个项目,拖几个控件,运行,打开第一步安装的LookinMac 软件,监测到运行的项目,可以看到视图层级关系、target-action、手势、常见属性设置等,UI及时同步刷新。
在这里插入图片描述

注意事项

1、需要在 Debug 模式下使用
2、使用 1.0.6及以后 的版本

总结

腾讯的LookinServer是一个强大的iOS UI调试工具,其通过实时查看、编辑和调试视图层级和属性,极大地提高了UI开发和调试的效率。通过掌握其原理和使用方法,开发者可以更高效地处理UI问题,提高应用的整体质量。

  • 23
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Android 项目中使用 QMUI Android,可以按照以下步骤进行: 1. 将 QMUI Android 引入项目中,可以使用 Gradle,将以下代码添加到 `build.gradle` 文件中: ```groovy dependencies { implementation 'com.qmuiteam:qmui:2.1.0' } ``` 2. 在 Application 类中初始化 QMUI,可以在 `onCreate()` 方法中添加以下代码: ```java public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); QMUI.init(this); } } ``` 3. 在布局文件中使用 QMUI 的控件,例如: ```xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:qmui="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.qmuiteam.qmui.widget.QMUITopBarLayout android:id="@+id/topbar" qmui:layout_constraintTop_toTopOf="parent" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"/> <com.qmuiteam.qmui.widget.QMUIRoundButton android:id="@+id/button" android:text="Button" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> ``` 在这个例子中,我们使用了 `QMUITopBarLayout` 和 `QMUIRoundButton`,它们都是 QMUI 的控件,可以通过 `xmlns:qmui="http://schemas.android.com/apk/res-auto"` 引入 QMUI 的命名空间。 在 Activity 类中,可以通过以下方式来获取控件的实例: ```java public class MyActivity extends AppCompatActivity { private QMUITopBarLayout mTopBarLayout; private QMUIRoundButton mButton; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); mTopBarLayout = findViewById(R.id.topbar); mButton = findViewById(R.id.button); // 设置 TopBar 的标题 mTopBarLayout.setTitle("My Activity"); } } ``` 以上就是使用 QMUI Android 的基本步骤,多的 QMUI 控件和用法可以参考官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值