滚动按钮上的溢出文本的简单方法?

时间:2008-09-29 01:08:05

标签: iphone cocoa animation core-animation

有没有人有任何示例或资源可以找到滚动文本的信息,这些信息太长而无法在按钮控件中显示?我正在考虑这些问题。

  • 显示尽可能多的文本将适合当前的rect,并在末尾加上'...'表示溢出。
  • 暂停1秒,然后慢慢将文本滚动到右边缘,显示字符串的右侧部分。
  • 显示尽可能多的文本将适合当前的rect,并在开头用'...'表示溢出。
  • 反过来开始整个事情。

在某个移动设备上使用“核心”或内置“动画”框架是否有一种简单的方法可以做到这一点?

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

如果它的'...'是这个的困难部分。让我们说我删除了这个要求。我可以将按钮的标签设置为全尺寸,但是剪切到按钮的客户端矩形并使用一些动画方法在剪切矩形中滚动它吗?这会给我几乎相同的效果减去省略号。

5 个答案:

答案 0 :(得分:2)

不希望变得迟钝,也许你应该重新思考你的问题。按钮应具有清晰且可预测的功能。它不是存储和显示文本的地方。也许你可以在屏幕上看一个描述节目,下面有一个很好的标准按钮?

答案 1 :(得分:2)

使用源代码示例进行更新:

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

只需在Xcode中打开项目并点击运行,就可以了。然后看看源代码。这真的不是那么复杂(但是,你可能必须首先重新格式化,布局很糟糕)。


因为对我的回答发表评论而更新:

如果您根本不使用Apple UI元素,我看不到问题。在这种情况下,你的按钮甚至不是一个按钮,它只是一个可点击的视图(NSView,如果你使用Cocoa)。您可以将NSView子类化为MyAnswerView,并覆盖paint方法以根据需要绘制到视图中。多行文字,滚动文字,3D文字动画,完全取决于你的想象力。

Here's an example,显示某人如何创建一个默认情况下不存在的完整自定义控件的子视图。控件如下所示:

alt text

看到左上角有趣的事情?这是一个控制。以下是它的工作原理:

alt text


我不愿意这样说,因为这不是你的问题的答案,而是“不要那样做!”。 Apple提供了如何实现用户界面的指南。虽然您可以自由地忽略它们,但Apple用户习惯按照这些准则使用UI而不遵循它们将创建Apple用户觉得丑陋而且不那么有吸引力的应用程序。

Here are Apple's Human Interface Guidelines

让我引用那里

  

按钮内容和标签

     

按钮始终包含文本   不包含图像。如果你需要   在...上显示图标或其他图像   按钮,改为使用斜角按钮,   在“斜角按钮”中描述。

     

按钮上的标签应为a   动词或动词短语描述   它执行的操作 - 保存,关闭,打印,   删除,更改密码等。如果   按钮作用于单个按钮   设置,将按钮标记为   特别是尽可能; “选择   图片......,“例如,更多   比“选择...”更有帮助因为按钮   它会立即采取行动   不应该使用“现在”   (标签中的“立即扫描”。

     

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

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

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

答案 2 :(得分:2)

这是一个想法:代替省略号(...),在每一侧使用渐变,因此额外的文本会淡化为背​​景颜色。然后你可以用三个CALayer来做到这一点:一个用于文本,两个用于淡入淡出效果。

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

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

答案 3 :(得分:0)

非常确定你不能使用标准API,当然不能使用UILineBreakMode。此外,样式指南说省略号表示按下按钮会询问您更多信息 - 例如Open File ...将询问文件的名称。您建议使用省略号违反了本指南。

您需要一些自定义逻辑来实现您描述的行为,但我认为无论如何都不应该这样做。

答案 4 :(得分:0)

这不是一个非常好的用户界面练习,但如果您仍然想要这样做,最好的办法是通过一个可点击的div来实现,看起来就像一个按钮。

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