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.
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 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 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.
If i do a custom cell, is it best practice to...
put icons and labels all on one view and drop it to the contentView (assuming you want everything to shift in edit mode)
or
put all editable stuff (labels) on one view, and non editable (icons) on another view and drop them to the contentView
or
it doesn't matter because when the label text changes it redraws everything anyway ?
And part2... if I'm doing transparent background (I know, big performance hit)... and I'm using png icons with soft edges (same one for every cell)... would it be that much of a difference if I create a blur on the dynamic text as well ? -I'm not sure if the performance hit is due to the animating of transparencies or the drawing of the cell initially.
Any insight/suggestions ?
The more transparencies you have and the more alpha blending that has to happen the worse off you are. For simple cells it's fine to just throw subviews in, but for complex ones you'll want to create a custom contentView that does most of its own drawing programatically in drawRect rather than depending on the UIView drawing code. Paint the UIImages directly and just draw the text strings yourself. It's a little extra work but it will perform a lot better.