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.
Related
I am creating an iPad view which has a tableview as a subview. The tableview only takes a small portion of the screen and is somewhere near the middle of the screen and it contains some menu items. I want people to be about to scroll this tableview up and down however I do not like how the cells disappear against a hard edge. When I set clipsToBounds to false, I get what I want in that the hard edge is not there anymore but the top/bottom cell disappears when the tableview needs that cell for recycling. Is there a common technique to avoid this hard-edge of when the cells scroll up against the tableview's bounds? I was thinking of adding gradient alpha masks on a parent container view but it seems a bit over the top.
There are no hard and fast rule about this, but you certainly can do whatever you feel best. What I would do in a case of floating tableView is giving it a nice border using layer. It is easy to code (2~3 lines). Round the edge to make it pretty.
If you want to drop shadow, it gets a little more complicated but possible. Just draw a bezier curve path of a rectangle (where you want your shadow to appear). Assign that CALayer shadowPath. Then add it to the table.
You can also gradient an alpha to make it appear shadow like.
But I would suggest, you set clipsToBounds to YES since it looks horrible otherwise, given the fact that the table 'floats' somewhere in your view.
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.
As a small project to get myself used to some more iPhone elements I've decided to create a sample in call screen, modeling it on the native iPhone call screen (IOS 4)
However I'm struggling to make out what elements the native in call screen uses to make up the view that is displayed.
I was wondering if someone with more experience on iPhone could help me out by explaining what the various elements are?
Is the bottom part a UIActionSheet that is slightly transparent and with a UIBUtton placed over it? Or is it a slightly transparent imageview with the button over-layed?
Similarly at the top, it looks like its an imageiew with the name or number of the callee/caller and the call duration underneath, would I be correct in thinking that?
The part I'm really interested in is the bit where the icons are held in some sort of dialog in the centre of the screen that is animated to swing around to a keypad when it is selected, is this some sort of iPhone control that I can use or customise?
EDIT:
I've tried two things to try to achieve this so far:
1) I've created a view within a view and I am trying to flip this however I can only seem to get the main view to flip properly and not the view inside it which is the one I want and it doesn't seem to be a good approach.
2) I've tried to look at using the Utility application approach to it but again this seems to be for flipping the full screen and not just a section within a screen (view)
Has anybody got any pointers on what to try next? Or if one of the above methods is the ideal way to do it and should be investigated further?
At a basic level, I would say that the panel of 6 buttons is simply a view with 6 buttons laid out in it as subviews.
The rounded corners and border stroke can be achieved by accessing the view's layer property and the layer's properties for cornerRadius, borderWidth, and borderColor, e.g.
view.layer.cornerRadius = 10;
view.layer.borderWidth = 2;
view.layer.borderColor = [UIColor whiteColor].CGColor;
This requires including the CoreGraphics Framework, and the appropriate header files in your code.
I notice there's a gradient (or it appears to be a gradient) in the border stroke. I am not sure how to achieve that without doing something more involved and clever (such as a containing view that is just slightly larger veritically and horizontally than the view containing the buttons and is filled with a gradient color. The result would be a gradient border, but this doesn't seem like the best way to do that...
The flip is actually pretty easy. You can create a UIView animation with something like this:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
forView:view cache:NO]
[UIView commitAnimations];
Does this help, or at least get you started?
I am using an AQGridView to display my data in a grid on iPad. Every cell is a UIView subclass and typically, there are 18 cells displayed simultaneously.
I would like to add a round corner to these cells, so I set the cornerRadius property of the relevant layers (i.e. the layer of the main UIView and of one subview). However, this results in performance issues and the scrolling is not smooth any more. When using other CALayer properties, such as shadowOpacity, this does not happen.
Are there any other ways to add a rounded corner (apart from using an image)? Or am I doing something wrong?
I also saw a major performance hit when using cornerRadius on the layer of a view that contained a UIImageView subview. Rasterization solved that problem: view.layer.shouldRasterize = YES;
It could be where you're placing the setCornerRadius call. Make sure it's somewhere that only gets called once, not, for example, in a drawRect method.
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.