How do I arrange some UILabels and/or UIButtons of a variable length? I just want to add them to a UITableViewCell and they should arrange in a left-to-right flow, much like lines of text in a paragraph.
I only found possibilities to create lables with a fixed size and position using "initWithFrame:...". Same seems to be true for Interface Builder, as far as I can tell. Any solution is appreciated no matter if it's done in code or using a custom cell XIB-file.
UITableViewCell, UILabel, and UIButton are all subclasses of UIView and the documentation for UIView says:
Layout and subview management
A view may contain zero or more subviews.
Each view defines its own default resizing behavior in relation to its parent view.
A view can manually change the size and position of its subviews as needed.
So, it is certainly possible to do.
You can create your labels and buttons using initWithFrame: with the argument CGRectZero and then resize them (based on the text or whatever) using setBounds: or setFrame: (because right now you're just going to set the size of the view). Then, add these views as subviews of the cell's contentView.
Then, in a custom subclass of UITableViewCell you can implement your solution by overriding the default behavior (which does nothing) of layoutSubviews: to set the origin field of the subview's frames (i.e., CGRect) that will position the subviews in the cell's content view (the size has already been set). You may need to call setNeedsLayout: or layoutIfNeeded:.
This is really a rough outline of how it is possible to implement a solution because there are a lot of details left out. For example, if you resize a button based on the the text of the titleLabel you'll probably want to pad some to the width and height otherwise the button will be the size of the label and will look odd. In the layoutSubviews: method there could be a fair amount of logic to layout the labels and buttons the way you want (e.g., it would be simpler if all the subviews of a cell where of the same type such as all labels) esp. if the subviews could wrap to a new line.
For multiline UILabels to get the width and height you should use the NSString method sizeWithFont:constrainedToSize:lineBreakMode: you can then use the sizes you get to lay everything out where it needs to be.
I want to do the same thing to allow users to enter tags into a text field - a bit like how when you type in an email address, the address gets converted into a blue tag (the the users name in when that users email address is already in your contacts list). Haven't written it yet, but will be happy to share with you once I do. I can't commit to how long it I will take to write this unfortunately. However if no one else has code they can share and you need to get the job done quickly - Just as a tip, consider this:
Create tag view objects where each object knows the size of the parent text field/tag container view and where each tag object has a utility method which a further tag object can use to insert itself at the right position. This approach makes it easy to manage the view and relayout tags using a simple iteration flow.
Hi
If you still need an answer...
To get the size of text (and to then calculate the frame of the UILabel/UIButton etc) use the sizeWithFont: NSString function which will give you the width/height of a string of text using a specified font.
There is a little bit of maths that you'll need to do to work out the best fit, where to place the UILabels, and the spacing, but you will have the data that you need to do it.
Hope this helps!
Related
For a simple example lets say I have a UITextView with a Button underneath it. These two controls are siblings both embedded in a parent UIView.
I now change the text within the UITextView and resize it accordingly. Is there a way to make the button automatically move to have the same relative distance to the bottom of the UITextView? This may seem trivial for this case, but I will have a longer hierarchy with multiple UITextViews that change and it would be nice not to have to calculate the height of every object manually.
One way to approach this would be with a table view: if you place each of your text views within its own table view cell, the table view will automatically calculate its total height from individual calls to its delegate’s -tableView:heightForRowAtIndexPath: method and lay itself out accordingly. Whenever the height of one of your text views needs to change, you can call -reloadData on the table view to make it lay itself out again. A disadvantage of this approach is that it’s really difficult to animate the height changes; if that’s essential to the effect you’re going for, I’m afraid you’re stuck with doing the entire layout manually.
Try the autoresizingMask property of UIView.
Look this pic:
The usernames are UIButton. How can I put a UILabel (with the comment text) just after the UIButton (with the username) ?
The UIButton username's is dynamic. How can I do this?
That looks like a UITableView, if that's the case you should subclass UITableViewCell. If it isn't, I would
consider making it one
build a container class that (or make your subclassed UITableViewCell such that it) contains both a UIButton and a UILabel and dynamically position the text inside the label according to the size of the button (for instance, adding the right number of spaces to the beginning of the text).
You're going to have to use Core Text or web views to achieve this. There's really not a super easy way to do this. It's simple enough to place view next to each other based on their calculated sizes, but to have text wrap to multiple lines with embedded font style variations and attachments (i.e., images), you're going to have to read up on Core Text or use XHTML in web views.
Is there a way to hide the overflow in a UITableViewCell? I have a custom cell view, that I load into the table, where some of the information is supposed to be hidden on load, and then each row will expand when clicked.
Right now, I'm returning height 30 for my row, which is the height of the cell header, but the buttons and text that are supposed to be hidden just overflows and is placed on top of the headers below.
While you can use clip subviews(cell.contentView.clipsToBounds = YES), it's probably best if you add the subviews when you need to expand and remove the subviews the cell collapses. It should increase performance.
There's a property on UIView "clips subviews?".
If you set this value TRUE for the cells, it should stop the buttons from overflowing - you can do it either in IB, or in code programmatically (slightly different name in code).
HOWEVER ... this may NOT be what you want. Depends on the effect. Last time I did what you're doing, I used clipsubviews.
Usually, the correct way to hide your buttons etc is the UIView property "hidden" (or the other one - "enabled").
But that might mess with your animations - depends how you're animating the click-to-expand.
I've created a monochrome ticker [think stock ticker] to display information the user encounters within my app. It's a wide and narrow instance of UIScrollView whose content is filled by an instance of UILabel with the relevant text. The parent view is its own delegate and takes care of the horizontal scrolling animation. The UILabel instance is set to one line only.
I'd like for the text to be in two colors (red and black) where necessary, and possibly plain and italics again where necessary. Of course UILabel is not capable of doing this, and neither is UITextView.
The obvious thing to try is replacing the UILabel instance with an instance of UIWebView and send it an html-string to format the text. However the results are not yet quite as satisfying as with UILabel - the text has margin offsets, for instance, and it needs to be displayed on one line.
Another solution, which works but I'm not satisfied with, is to have the UIScrollView display a concatenated sequence of UILabel instances each with the appropriate font or text color.
With regard to the UIWebView solution what do you advise? For instance, how would you configure an instance of a UIWebView to visually and faithfully resemble the UILabel?
check out the fancy label example at http://furbo.org/2008/10/07/fancy-uilabels/
if it helps you.
On an iPhone, how do you figure out the width of a table view cell's content view when it is showing a certain accessory view (disclosure indicator, etc)?
I need this in order to calculate the correct cell height for cells that contain wrapping, variable-length text. But when the table view delegate is asked for a cell height, it doesn't actually have the actual cell instance, so it can't just query the content view bounds directly.
I can easily hard-code a 20-pixel margin on the right which appears to be accurate for a plain style table view in portrait orientation with a disclosure indicator, but would prefer to do it the Right Way so that it keeps working if Apple decides to tweak the margin.
(This is related to this question.)
Personally, I would just hard code the values -- simpler and things will break in a predictable way.
But were I to do this programmatically, I would create a UITableViewCell, set up the editing properties / accessory views you need to measure, and then ask it how big its contentView is.
Of course I would probably heavily cache this -- doing allocations when asking UITableView asks you for height information sounds to me like it would be slow (check with a profiler first though, as always).
I would have a subclass of UITableViewCell that holds all its subelements. You can cange the frame of certain elements when the cell enters and exists editing mode. There is a good example of this in Apple's Table View Programming guide under the section on creating a custom table view cell.
I believe the UITableViewCell's contentView property is the view that contains your labels etc., so the width of that should be your available size to use.