I know how to add a border to the tableview using:
myTableview.layer.borderColor = [UIColor redColor].CGColor
myTableview.layer.borderWidth = 3.0f;
Setting the border like this results in a square border around the bounds of the tableview not the bounds of the grouped cells in the tableview. Using a similar idea on the cells makes a square border around the bounds of the cell but not the rounded edges.
There doesnt seem to be any way of changing the seperator width on the cells either. Is it possible to make a border around a grouped tableview?
I'm not sure what you're asking. There is a cornerRadius property on CALayer in iOS 3.0 and later.
To use .layer, make sure you #import <QuartzCore/QuartzCore.h>. But UITableView does not have the border properties you are looking for, so unfortunately your code will not work.
You can however either place the UITableView on a UIImageView with an image that has a border which would be the easiest solution, or you can use CoreGraphics to draw out the border which would be a lot more work.
Thanks for the above, but Ive decided in the end to go with this method for customizing grouped tables:
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Not as programmatic as I would have liked but it does the job brilliantly. Would like to think that this will be something Apple will make easier to implement in future XCode updates.
Related
I would like to build my UITableView in similar way to Google+ app, which has:
UITableCell width of about 310 I guess but the important thing is they centered, I dont know how to achieve that...
There is a 1-2 pixels of shadow beneath the cell.
Please help me to understand how to position my cells the same way and how to add the shadow effect.
Thanks.
UITableCell width of about 310 I guess but the important thing is they centered, I dont know how to achieve that... : You'll have to create a own subclass of UITableViewCell. Here you can position the controls which you need however you need. You can achieve the above shown UITableView only by creating your custom UITableViewCell. You can refer this
There is a 1-2 pixels of shadow beneath the cell. : This can be possible only by using the image with shadow as a background of your customized UITableViewCell.
OK so I finally got the solution.
I used a background image for each cell that takes the whole width (I kind of cheated) and incorporate the shadow and the 10px separation in the background image.
Of course I had to use Photoshop or similar program to achieve that. so the UITableView and the Cell width should be 320, and the height of the cell should contain the shadow and the separation as well.
This is how I make the table to look exactly like I want it to be!!
I'm quite new to iOS coding and I can't seem to find a good tutorial version that tells me how to efficiently add shadows to table view.
I've tried (then some other random ones):
http://cocoawithlove.com/2009/08/adding-shadow-effects-to-uitableview.html
Didn't work for me at all, gave me errors.
http://www.iphonedevsdk.com/forum/iphone-sdk-development/5939-safari-like-uiwebview-uiscrollview-uitableview-beyond-bounds-gradient.html
Tried the core graphics one that worked perfectly but is very slow on the iPhone. It's just not snappy. I also tried images but it just looked bad.
Is there a good version that is snappy like in the default clock app? There has to be some "standard."
There’s no real standard, but CAGradientLayer is the right approach in most cases. What errors were you encountering with it?
This is covered in Recipe 20, "Add Border Shadows for Table Views," of the iOS Recipes book by Matt Drance and Paul Warren. The recipe adds shadow image views to a UITableView subclass which are repositioned as necessary in layoutSubviews.
I have also accomplished this using shadow image views as table header and footer properties, but this has the obvious downside of preventing you from adding other views as header and footer views.
If you don't use the table header and footer in your table view, here is a very simple solution:
Add two gradient views (either images or subclasses of UIView with some gradient drawing) as tableHeaderView and tableFooterView. Can be done in Interface Builder.
Set content inset of the table view for top & bottom to the negative height of the gradient views.
You can find code samples for this solution here: http://rowboatrevolution.com/2009/06/drop-shadows-in-uitableview/
I was just able to get an inner shadow on a table view via a little trick.
I put a 1px X 320px UIView at the top of the table view and then put a shadow around this view like this:
self.shadowWrapper.layer.shadowColor = [[UIColor blackColor] CGColor];
self.shadowWrapper.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
self.shadowWrapper.layer.shadowOpacity = .90f;
self.shadowWrapper.layer.shadowRadius = 3.0f;
In my case I had my table view half way down the page, so I used another view to sit above my "shadow wrapper" and hide the shadow on the top side of my shadow. This left a shadow sitting over the top of my table view giving the appearance of an inner shadow.
I know that iPhone SDK can set a color to the TableView separator like this:
myTableView.style = UITableViewStylePlain;
myTableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
myTableView.separatorColor = [UIColor blackColor];
Is there any way to set gradient color to separator ? Thanks...
You can make the separator style UITableViewCellSeparatorStyleNone and apply a one point wide line to the bottom of each cell, which is a gradient.
The only problem is that it might look odd on tableviews with fewer cells than fit on the screen when the table view has a plain style, but I don't know how to fix that.
You could draw your TableViewCells (see Loren Brichter's fast scrolling) and then add gradient drawing to your drawContentView: implementation. For details on gradient drawing, see the "Drawing with a gradient" section of the CGContext documentation.
A great side effect of this is that your tableview scrolling becomes crazy fast... but you have to draw your cells, which can get complex if your cells have very complicated view hierarchies (which you should avoid anyway).
I have a problem where my UITableView (group style) has a black "tip" above it's rounded corner.
I'm setting up the background of the tableview like so:
[meetingTableView setBackgroundColor:[[UIColor alloc] initWithPatternImage:[[UIImage alloc] initWithContentsOfFile:#"background.png"]]];
And my table view ends up looking like this:
black pointy edge on rounded corner http://papernapkin.org/pastebin/resource/images/imageEntryId/6487
Any ideas how I can get rid of those black points?
I have got the same problem.
When I set clear color by xib, I have the back corner
The solution is to set it by code !
(The same problem with interface builder exist for webviews)
Try this in your controller's viewDidLoad method:
meetingTableView.backgroundColor = [UIColor clearColor];
You'll get Black corners on UITableView Group Style if you set background color to clear color in XIB.
Instead try this code for removing Black corners on UITableView Group Style
tableViewObject.backgroundColor=[UIColor clearColor];
Just in case you weren't already aware, there's another neat technique you can use to make customized backgrounds for UITableViews:
Not quite as simple as setting the background as you're doing, but it gives you a lot more flexibility and can scale to any table size.
Maybe if you put yourTableViewOutlet.backgroundView=nil;
To avoid the black corners you have to make sure that the UITableViewCells are not opaque. It looks like you're using custom styles table cells and the default value for opaque is YES. Either go to Interface Builder and uncheck the opaque checkbox if the table cell was set up in a XIB file. Or use the setOpaque:NO setter to change value.
Because the table cell view still has a rectangular frame even with the rounded corners the cell view and not the actual table view is causing those black corners.
My guess is that it's related to something that you're doing in your custom table view cells. You might want to experiment with setting the cell background color to [UIColor clearColor].
I think you should set the background color of your table as clearColor and initialsie your view with the background image.
Then it will definitely not show the black corners. But also don't forget to set the background color of your cell as white color
The up-voted answer above (set the tableView's background to [UIColor clearColor]) may not work for you if you are like me and never use the UITableViewController, instead putting a UITableView inside a UIViewController.
In this case it's not the tableView that needs to have a clear background, but the view that holds the tableview.
This is not intuitive, but it works for me. In interface builder you can just set the parent view's background color to clear color, or you could do the same in code in viewDidLoad with:
self.view.backgroundColor = [UIColor clearColor];
I'm guessing the reason for the black corners is something about the internal graphics optimization, and setting the background clear fixes it.
I would like to do some customization of the UIPickerView.
End Goal: have a picker view rotating a few icon sized images.
firstly i would like to change the black/grey boarder surrounding the spindle to a transparent colour. i.e. [UIColor clearColor];
Then shrink the picker view down so it is relatively small, (probably around 40 x 40 pixels) Experimenting with this is IB did not make it seem easy.
Finally change the view returned to the picker for each section. This i think is easy with
pickerView:viewForRow:forComponent:reusingView:
The rest, not sure if it is possible or if i am going to have to delve into some of the core animation/graphics (or find a different way to do what i want).
UIPickerView is not customizable. At all.
You'll have to go custom for what you want.
Perhaps the easiest way would be to mess with an UIScrollView with vertical pagination enabled, and try to get it to act like you want. Maybe overlap an UIImageView with it and wrap the whole thing up in a custom view.
You can also "customize" the outer bezel of the picker by simply placing a UIImageView over the top with a hole cut out for the working parts. Apple does this with the Clock app.