I am working on an iPhone app (Swift and Storyboard) and I would like to show some text, e.g. the price of a product people can buy, inside a box, as shown in the image. Nothing special, just an image of a box, with a UILabel on top of it, vertically entered, so the text fits nicely within the box.
This is fine if only numbers are used, but if the text includes (lowercase) letters, the letter is not centered (example in red).
I know that this is how fonts work, and it depends on the baseline and ascender/descender of the character, etc.
But what I would like to do, is vertically center each individual character, so that a text like "200 p" ends up looking like the example in blue.
I quite extensively searched the internet and tried something myself with UILabel and a little bit of CoreText, but until now didn't find a solution to this.
You would think (well, I would think), that this kind of problem would already been solved, but I am unable to find it.
Does anybody know how to do this? So vertically center the characters in a string so that their (visual) vertical centers line up. Or is there maybe some 3rd party library that is able to do this?
Related
At work we have a small external consultancy which don't appear to have much UX/usability experience. For example, their primary approach so far to responsive design has been to have a mobile breakpoint for font sizes (usually expressed in px, to boot) for heading tags, and nothing else. Even text scaling is a foreign concept to them.
We are going to release a new forms system, and they've submitted mockups of what they envision for the form look and feel. Besides the obviously faulty approaches of using placeholder text as labels, floating the label above the form when a user clicks in it, etc., their least poor mockup has each field with the label floated to appear above and inside the field boundary.
With this approach, padding is used to slide the actually enterable portion of the field down. The field boundary in this particular case is a non-gray color and with rounded corners as well. The net visual impact is of a visual bounded region with no visible field inside of it, and a label inside the top.
For dropdowns, there is however at least a visual cue that there's a field there: the down arrow. Still, where a user would expect to see field boundaries, there are none.
I'm a little concerned at this and not sure how to raise my concerns. A/B testing of this before a full release isn't possible currently, or I'd go there. Politically, my boss's boss loves these consultants, so it'd be dicey to simply express concerns without something to back them up.
I see a lot of studies and blogging about rounded vs. square corners, with studies showing that rounded corners can be more inviting and square corners draw more attention. But here, the concern I have over rounded corners is that, without any other visual cue that "here is a field", the rounded corners and the label inside and at the top directly communicates, "This is NOT a field but an empty region". Is there research or other support for this?
I am trying to recreate the messages view on the Apple Watch. This is how it looks like.
However, whatever I try, I can't seem to get rid of the pre-set padding the WKInterfaceLabels come with. Even the padding that you get in the "real" app is too much for me, I'd love to do something like negative padding.
I tried the containing group's spacing argument, I tried putting the labels into groups and I tried going with setting a fixed-height manually, which helped a little bit but eventually starts cutting off letters like 'g' at the bottom but leaves lots of space at the top. Is there a way to change that?
I've been playing around with the auto-layout feature of XCode 6 in developing a Swift application for the iPhone.
It works well for a small number of controls but I now find myself with a section on the screen which will consist of a matrix of eight by eight small text controls (in portrait mode) of the form 7☐ and 42☑ (all three characters), each which can be selected by the user (toggling the checkbox).
I'm wondering what's the best way to handle this. I started by simply laying out all sixty-four text controls but this quickly became a nightmare in trying to join them all together with constraints.
I then wondered whether it would be easier to have one text control in a fixed-width font (or in a font where all digits are the same width and a space character of that width is also available) so I could control the layout manually (with newlines). The downside of that is that I'll then need to perform hit-testing on the control to see which item should be toggled.
Both these approaches have the downside that they don't adjust well when switching to landscape mode or to other resolution changes.
So my question is, how do I handle this in a way that can take full advantage of auto layout (i.e., minimal work for the developer). Ideally what I'm looking for is something like the Java Swing FlowLayout container, to which I can just insert those text controls in order, and it will fill it out as if it's a book (populate top line, left to right, then next line and so on).
If you have a matrix like layout and you want it to flow like the FlowLayout from Swing, you can use a UICollectionView.
I think that matches best what you are trying to achieve.
I've had this issue come up a couple times doing iPhone development now and have yet to find a good solution for it. What I'm looking for is this:
I want to show some text along with an icon and I want the overall display to be centered within its parent view. Specifically, in my current case, I'm looking to display a box that says "Reconnecting..." with a UIActivityIndicatorView to the left of the text.
Previously, I've just relied on the fact that I know exactly the dimensions of the text and activity indicator, so I can position things absolutely to appear centered. What I'm looking for is something more automatic.
Any ideas?
One of the UIKit additions to NSString will return the pixel size of the text if you give it the font that you're using on the UILabel. So then presumably the total size of the two things together in the layout you describe is:
the difference between label.frame.origin.x and activityIndicatorView.frame.origin.x; plus
the width of the text.
You can then either shuffle both the views appropriately or give them a common parent that's still a subview of the whole thing and shift that.
An activity indicator can be shown in a view just calling a single method.Please click here get SHKActivityIndicator class
I want to read the string displayed on the screen with finger touch, means as my finger moves over the text displayed on screen, the text below the finger should get highlighted. Is there any way to do this using UITextView or any other class. Also i want to play the sound associated with that word from a sound file which has the sentence already recorded.
If anyone knows it kindly reply.
Thanks in advance.
So that's two questions.
To know where your finger is pointing in the text you need to know where the UITextView has laid out the characters. This is not something the UITextView is documented to support, so next up is drawing text yourself. This stackoverflow question on embedding a custom font has a few links and even some code that will do the trick. What you need to add is keeping track of character advances so you know exactly where each character is rendered (or you could even use other core graphics functions to get exact bounding boxes of each character).
Clearly once you know what character has been tapped you also know the word it is part of. You'll would probably have the best quality if the sentence is recorded both in full and as single words, so that you can play back either when needed. This other stackoverflow question on playing sounds loaded from the internet has a few links and snippets which relate to loading and playing back audio.
I am doing this in an iPhone text editor I am writing. For multiple reasons, I have subclassed a UIView to draw the text (instead of a UITextView) and I had to implement something like this to provide a movable cursor like a text view has. What I did was use a fixed-width font (Courier to be exact), then I took the x-coordinate of the touch and divided it by the width of the character and rounded the answer down. This gives you a character index.
However, if it is possible, find a way to do this without drawing the text yourself (if the text is user entered or really anything other than hardcoded) because Apple provides a lot of functionality in its UITextView class that is a pain to replicate: editing, cursor, word wrap, scrolling, etc.
It might be possible, if you can't get touch events from a subclassed UITextView, to put a transparent view/layer over the top of the text and get touch events from that, then you would only have to figure out a way to turn this on and off for editing.
Kyle
I came up with a handy trick to do this. In drawRect, mimic the text that the UITextView will draw, but don't actually draw the text. Set the font to Helvetica 17-point, and the only semi-tricky part is handling word wrapping. You already have the text to be displayed, and you can get the size of each word in that default font by calling sizeWithFont. Then save the rectangles for each word, and when the user touches the view, find which of the stored rectangles contains the touched point. To test and calibrate the geometry (line spacing, etc), draw the text yourself in a different color. When you get it so that you can only see one of the font colors, you've got it perfect.
I can post my code for this if someone wants it.