macOS 开发基础教程视频 - 理解bounds本质

frame与bounds的坐标系统(图片来自网络)

秦人不暇自哀,而后人哀之;后人哀之而不鉴之,亦使后人而复哀后人也

便捷的网络时代学习,更注重对基础知识的。在macOS 开发基础教程视频课程的NSView章节中,解释了关于视图的framebounds坐标参照系统,限于授课经验课程时间,感觉对NSView的bounds属性,表述的不够深入,希望通过本文帮助观看课程的同学加深对bounds的理解,并通过实例运用,体会在NSViewbounds的真正价值。

关于视图NSViewframebounds的概念,我们就不再介绍了,(课程的视频中有图例讲解,网上也有相关资料),这里只重点突出视频教程中的阐述的两个点:

  • frame : 相对父控件的坐标系统的描述
  • bounds:相对NSView自身坐标系统的描述

上面这两点如果从字面的含义理解起来可能会觉得有些抽象,为了便于具体说明,我们打个比方,将frame想象成为一个相框,它的作用仅仅是告诉父控件自己需要占据的位置尺寸(嘿!父控件,我需要在你的坐标系统中的占据这个frame.origin位置,尺寸是frame.size的区域),这样以来,父控件在布局的时候,就会知道如何摆放它内部的所有控件了。

视图NSView里的各种内容(subViews),我们可以想象成为各种相片,它们既可以摆放在相框的(frame)内部,也可以摆放在相框的(frame)外部。这正如你在房间的墙上(父控件)里放置了一个有相框壁画(NSView)

为了防止壁画(NSView)蒙尘,你将整个壁画(NSView)都遮盖保护起来。可是一旦遮盖起来,你发现自己都无法观看了,这时候你想到了一个聪明的办法:在遮盖上开启一个矩形的窗口,透过这个窗口,就可以看到遮盖下面的壁画(NSView)了,如你所料:这个矩形的窗口就是bounds

通过bounds,我们就可以看到NSView内部所展示的内容。如果bounds比较小(就像你在遮盖上开了一个小小的窗口),可以通过移动bounds位置,来展示NSView的各个区域内容。这样bounds就成为了我们对NSView的观景窗~

如果现在你已经理解了bounds,那么对于ScrollView的是如何实现滑动展示其内部视图内容,就不会觉得奇怪了。

下面我们通过一个示例来加深对bounds的理解和使用

  1. 创建一个Mac application 项目工程,从控件库中拖动一个customView到ViewController中,并搭建UI界面大致如下:

UI界面

  1. 在customView中添加随意几个box视图,并设置颜色(为了观看效果)。
  2. 添加自定义类CustomScrollView.swift文件(继承自NSView)来管理customView控件
  3. 在Storyboard中设置customView的类属性为:CustomScrollView

设置customView

  1. 实现CustomScrollView.swift的代码:
import Cocoa
class CustomScrollView: NSView {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        NSColor.lightGray.set()
        NSRectFill(dirtyRect)

        // Drawing code here.
    }
    override func awakeFromNib() {
        super.awakeFromNib()
        let pan = NSPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
        addGestureRecognizer(pan)
    }
   // 移动鼠标时,修改视图的bounds属性,即可实现scroll效果
    func handlePanGesture(_ panGesture : NSPanGestureRecognizer){
        let transPoint = panGesture.translation(in: self)
        bounds.origin.x -= transPoint.x
        bounds.origin.y -= transPoint.y
        panGesture .setTranslation(NSZeroPoint, in: self)
    }
}
  1. 最终运行效果:

运行效果

结束语

我们通过修改一个NSViewbounds,自己实现了一个类似的ScrollView,希望通过本文视频课程的补充,对你理解bounds属性有所助益,并同时希望对ScrollView的实现机制,你也能有比从前更多一点的掌握了。

谢谢观看,祝课程学习愉快~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

案例|产品介绍(喜力啤酒价格构成图)

今天要跟大家分享的是产品介绍的一般思路! 产品介绍可能是我们日常做演示文稿需求最频繁的任务之一。 它见诸于课堂演示、新品发布会、业绩报告会以及融资路演的大屏幕...

37750
来自专栏前端说吧

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

50170
来自专栏进击的君君的前端之路

初识React

13420
来自专栏琯琯博客

awesome-css-cn命名习惯和方式参考其他资源原文链接

CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

49080
来自专栏极客慕白的成长之路

Web前端开发推荐阅读书籍、学习课程下载

学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢?

59160
来自专栏编程坑太多

jQuery 之 元素节点操作滚轮事件与函数节流

31060
来自专栏HTML5学堂

移动端开发-iPhone、iPad的默认按钮样式等开发经验

HTML5学堂:从JS的逻辑层来说,移动端远远不如PC平台,但是“恐怖的”兼容问题是移动端最为头疼的地方。本文介绍iPad与iPhone的默认按钮样式的处理方法...

28450
来自专栏ytkah

3个技巧快速入门微信文章排版

  编辑微信图文消息,我们有时会先保存在word文档中,或者是企划部给你的新闻稿,里面有不同的字体(大小)、格式,如果我们直接Ctrl+c/v,那么领导很快会找...

32550
来自专栏HT

HT全矢量化的图形组件设计

HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: 矢量可无级缩放,界面不失真不模糊 描述矢量的文本内容远比图片小得多 目...

26990
来自专栏菜鸟前端工程师

html+css学习笔记009-定位

11820

扫码关注云+社区

领取腾讯云代金券