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.
Related
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.
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.
Does anybody know how:
add small gradient to bottom of each UITableViewCell to visually highlight separation between cells
and at the same time make each second cell in table a bit darker then the each first row.
A great example of that stuff is Tweetie app. When you tap on your twitter account name you'll see table view with twitts. Even rows are bit lighter and each row has tiny dark gradient at the bottom, that visually separates rows. Looks pretty good.
Could anybody give me a clues how to do that?
I'm not sure if this is what you want, as I don't use Tweetie (though been meaning to check it out), but Cocoa With Love has a good discussion of the new CAGradientLayer available in 3.0. And an older one that relies on custom background images behind the cells.
I haven't looked at Tweetie. You can add a UIImageView to your cells above other items, with a gradient image and an alpha of 50% or less. With the right gradient and alpha, that will make the top and bottom of each cell look different - sort of like each cell is curved.
If you want every other cell to look different, then in cellForRowAtIndexPath, add a differently colored gradient to the UIImageView above, for odd cells vs even cells. Or change the background UIColor for the cell.
I want to highlight one of the titles in grouped section, just like the Calendar application. I am trying to use UILabel as the return view in viewForHeaderInSection. But I am not sure what color is in the default heder. Does anyone know? Thanks a lot.
Just ran across this one myself -- rather a late response, but in case somebody else runs across it, this worked for me:
[label setBackgroundColor:[tableView backgroundColor]];
where, of course, label is the UILabel * that you're using for your header view. Rather than hardcoding a color, just use whatever background color the table view itself is using.
This comes very close:
[UIColor colorWithRed:.6 green:.65 blue:.69 alpha:.9]
You'd need to design a custom view to emulate the gradient and the bottom border.
I've been looking for ways to improve the overall attractiveness of my iPhone applications. A majority of the functionality happens in UITableView. I think I can start by adding subtle gradients to UITableViewCells, as that seems to improve the feel of the app by an order of magnitude. Selecting the appropriate fonts/sizes helps a great deal also. My question for this forum is, what's the best strategy of adding gradients to UITableViewCells? Are you using Core Graphics/Quartz? Are you using a 1x1 pixel image and stretching it? I'm interesting in something along the lines of the following screenshot of the Tumblr iPhone app: http://dl-client.getdropbox.com/u/57676/screenshots/tumblr.jpg
Does anyone have any good examples of how to make your UITableViewCell's stick out?
And for performance reasons is it better to use an image or draw with Quartz? If Quartz, I'd love to see some sample codes of how folks are drawing the gradients into the cells.
Thanks.
I work for Tumblr, and while I didn't write the iPhone app (he did), I have the source and can tell you how it's done.
In -tableView:cellForRowAtIndexPath:
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"postCellBackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"postCellBackgroundSelected.png"]];
Pretty simple, really: PNG images in a UIImageView as the cell's background views.
The two images are 1x61 vertical gradients that UIKit automatically stretches horizontally to fit the width of the cell.
As of iPhone SDK 3.0, there's a much simpler solution that relies on the new CAGradientLayer and doesn't require subclassing or images.
Marco's answer works great for plain table view cells and for grouped table view cells that are located in the middle of the table view, but if you try to set a background view for the first/last cell in a grouped table then it will break the rounded corners. To fix it you can set cell background color to a UIColor colorWithPatternImage, e.g:
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Gradient.png"]];
I'd use Quartz 2D for this, but setting up images in Photoshop is perfectly valid too.
As for performance, if you're re-using cells by type I don't think it would be an issue - but if you do find it a bottleneck you could draw to a bitmap context once, obtain an image from that and use that everywhere - a sort of hybrid solution.
UITableViewCell supports separate views for their background and selected background, so it makes sense to make use of these properties. To do that, you're going to need to come up with an image that's the full size of your cell anyway (UIImageView doesn't stretch it's image), so you may as well make it on a desktop machine once, and save the cycles on the phone that would have to be spent to stretch an image or make it dynamically. Though if you intend to allow the user to change the gradient colors, you'll have to create it once dynamically anyway.
I think the easiest way, by far, of handling UITableView with custom cell is using Interface Builder. It makes UI design work much easier than doing it by pure core. Here is a great tutorial (with a video!) on how to do that. Highly recommended. I am not using any other method of UITableView coding since I followed that.
Having said so, adding a gradient to your cell will be extremely easy. Just use InterfaceBuilder to add an image containing your gradient to the cell view and you are done. You won't have to worry about Quartz, and performance wise you'll get similar results since CocoaTouch's components are very well optimized to do plain task such as displaying an image.
Mirko's answer is a good alternative if you don't want to use an image. However it's best to add the gradient to the backgroundView rather the UITableViewcell itself. This way you won't lose the highlight effects when selecting the cell