1

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

Sategroup
  • 955
  • 13
  • 29

3 Answers3

0

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.

Community
  • 1
  • 1
cnotethegr8
  • 7,342
  • 8
  • 68
  • 104
  • This is what I did: ViewController - ScrollView - View - Label - Contains A B C D and so on… But, after writing few characters, I see … and rest of the text is cut in the simulator. I have set the scrollview width to 200 & centered. Am I doing correct? Further, I am not sure what TouchReader does in the link you provided. – Sategroup Jun 23 '15 at 08:17
  • Your text is being clipped because your label is not expanded to the width of the text. I will update my answer with code for that. As for the link i sent, the touch reader is to redraw when you move with your finger. You don't need this code. – cnotethegr8 Jun 23 '15 at 09:13
0

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

Just place this on top of your scroll view.

gyan
  • 219
  • 1
  • 7
  • This won't fit my requirements as it magnifies the image wherever user taps. Mine is a very specific requirment – Sategroup Jun 23 '15 at 08:03
0

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.

chrisamanse
  • 4,289
  • 1
  • 25
  • 32
  • At first, I thought of using `UICollectionView`, but I want to show a circle or square in the center so that when user swipes in the center that character becomes big and depicts user's selection. So, initially this circle/square won't be there, but as user swipes the list of characters it should appear & user would know that this is the selection box – Sategroup Jun 23 '15 at 08:21
  • You can add the view in center by adding it as subview on top of the `UICollectionView`. Have it show/hide using the `UICollectionViewDelegate` methods. – chrisamanse Jun 23 '15 at 18:31
  • this sounds like an option, but hard to visualise how it would look like as I also need to track if the character is within the sub-view or not. Its like you are scrolling through the magnifying glass and as you scroll the characters they appear enlarged even when the character is partial in the view... – Sategroup Jun 25 '15 at 01:59
  • using `UICollectionView` did the job. Thanks – Sategroup Jul 05 '15 at 05:39