在 iOS 中水平滚动字符并在中心放大一个

Question

要求：

• 连续字母
• 使用滑动手势，用户可以从左向右滑动字母，反之亦然
• 一个circle/magnifying中间的玻璃，会放大中间的字符

在 iOS 中，我想在一行中显示可以使用滑动手势从左到右和从右到左滚动的字母。在中心，会有一个放大的 glass/circle 之类的东西，它会显示当前在中心的字母表的放大版本。这个更大的尺寸表明用户想要select那个角色。

例如：下面的字符可以水平滚动，D 会出现在 circle/magnifying 玻璃下面，用大号字体标记用户的 selection。

A​​ B C D E F G

在 iOS 8 和 Xcode 6 中需要使用 swift。我知道 cocoa-touch 也可能出现在图片中，我对此很满意

Answer 1

您需要 UIScrollView 中的字母。这涵盖了您的大部分要求。取决于你想要滚动的确切方式将决定你是否想要 .pagingEnabled. As for the magnifier you can implement something like the code here. I'm pretty sure you'll also need to call .setNeedsDisplay during the scroll views scrollViewDidScroll:.

编辑：

评论中有人问到如何显示所有文字。有两种选择。

选项 1：对于每个字符，您可以将其添加到具有固定宽度且其 origin.x 设置为 CGRectGetMaxX() 的新标签上一个标签的。

选项 2：您可以计算文本的宽度并将标签宽度设置为返回值。我对swift还不是很熟悉，所以写在Objective-C.

CGSize maxSize = CGSizeMake(CGFLOAT_MAX, self.scrollView.bounds.size.height);

// if using label.text
CGFloat width = ceilf([self.label.text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:self.label.font} context:nil].size.width);

// if using label.attributedText
CGFloat width = ceilf([self.label.attributedText boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin context:nil].size.width);

将宽度包裹在 ceilf() 中很重要，这样最后一个字符就不会被舍入。

Answer 2

https://github.com/acoomans/iOS-MagnifyingGlass 可能有帮助。

只需将它放在滚动视图的顶部即可。

Answer 3

根据您的需求，使用UICollectionView。它类似于 table 视图，但更灵活。您可以浏览有关使用 UICollectionViews 的 Apple 文档。

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/

这里总结了 UICollectionView 的优点： http://nshipster.com/uicollectionview/

要实现放大功能，您可能需要使用 UICollectionViewDelegate 方法：

-layoutAttributesForElementsInRect:,

您可以在其中为该矩形内的单元格设置属性（例如放大尺寸）。在上面的link中也有解释。