Scroll characters horizontally in iOS and magnify one in center

Question

Requirement:

• Alphabets in a row
• Using swipe gesture, user can swipe alphabets left to right & vice versa
• A circle/magnifying glass in center, which will enlarge the character in center

In iOS, I want to show alphabets in a row that can be scrolled from left to right & right to left using swipe gestures. In the center, there would be a magnifying glass/circle like thing that would show enlarged version of the alphabet currently in center. This bigger size shows that user wants to select that character.

For eg: below characters would be scrollable horizontally and D would appear under a circle/magnifying glass with a big sized font marking user's selection.

A B C D E F G

Need this in iOS 8 & Xcode 6 using swift. I understand cocoa-touch might also come in picture & I am comfortable with it

Answer 1

Based on the requirements you need, use UICollectionView. It is similar to a table view but more flexible. You can browse the Apple documentation on working with UICollectionViews.

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

Here's a summary of the advantages of UICollectionView: http://nshipster.com/uicollectionview/

To implement the magnifying feature, you might want to use the UICollectionViewDelegate method:

-layoutAttributesForElementsInRect:,

where you can set attributes for cells inside that rect (scale up the size for example). It is also explained in the link above.

Answer 2

You'll want the letters to in a UIScrollView. This covers the majority of your requirements. Depending on exactly how you want the scroll to be would determine if you want .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:.

EDIT:

In the comments a question was asked how to reveal all the text. There's two options.

Option 1: For each character you can add it to a new label which has a fixed width and has its origin.x set to the CGRectGetMaxX() of the previous label.

Option 2: You can calculate the width of your text and set the labels width to the returned value. I'm not so familiar with swift yet, so I'll write it in 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);

It's important to wrap the width in ceilf() so the last character doesn't get clipped from rounding.

Answer 3

https://github.com/acoomans/iOS-MagnifyingGlass maybe helpful.

Just place this on top of your scroll view.