How are the thin, centered lines between "Columbia Dining" and "Subject" and "Message created"?
TableViews with static cells tend to have a similar line between each cell, but the difference is that it stretches all the way to the right of the screen. I'm not looking for any code, just somebody to point me in the right direction.
Using an ultra-thin UIImageView seems sloppy, and isn't quite as elegant. I've seen these in multiple apps but I'm not sure what is used to make them.
In Interface Builder, select your UITableViewController.
Table View > Show the Attributes inspector:
Change Separator style, color, inset, etc.
This will have the side effect of showing separators at the table view level (not the cell level). Even non-existing, empty cell, will have a separator.
For cell-only separators, select Separator: None in IB, and add a 1/2 pixel tall UIView at the bottom of your prototype cells.
Any old plain UIView with a backgroundColor, alpha and height will do. User proper layout constraints to locate that separator adequately:
► Find this solution on GitHub and additional details on Swift Recipes.
Related
I encountered this image on Apple's UI Design Do's and Don'ts:
Of course the UI on the left is the one I am shooting for, my question is what is the best way to go about getting this UI on the left? My initial thought was to use a static table view, with the top cell being the image and the cell below it but I came up with two problems with that approach:
How would I get that little water droplet image to span across both cells?
How do I make sure that the text field below the image is always the right length no matter how much text is put in (i.e. resizing the text field and the cell depending on the amount of text)?
My second thought was to use a UIScrollView and put the image at the top, constrain the water droplet in between them and then contain a text field below it, but then:
How would I make sure that the text field always the right length no matter the amount of text put in?
It is pretty impossible to constrain these items in a UIScrollView, how do I properly constrain this in a UIScrollView?
Why not use a UITableView, and make your cell in the interface builder that can be called through a reuse identifier. And each cell would have the image along with the relevant information that's required. This would fix your first option since you would be able to place the water droplet image over your image and your text.
For your second issue, making sure the cell is of correct height can be done by giving the UITableView dynamic height.
For example, you wouldn't need to insert a heightForRowAtIndexPath function on this tableview, and you can also define:
tableView.estimatedRowHeight = 100; //Can be any value really, but giving a reasonable estimate is helpful
tableView.rowHeight = UITableViewAutomaticDimension;
Also, your the textView you want to use shouldn't be set with any fixed width's or height in the interface builder.
TableView Image . Your imageView would be set up somewhat like the blue section in this picture (but fitting the entire width of the screen instead) and your textView would be like the red one. They would all fit in one cell and would make it much easier to organize than using 2 separate cells for one set of content, and you wouldn't have to get into the hassle of setting up the UIScrollView.
I work on a app, nothing fancy, but since is my first app, there alot of stuff I never did before.
So, I'm trying to build a view like the image attached.
I've looked up on the Internet how to do something like that but I don't know what is better/cleaner way to do.
As you can see I have 3 areas: the title, the tableview in the middle and a button on the lower side.
The table will expand based on the content (3 lines or 30 lines) so the button must move down and a scroll bar should appear.
So, my idea:
Using a tableview having 3 static cells: one to put my title, second to put a tableview having prototypes cells, and a third one for the button.
That way I would have a scroll bar when the table in the middle grows, pushing the button.
Here I have a question: how to have the table view (the inner tableview) resize itself, pushing the height of the middle row, instead of having a fixed width with a scroll.
Is the the best way to achieve that?
Thanks for any idea.
C.C.
Are you sure you want to push the bottom UI down as the table grows? You say whether the table has 3 or 30 cells, but what if it has 300 cells? Your user then has to scroll to the bottom to reach the button and tab bar. I think you'll find that it would be better to use Auto Layout and let the table fill the screen space between the title and the button. The table will scroll so if you have 300 cells then you can scroll through inside the table's available area.
The advantage here is you won't be fighting with Auto Layout. If your user rotates an iPhone 4S into landscape you'll only have a few rows displayed but conversely if they run in portrait on an iPad you'll fill all of that space.
As for how to do it, the other advantage is that you don't need the nested table you describe. Use a constraint to attach the title label to the top layout guide, then attach the tab bar to the bottom layout guide. Put a vertical space constraint between the button and the tab bar. Finally, put vertical space constraints between the table and the title & the table and the button. (You'll need to implement constraints for the horizontal axis as well, but that's pretty simple.)
There's are refinements you can put into place if you want the table to shrink to fit if there are only 3 rows, but this should get you started and you may not want that anyway.
Key point: the tableView wants to scroll naturally, inside a view sized to fit the display. Don't change that behavior unless you really have to. Neither your users nor UIKit expects what you're trying to do, and the table is going to fight you all the way about it.
Nesting UIScrollViews (which your nested table would do) works, but it opens up a lot of bad UI flow problems. In my experience every time somebody wants nested scrollViews there's some other approach which is more "natural" to iOS interface paradigms.
If you're dead set on the UI you described I wouldn't use a table for the outer structure. Just make it a UIScrollView and calculate your content size based on the number of rows the table will display. You can actually do that, and then use Auto Layout as I described.
So I had a UITableView that I tried to make smaller by adjusting its constraints. I then added three labels and textfields to my UIView. However, upon running the app the UITableView doesn't seem to have been made smaller, instead it's "overlapping" my labels and textfields. Here is a picture of what I am describing. http://imgur.com/BoC6l1R. And here is a picture of the storyboard editor. Note the dotted lines. http://imgur.com/wUyccDk. I've tried changing many things with the constraints but they all make everything more messed up. I feel like the solution should be pretty simple. Thanks!
In the second image (the storyboard) you see there's a dotted line and a yellow line with +78. That indicated that the constraint specifies that the table view should be 78 points above where it is now. That's a warning in your storyboard meaning that the UITableView will appear in a different position at runtime.
The easiest way to solve it is to open the storyboard file, then at your left there should be the Document Outline. Find your view controller, and there should be a small yellow arrow next to the view controller name. Click on it and you'll go to a screen showing you the constraint warnings. It should say "Misplaced views". Click on the small yellow arrow next to the misplaced view (your UITableView) and a popup will appear. Select "Update Constraints" and then click on "Fix misplacement". That should do it.
However, a better way to solve it is to put a constraint between your text fields and the UITableView. Delete the constraint between the table view and the top layout guide (the one appearing yellow), then add a Vertical Spacing constraint between the UITableView and the UITextField below the Sea_State label.
I'm building something similar to the compose page of the native iPhone Mail app.
But, I'm putting two text fields on one row, and I want to separate them with a vertical divider (an additional view) that's the same color & weight as the horizontal cell separators.
Apple's docs say:
If you want to customize cells by simply adding additional views, you should add them to the content view so they will be positioned appropriately as the cell transitions into and out of editing mode.
But, what if I know, like in this case, that my cell will never go into editing mode?
Also, the horizontal cell separators are subviews of the cell, not the cell's content view. So, I think it'd also make sense if I added the vertical divider to the cell, not the cell's content view.
Can I just add additional views to the cell itself, instead of its content view?
You can add additional views directly to the cell, but it's best practice to add them to the cell's content view. Even if you're cells never go into editing mode, this is what Apple and other developers that may be working on your code (or you in the future) are expecting. So, this will make it easier for them to work with your app.
For example, what if Apple hypothetically decided to put gutters on the left & right side of plain style table views in a future release of iOS? Then, they would probably inset the cell's content view but not the cell itself. That way, if you position your additional views relative to the content view, your app has a better chance of looking good and the additional views have a better chance of not getting clipped by Apple's hypothetical gutters. OK, I doubt Apple would do such a thing, but the point is that if you add your additional views to the cell's content view instead of the cell itself, you're code will be more robust.
For your specific case, I still recommend adding the vertical divider to the cell's content view because you can. You might even consider setting the tableView.separatorStyle = UITableViewCellSeparatorStyleNone and redrawing custom separators by adding a separator view to the bottom of each of your cells' content views. This way, you can be sure that the style of the vertical divider you add will always match that of the separators. Again, this will make your code more robust and protect you if Apple decides to change the style of their separators. Sure, you can use cell.separatorColor. And, you can guess the separator weight with cell.frame.size.height - cell.contentView.frame.size.height. But, such cleverness might get you in trouble.
As the Buddha admonishes Siddhartha, "Beware of too much cleverness!"
I want to divide UITableView into three part like iOS Music App's TableView like following image
I want to divide like above Image's UITableView.
How can i?
make custom cell, in that custom cell put one view having three
imageViews, set images in such a way that it look likes above design.
create 3 images for left,center, right.
leftImage must have border line at right side for looking it as vertical line & rightImage must have border line at left side for looking like it as vertical line or simply you create one center image having border at both side.
for horizontal line you can simply use default cell seperators. if not then set cell seperator
to none & design above 3 images having top or bottom border line .
you can simply design it through the storyboard and assign your custom cell filename to TableViewCell. you can design custom cell like the link given below in comments