Right now I have a standard UITableView that is empty by default and the user can add cells to it.
I noticed this app starts with no cells and is empty (like you cant see lines) but my standard view always has the lines like standard table view.
I thought it may be a grouped table style but the edges are not curved like the grouped style is.
Does anyone have any ideas?
The lines between cells are controlled by the separatorStyle property of your tableView. To remove the lines simply set:
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
Your other options are UITableViewCellSeparatorStyleSingleLine and UITableViewCellSeparatorStyleSingleLineEtched.
You can hide the separator lines by setting their color to the same color as your background, e.g.
tableView.separatorColor = [myApp theColorOfMyBackground]; // A UIColor object
Make sense?
The cells in your picture are likely custom cells, but you didn't really ask about that. :-)
EDIT: As noted in another answer seperatorStyle can be used to simply "turn off" the lines. That's a better way to do it.
This is a good question. +1 What app is this? Does the view you show above actually "scroll" even though only 2 rows are showing? I am wondering if it is a truly a table view. It could be a series of UIViews added to a UIScrollView with a dark background.
Assuming the programmer knows how tall the "rows" are, then they can add them with a pixel spacing over the charcoal background. With the UIScrollView, the programmer can define the contentSize.
If more views were added to extend past off the screen and the contentSize was appropriately defined, the USScrollView would automatically allow scrolling at that point.
Selecting a "row" could be easily handled by UIGesture controls on each UIView.
*EDIT
After seeing the app, Delivery by JuneCload, it is definitely using a UITableView with custom cell views. As Mark and Matt have answered.
Related
I saw this picture on Internet:
the section with the add Photo Frame and two rows (First, Last)...
How do you achieve a design like that!!!
I only know how to make rows (static and dynamic) in xCode using the full width of the screen but not in a single section but not making such a división and adding a frame out of the other two rows
my designs are like this
Any help I'll appreciate
thanks in advance
It's not really clear that the example you've given is actually embedding the first, last part into a table view. It could just as easily be a single cell that has embedded views with borders to look like rows. Here are a few ways I see to accomplish the view you've given.
Have them be actual rows - but use a custom cell layout that offsets the 'First' and 'Last' labels to be further to the right. Then create a UIImageView for the profile that sits on top of the UITableView cells, but inside of it. Basically insert it as the first subview of the UITableView. It should cover the top left of those top two cells. You can do this since those cells have a static known hight and you've set the left offset. Another option would be just inserting it into your top cell, but having it overflow the bounds and setting clipsToBounds = NO.
Make the entire top view a custom UIView that uses CALayers or CoreGraphics to manually draw the lines and layout such that it looks like part of the table view. Set that as the TableView header, or the first section Header.
There are a lot more things you can do like changing frame layout as well.
you can achieve this with the use of xib read carefully and if you don't understand anything you can ask me again it's bit tricky
in you xib create a UIView and design for your photo and firstname, lastname cells with the use of textfields image views and all and then take a UITableView.
now drag your UIView and drop it on your UITableView so that it will be considered as your table header and your first section now will be as you designed like photo with firstname and lastname fields.
i've done this in manier projects of mine so hope this way you can also do this thing and ask me if you need any help.
I want to remove the built in separation between cells in UITableView.
I tried using :
[self.myTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
But that only removes the separator line.
I need the view to appear as if it's not a table view at all. (like the tableview is one big view who doesn't contain many separated cells)
Is that possible ?
Edit:
See the separation between the cells? I wan't it to disappear and the table view to be as if it's one big cell.
Edit 2:
The problem doesn't appear when I don't use an image view as the cell background, but just use a simple background color.
I tried using a different image, and as you can see the problem is much less obvious.
I would still appreciate a solution for the red image though, since I do have a lot of images that still can't be put as background currently. (Not sure why one image would cause the problem and other won't ,I guess something with the pic setting)
You can do something like
self.tableView.separatorColor = [UIColor whiteColor];
or
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
I suppose in your case it would be
self.myTableView.separatorColor = [UIColor whiteColor];
In the future you might want to search Stack Overflow as there are many similar questions.
Your separation is due to the background gradient in the red example and it is not coming from the tableView. in your second image there is no gradient so you don't see separation.
remove the gradient from the background image and it will be fine.
try to do this:
self.tableView.backgroundColor=[UIColor clearColor];
self.tableview.separatorColor=[UIColor clearColor];
self.view.backgroundColor=[UIColor yourcolor];
i don't remember if it's then color with image or backgroundwithimage or background with view.. don't remember, however logic way is this.
hope it's usefull
If you just want to get rid of the separator between UITableView cells. Two things you need.
[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
Make sure your imageView ( in your tableview cell) has same height as tableview cell. This means your image view is fully covering the table view cell. Goto inspector view and verify the height , if you see the height is 43 just set it to 44 ( 44 is default tableview cell height for retina display).
Go StroyBaord -> Select Table -> Attribute inspector -> Separator None
No Separator Will Appear
You seem to have answered your own question. If you want a solid colored background, make an image with just a solid color. I suspect it's not best practice, but it will get the job done.
I've done this many times in my own applications. I understand that you wish to make your tableview look as if its not a tableview but as if its on a blank piece of paper.
Just a note for you, the reason you can see the separation with some images and not so much with others is due to its image texture. When you place copies of the image side by side, they dont have a continuous pattern thus forming obvious visual separations.
Solution:
Assuming you have the tableview setup in a xib file, display the background of the table itself to to clear -> then set the background of the view itself to whatever image you like. You will then have a tableview with the background view being transparent with only the main view behind it showing its image or color. Displaying your image on this canvas will mean a clear one image background.
I am wondering what is the good way to design interfaces such as the one in the Settings view on an application, for instance :
What I want to do is the nice round rectangle to separate categories and horizontal line separators between categories, I can have a label, text field, slider or any other control in each line...
Do we need to use an image in the background, that seems quite dirty to me, and I cant find any control in IB that seem to do the same kind of layout.
So, how is this done?
Thanks!
Use a UITableView and set it's style to UITableViewStyleGrouped. Remember that the standard UITableViewCell's will just let you show some text and you may need to create custom UITableViewCell's to achieve more (for example, a on-off switch).
If you wan't to customise it you can add a background image. To do this, place a UIImageView behind the UITableView and make sure you set the UITableView background colour to clear:
theTableView.backgroundColor = [UIColor clearColor];
To seperate the categories make use of the "sections".
Basically, you can use grouped table.You can have sections with different/same number of rows.
I hope someone reading this might be able to shed some light on this problem.
I have a plain UITableView containing custom UITableViewCells, each cell is a different height provided by tableView:heightForRowAtIndexPath: and the table does not scroll. The cells themselves are really containers for one or two UILabels nothing very special. Three of the cells show a custom disclosure when editing apart from that no disclosures are used for anything else. The custom disclosures are UIImageView's assigned to the cells editingAccessoryView with 28x29 images however the UIImageView size is set to 40x29 to give a better position using contentMode Left.
This should work fine but what happens is when the disclosures appear in edit mode they don't all share the same position - two might be the same x and the third might be 5px different. This seems to be dependant on the height given to each cell, they basically move around. I can't see how they are associated but have found one set of heights that give the expected results of all three being in the same position. This isnt ideal but has been working fine till now - I have no choice but to change the heights and so the alignment is a big problem.
If I remove the custom disclosures then the standard disclosures work perfectly?
I've tried lot's of things, i.e.
removing the extra width on the UIImageView
reducing the size of the image
playing around with the cell heights - the disclosures just move around
replacing the UIImageView's with other controls - no difference
If you have any ideas why this might be I'd love to here them, thanks.
My guess is its because you are using content mode left in the UIImageView. Use content mode center.
The views get stretched in all directions when the height changes, but the image stays on the left edge of the view...
My app has a ManagedObject that has different types of fields
So, I want it for the user to edit each one and also have it display different info for each.
If you look at the Calendar app, when you Add an Event, you'll notice Title/Location in one cell, Starts/Ends in another, Repeat... so on.
So... in Interface Builder I have all my UITableViewCells but they are all squared. Not with neatly rounded corners.
Is this done with IB and I'm missing a setting? Are they all different views amassed in one place?
I know I will have to custom code each one. I just want the rounded corners first.
To get rounded UITableViewCells, change the style of your UITableView from "Plain" to "Grouped". This can be done in Interface Builder. Then, since it's actually the edges of each section that get rounded, put each cell in its own section.
For me the problem was that I made a subview of UITableViewCell and put all my controls in there. If you do that, then you'll see the corners cut. After dragging everything on the content view, the problem was solved.