在按钮上滚动溢出文本的简单方法？答案

【问题标题】：Easy way to scroll overflow text on a button?在按钮上滚动溢出文本的简单方法？
【发布时间】：2008-09-29 01:08:04
【问题描述】：

有没有人有任何示例或资源，我可以找到关于滚动文本的信息，这些信息太长而无法在按钮控件中显示？我正在考虑这些方面的事情。

显示尽可能多的文本以适合当前矩形，并在末尾带有“...”以表示溢出。
暂停 1 秒钟，然后将文本慢慢滚动到显示字符串右侧部分的右侧边缘。
在当前矩形中显示尽可能多的文本，并在开头使用“...”表示溢出。
从头再来。

有没有一种简单的方法可以使用特定移动设备上的“核心”或内置“动画”框架来做到这一点？

[编辑] 我想添加更多细节，因为我认为人们更关注我想要完成的事情是否合适。该按钮用于问答游戏的答案。它不执行任何特定的 UI 功能，但用于显示答案。 Apple 自己在 iPod Nano 上的 iQuiz 琐事游戏中就这样做了，我认为这是一个非常优雅的解决方案，可以解决比我的按钮宽度更长的答案。

万一它的“...”是这个的困难部分。可以说我删除了这个要求。我可以让按钮的标签全尺寸，但剪辑到按钮的客户端矩形并使用一些动画方法在剪辑矩形内滚动它吗？这会给我几乎相同的效果减去省略号。

【问题讨论】：

标签： iphone cocoa animation core-animation

【解决方案1】：

这里有一个想法：不要使用省略号 (...)，而是在每一侧使用渐变，这样多余的文本就会逐渐消失在背景色中。然后你可以用三个 CALayers 来做到这一点：一个用于文本，两个用于淡化效果。

淡入淡出蒙版只是具有从透明到背景颜色的渐变的矩形。它们应位于文本层上方。文本将被绘制在文本层上，然后您只需动画它以您描述的方式来回滑动。您可以创建一个描述路径的 CGPath 对象并将其添加到您添加到文本层的 CAKeyframeAnimation 对象。

至于你认为这是否“简单”取决于你对 Core Animation 的了解程度，但我认为一旦你学习了 API，你会发现这并不算太糟糕，值得一试。

【讨论】：

【解决方案2】：

不想变得迟钝，也许你应该重新考虑你的问题。一个按钮应该有一个清晰和可预测的功能。它不是存储和显示文本的地方。也许您可以在屏幕上显示一个描述，并在下方带有一个不错的标准按钮？

【讨论】：

【解决方案3】：

更新源代码示例：

Here is some ready to use source code example（实际上是一个完整的压缩 Xcode 项目，包含图像和 nib 文件以及一些源代码），不适用于 iPhone，不使用 Core Animation，只使用几个简单的 NSImage 和一个 NSImageView。这只是一个廉价的 hack，它没有实现您要求的全部功能（对不起，但我不想为您编写源代码 :-P），糟糕的代码布局（嘿，我只是在一个几分钟，所以你不能指望更好;-)) 这只是一个演示如何做到这一点。它也可以通过 Core Animation 完成，但这种方法更简单。将按钮动画组合到 NSImageView 中不如将 NSView 子类化并直接绘制到其上下文中那么好，但它要简单得多（我只是想将最简单的解决方案组合在一起）。一旦一直向右滚动，它也不会向后滚动。因此，您只需要另一种方法来回滚并启动另一个 NSTimer，它会在您将点绘制到左侧 2 秒后触发。

只需在 Xcode 中打开项目并点击运行即可。然后看看源代码。真的没那么复杂（不过，你可能得先重新格式化，布局很烂）。

由于对我的回答的评论而更新：

如果您根本不使用 Apple UI 元素，我看不到问题所在。在这种情况下，您的按钮甚至不是按钮，它只是一个可点击的视图（如果您使用 Cocoa，则为 NSView）。您可以将 NSView 子类化为 MyAnswerView 并覆盖paint方法以绘制任何您想要的视图。多行文字、滚动文字、3D文字动画，完全由你想象。

Here's an example，展示了某人如何将 NSView 子类化以创建一个默认情况下不存在的完整自定义控件。控件如下所示：

看到左上角有趣的东西了吗？那是一个控制。以下是它的工作原理：

我不想这么说，因为这不是你问题的答案，而是“不要那样做！”。 Apple 有如何实现用户界面的指南。虽然您可以随意忽略它们，但 Apple 用户习惯于让 UI 遵循这些准则，而不遵循它们会创建 Apple 用户认为丑陋且没有吸引力的应用程序。

Here are Apple's Human Interface Guidelines

让我从那里引用

按钮内容和标签

一个按钮总是包含文本，它不包含图像。如果你需要显示图标或其他图像按钮，使用斜角按钮，在“斜角按钮”中进行了描述。

按钮上的标签应该是描述事物的动词或动词短语它执行的操作——保存、关闭、打印、删除、更改密码等。如果一个按钮作用于单个设置，将按钮标记为尽可能具体； “选择图片...，”例如，更多比“选择……”更有帮助，因为按钮立即采取行动，它不需要使用“现在” （例如，立即扫描）。

按钮标签应该有标题风格的大写，如在“大写界面元素标签和文本。”如果按钮立即打开另一个窗口、对话框或应用程序要执行其操作，您可以使用标签中的省略号。例如，邮件首选项显示推送包含省略号的按钮因为它打开了.Mac系统首选项，如图15-8所示。

按钮应包含单个动词或动词短语，而不是琐事游戏的答案！如果您有 2 到 5 个答案，您应该使用单选按钮让用户选择答案，并使用确定按钮让用户接受答案。对于超过 5 个答案，您应该根据指南考虑使用弹出式选择器，尽管我想在这种情况下会相当难看。

如果答案很长并且需要中断，您可以考虑使用只有一列、每个答案一行且每个单元格为多行的表格。因此，用户通过单击选择表格行，突出显示表格单元格，然后单击“确定”按钮完成。或者，您可以直接继续，只要用户选择任何表格单元格（但这样您就可以让用户有机会更正意外点击）。另一方面，多行单元格的表格在 MacOS X 上相当少见。iPhone 使用了一些，但通常只有很少的文本（最多两行）。

【讨论】：

我的 UI 没有使用任何苹果的内置 UI 元素，我希望保持这种状态。虽然我很欣赏你的餐桌建议，但它不符合我的主题。请参阅driph.com/words/2008/08/game-trivia-catechism-iphone-teaser 了解我为什么要这样做。
感谢代码示例。我实际上拿起了实用程序员核心动画书，并得到了一个在核心动画中运行的非常相似的示例，并决定不使用它，因为它看起来不适合 4 个按钮滚动文本。不过，尝试一下是个好主意。

【解决方案4】：

很确定您不能使用标准 API 做到这一点，当然不能使用 UILineBreakMode。此外，样式指南说省略号表示按下按钮时会询问您更多信息 - 例如 Open File... 将询问文件名。您对省略号的提议使用违反了本指南。

你需要一些自定义逻辑来实现你描述的行为，但我认为这不是要走的路。

【讨论】：

【解决方案5】：

这不是一个很好的 UI 实践，但如果您仍然想这样做，最好的办法是通过一个看起来像按钮的可点击 div。

将 div 的宽度设置为显式值，并将其溢出设置为隐藏，然后使用间隔执行的脚本来调整此 div 的 scrollLeft 属性。

【讨论】：