I am trying to repduce a similar sort of layout as in the screenshot below from the Digg app..
Notice that each list entry has a title in bold followed by the source, posted time and finally if there is enough space the start of the description line.
The question is what is the best way to achieve this in iOS? With some posts having longer titles than others I cannot simply say that the title label is 40px high and then place the Source label at 45 as the title will sometimes be longer and sometimes shorter.
Do I have to calculate the height of the label based on its contents before arranging the layout or is there some better way of doing this in iOS so that the views 'below' are automatically moved down?
Another alternative would be some sort of rich text label that I could add all the text to and have it automatically wrap round moving the later text down but I cannot find any sort of control in standard iOS / Xamarin (MonoTouch).
Any pointers would be greatly appreciated?
If you are using a storyboard the simplest way to achieve this result is to define different prototype cells. For example, you could define four different prototype cells, each one with a different layout like those shown in the example picture you provided. You can dequeue the appropriate cell based on the content you want to display so there is no need to adjust the layout in the code.
If you are doing everything in code, it's a lot more complicated since you have to build your own "layout engine" to adjust size and position of the views in your cell. You can have a look at XibFree or use MonoTouch.Dialog as suggested in the comments.
Related
I am new in iOS development and Swift, I'm struggling creating a relatively simple detail page.
For now I have this layout made with interface builder:
The parts highlighted in red must have variable heights, every element is inside one big stack view which is inside a big scroll view.
The list of phone numbers is a label with Lines set at 0 so if I understood correctly that element will size itself correctly with the content.
I don't know how to implement the other two lists and how to make the whole layout to wrap onto the content.
To make you understand better I'm struggling because I'm used to make layouts in android and so making extensive use of the wrap_content option.
Thanks in advance
I think, you could use UITableView for image+text list and UICollectionView for images. If you are using constraints you have to add height constraints to your tableView and collectionView, but you could update those constraints from code with real heights.
I'm working on an app that includes the names of users with their icons under an image. I'm currently using collection view in order to distribute the names. I'm using this approach since each cell when clicked will be holding the user object. However, I'm having some layout issues when it's used (please check attached image). The spacing is unusual. The desired output is the cells having a certain spacing limit between them and if any cell cannot fit, will be placed on the other line. I tried using the delegate methods for spacing by setting it to 5 however it's not working (the cell's size will be dynamic). Should I subclass and create my own Collection view Layout ? if there is any other approach without using collection views please let me know. Thank you.
This is the most complicated UI related problem I've come across yet. I've been trying to find a solution for literally weeks but no avail. Let em explain.
In this app I'm working on, I need to display a certain list. It's actually a schedule. Here's how it should look like,
The fields circled by red circles don't change. To explain what change means I have to show you this.
Its a set of filters which the user can show/hide certain fields and the ones that are circled in the first image are static ones. They can't be toggled on and off.
Now the problem arises with the ones that can be toggled. Here's what it looks like if you turn off the Show Actions flag.
A new label with a blue background replaces the bottom one you can see in the first image.
Here's another one where you disable Show Time option and the time labels are gone (yes it affects only for some. Its expected).
If this filter list were an option list, it would have been easy. Just create a custom cell for each option and you're good to go. But unfortunately the user is able to toggle multiple filters! For example the user can turn off both Show Actions and Show Time and it'd look like the last image but the bottom label would have the blue label in the third image.
To top it all off, the cells' height is dynamic. In iOS 8 creating self resizing cells are easy enough from the IB when you could just add auto layout constraints and done.
But it seems to me that creating these cells from the IB isn't an available option to me. Simply because there are way too many filter combinations a user can make. So the cell's subviews need to adjust to it.
My question is how can I create a dynamic cell like that? My best guess is through code, right? I haven't written my UI in code before so I tried creating a test project to familiarize myself with it. But the problems I'm facing is setting fixed frame sizes makes the dynamic nature obsolete. And how can I move a view to fill up a removed view's space (Last image. Time labels are gone so the name and the id labels move to the left to fill that space).
I know this question is a little too broad. I'm not asking for a straight answer either. I'd really appreciate some pointers, or even a better suggestion on how to approach this because I'm truly at the rock bottom on this issue.
Thank you.
It's hard to give you any precise help since your question is so broad. First, I would recommend watching the 3 videos on Auto Layout from the WWDC 2012 (sessions 202, 228, and 232).
To answer your one example, how to move a view to replace a view that's removed. You would need to make two left edge constraints from the view with the text (Kund Alof...). One with a constant of 0 to the time label with a priority of 1000 (that's the default), and another to the left edge of the cell, also with a constant of 0, but with a lower priority, say 900. As long as the time label is present, the constraint to it will determine the position of the text label, but when it's removed, the lower priority constraint to the left edge will take over and move the label over to the left edge.
(please forgive my english)
I'm new at IOS developing but I've a good skill on other programming languages (mainly c#).
I'm trying to develop a test app with a main window.
Inside that window there is a scrollview with fixed size. inside that scrollviewer there is a view containing some stacked couples of one TextField and one Label: I can't know - ad design time - how many "rows" of them I have to put into.
My problems is:
I can put on the view the first couple (a textfield and, next, a label). Label size can be one or several rows high ,so I've to set multiline and sizeToFit
How can I put the second couple (and so on) without overlap the existing labels..? I can't use a table because between rows there are other labels (title of section).
Do I have to calculate the height of each label and programmatically calculate where to draw the next? Is there a more efficient way?
I don't need code, please just some hints or some keyword to googling on.
Many thanks.
I don't see why you can't use a UITableView, you can set up cells with all the controls you need in it. Either way, using a UITableview won't make the job any easier (just more memory efficient if you have many rows).
The only way that I see is, as you said, to calculate where the next 'row' should be placed (depending on the height of your previous rows). You'll also need to calculate the entire height, in order to set it to the contentSize of the UIScrollView.
Instead of UILabel you can also use a non editable UITextView, since it'll be easier to get its size (after you set the text, you can set the size of a UITextView to be equal to its contentSize)
Does anyone have any tips or suggestions for working with labels in iOS? I am a newbie learning to develop on iOS and come from .NET world and find it extremely hard to achieve the look I need in a custom table cell I am designing.
Basically I have a custom table cell that has two labels. One for title and second one for sub title. I want my title label to hold at most two lines of text and truncate tail of longer text. For my subtitle label I want 3 lines of text. My title label will be bold and my subtitle label will have one level smaller fonts.
The only thing I am struggling with is the label heights. How to drop labels in XCode so that they accomodate two lines of text at most (and handle single lines of text gracefully) and do the same for my subtitle label.
There may be a simple solution to this but I am missing it completely. I cannot believe a simple act of dropping the most basic UI component can be so complex in iOS. I don't want to do any hacks (i.e. drop UI Views in the cell etc) if I can avoid it.
Any help will be appreciated.
Here's a couple of tutorials that may help you with custom UITableViewCells:
http://useyourloaf.com/blog/2011/2/28/speeding-up-table-view-cell-loading-with-uinib.html
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Hope that helps
You might want to check out the default UILabels on UITableViewCell. They are textLabel and detailTextLabel respectively. Find the relevant Apple docs here.