cocoa - 如何用cocoa实现时间轴自定义控件？

Question

我的 Cocoa 应用程序收集需要在时间线中显示的事件(NSManagedObject 的实例)。我最初的方法是使用现有的基于 Javascript 的小部件(我尝试使用 Simile Timeline 和 Timeglider)并使用 WebView 控件显示时间线。原则上这是可行的，但不幸的是，这两个小部件都不能很好地处理 BC 日期，而这对我的应用程序来说是一个重要要求。

我的应用中的事件的日期范围是从公元前 500.000 年到最近的日期。事件日期仅用年份表示。它们的日、月和时间属性无关。

放弃 Javascript 方法后，我保留使用自定义 Cocoa 控件显示时间线的选项。由于我发现没有合适的，我将不得不自己开发。

这将是我的第一个自定义 Cocoa 控件，经过一段时间的思考，我提出了以下粗略设计:

• 我需要一个自定义控件来呈现实际的时间线。该控件可能基于 NSView。该控件应根据时间线上刻度线的数量乘以每个标记之间的宽度(像素)来计算其大小。例如，时间线由几个世纪组成，每个世纪 100 像素宽。公元前 10.000 年到公元前 5.000 年之间的事件时间线将为 5000 像素宽(10000 - 5000 = 5000 年，等于 50 个世纪)。

• 我需要一个 ScrollView 来包裹时间线以使其支持滚动行为。只需要水平滚动即可。

• 我需要一些东西来代表实际事件。我正在考虑为此使用现有控件，可能是将标准圆形按钮和标签包装在一起作为单个控件。

• 我需要一个自定义控件来在时间线上呈现刻度线。

以此作为 Cocoa 中时间线组件的基本设计，这会起作用还是我完全没有捕获重点？

Answer 1

基本方法听起来不错。

Apple 有一个创建名为“TreeView”的自定义 NSView 的好例子。这是一个很好理解的示例。

https://developer.apple.com/library/mac/#samplecode/TreeView/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010131

“TreeView” presents an example of a creating an entirely new custom view from scratch (by directly subclassing NSView). Its implementation illustrates many of the considerations involved in creating a custom view, including issues of content layout, drawing, handling user interaction, and providing Accessibility support.

您可能需要考虑的另一件事是放大和缩小。如果您的时间线很长，我想您可能想要缩小然后放大一组事件。如果您在公元前 10k 发生了一个事件，然后在很久以后发生了一系列事件，那么用户可能会滚动大量的空白空间来尝试查找事件。另一种方法是在上面有一个适合/静态大小的迷你时间轴，有点像带有显示事件点的线条的索引 - 然后单击它会自动滚动到该点。根据您的数据，这可能会很好。

一些想法:

对于这种自定义绘制的内容，您需要重写drawRect来绘制线条并布局您的子控件。

如果您要绘制背景或 View 的任何部分，请确保启用图层支持的 View :

[self setWantsLayer:YES];

如果可以，正如您所指出的，请尝试利用您添加和布局的现有控件。在我的自定义控件中，我维护独立于表示所有对象状态的 View /控件的数据结构。在drawRect中，我检测到 View 发生变化，并调用了layoutSubviews函数。我的layoutSubViews函数将从我的数据结构中进行数学计算，并创建或移动现有控件的框架。这对于调整大小和缩放效果很好。如果您进行缩放，您的标签广告标记将需要对缩放得非常小做出良好的 react - 也许文本在某些时候会丢失等...

if ([self dataSource] && 
    !NSEqualRects(_prevRect, [self bounds]))
{
    // layoutViews is my custom function that worked over the data structures
    // and moved the frame
    [self layoutViews];
}

_prevRect = [self bounds];

希望有帮助。