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

时间:2020-03-06 14:51:24  来源:igfitidea点击:

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

  • 显示尽可能多的文本将适合当前矩形,并在末尾带有" ..."以表示溢出。
  • 暂停一秒钟,然后将文本缓慢滚动到显示字符串右侧的右边缘。
  • 显示尽可能多的文本将适合当前矩形,并在开头添加" ..."以表示溢出。
  • 重新开始整个过程​​。

是否有一种简单的方法可以在特定移动设备上使用"核心"或者内置的"动画"框架来实现?

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

万一它的" ..."是这困难的部分。可以说我删除了此要求。我可以将按钮的标签放大,但是剪裁到按钮的客户区域,并使用一些动画方法在剪切区域内滚动吗?减去椭圆,这将给我几乎相同的效果。

解决方案

可以肯定,我们不能使用标准API来做到这一点,当然不能使用UILineBreakMode。此外,样式指南还说,省略号表示按下该按钮时会要求我们提供更多信息,例如,"打开文件..."将要求我们提供文件名。我们建议的省略号用法违反了该准则。

我们需要一些自定义逻辑来实现我们描述的行为,但是无论如何我都不认为这是可行的方法。

不希望自己变得笨拙,也许我们应该重新考虑问题。按钮应具有清晰可预测的功能。它不是存储和显示文本的地方。也许我们可以在屏幕上显示说明,并在下面显示一个漂亮的标准按钮?

这不是一个很好的UI做法,但是如果我们仍然想要这样做,那么最好的选择是通过样式类似于按钮的可点击div来做到这一点。

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

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

这是一些随时可以使用的源代码示例(实际上是带有图像和nib文件以及某些源代码的完整Xcode项目),不适用于iPhone,不使用Core Animation,仅使用几个简单的NSImages和一个NSImageView。这只是一个廉价的黑客,它无法实现我们所请求的全部功能(对不起,但是我不希望为我们编写源代码:-P),可怕的代码布局(嘿,我只是在一个几分钟,所以我们不能指望有什么更好的;-)),这只是一个演示如何完成此操作的演示。也可以使用Core Animation完成,但是这种方法更简单。将按钮动画组合到NSImageView中并不像将NSView子类化并直接绘制其上下文一样好,但是它要简单得多(我只是想尽可能地找出最简单的解决方案)。一直向右滚动后,它也不会向后滚动。因此,我们只需要另一种方法即可向后滚动并启动另一个NSTimer,该NSTimer在我们向左绘制点后2秒钟会触发。

只需在Xcode中打开项目并点击运行,这就是所有要做的事情。然后看一下源代码。它实际上并没有那么复杂(但是,我们可能首先必须重新格式化它,布局很烂)。

由于评论我的答案而更新:

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

这是一个示例,显示有人如何继承NSView来创建默认情况下不存在的完整自定义控件。该控件如下所示:

替代文字http://katidev.com/blog/wp-content/uploads/2008/03/asimocontrol.jpg

看到左上角的有趣的东西吗?那是一个控件。运作方式如下:

替代文字http://katidev.com/blog/wp-content/uploads/2008/03/conroldiagram.jpg

我不想这么说,因为这不是问题的答案,而是"不要那样做!"。 Apple有如何实施用户界面的准则。尽管我们可以随意忽略它们,但Apple用户习惯于遵循这些准则来使用UI,并且不遵循它们将创建Apple用户觉得丑陋且吸引力不大的应用程序。

这是苹果的人机界面指南

让我从那里引用

Push Button Contents and Labeling
  
  A push button always contains text, it
  does not contain an image. If you need
  to display an icon or other image on a
  button, use instead a bevel button,
  described in “Bevel Buttons.”
  
  The label on a push button should be a
  verb or verb phrase that describes the
  action it performs—Save, Close, Print,
  Delete, Change Password, and so on. If
  a push button acts on a single
  setting, label the button as
  specifically as possible; “Choose
  Picture…,” for example, is more
  helpful than “Choose…” Because buttons
  initiate an immediate action, it
  shouldn’t be necessary to use “now”
  (Scan Now, for example) in the label.
  
  Push button labels should have
  title-style capitalization, as
  described in “Capitalization of
  Interface Element Labels and Text.” If
  the push button immediately opens
  another window, dialog, or application
  to perform its action, you can use an
  ellipsis in the label. For example,
  Mail preferences displays a push
  button that includes an ellipsis
  because it opens .Mac system
  preferences, as shown in Figure 15-8.

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

如果答案很长且需要中断,则可以考虑使用只有一列,每个答案一行和每个单元格为多行的表格。因此,用户通过单击选择一个表格行,该行突出显示表格单元格,然后单击"确定"按钮以完成操作。或者,我们可以在用户选择任何表格单元格后直接直接继续操作(但是这样我们就可以使用户有机会纠正偶然的点击)。另一方面,在MacOS X上很少有带有多行单元格的表。iPhone使用的是一些,但通常只有很少的文本(最多两行)。

这是一个主意:在每一边使用渐变代替椭圆(...),这样多余的文本就会逐渐淡出背景颜色。然后,我们可以使用三个CALayer进行此操作:一个用于文本,另外两个用于淡入淡出效果。

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

至于我们是否认为这很"简单"取决于我们对Core Animation的了解程度,但是我认为,一旦我们学习了API,就会发现这并不算太糟糕,值得我们为此烦恼。