I'm using Loren Brichter's tweetie fast scroll where he draws out the entire cell in draw rect. When I set the table view style to grouped, the cell gets the right inset but does not get a rounded corner. Is there a preferred method to get a rounder corner cell using Brichter's fast scroll?
If it's just one line per section you could add something like
self.layer.cornerRadius = 10;
to your initWithFrame: (or something similar) of your cellView.
It's more difficult if you need only some of the corners do be round. But this question has been answered a couple of times. You could use the code from the following question in your drawRect:
Rounded UIView using CALayers - only some corners - How?
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 need some help understanding the use of the contentStretch property on a UIView. I'd appreciate 1) some guidance on how to achieve the effect I'm going for and 2) a reference to any comprehensive documentation that exists on how to use this property. While I thought I understood the Apple documentation, I now see that I don't. Here is what I'm trying to do.
I have a custom UIView that renders a view that looks like figure a. below. The drawRect method of this UIView paints the inner box on the left (with the rounded corners and white background) with a different color and affect than is used for the rest of the view. Also, the 4 corners of the UIView are not stretchable (this would result in distortion) so I need to stretch only the center of the UIView background.
I want to grow this view to a shape similar to that pictured in figure b. below. In doing so I want only the portion of the view outside the white box (or to the right of the white box) to be stretched/repeated as I increase the UIView's height.
In all of my attempts I have only been able to produce a strecth that affects the entire width of the view and results in a view similar to figure c.
Is it possible for me to achieve the effect that I want (figure b.) using contentStretch? Is there some other technique I should be using short of re-drawing the entire view, or is re-drawing the only (or best) way to go about this?
Thanks,
To make this happen with contentStretch, you would have to set the contentStretch rectangle so that its top edge is below the bottom edge of the white box, and so that its left edge is to the right of the right edge of the white box. You will probably find that your background pattern gets stretched too much and looks ugly.
Instead, give your view a subview that draws just the white box. Set the subview's springs and struts so that the box stays at the upper left and doesn't stretch.
I would make the white box stretchable on top, and a background view filled with a pattern using colorWithPatternImage:
patternView.backgroundColor = [UIColor colorWithPatternImage:#"myBackgroundPattern.png"];
and the black stroke could be done with:
#include <QuartzCore/QuartzCore.h>
...
patternView.layer.borderWidth = 2.f;
patternView.layer.borderColor = [[UIColor blackColor] CGColor];
What you are trying to achieve can be done using the resizableImageWithCapInsets method of a UIImage. This way, you can set cap widths on each side of the image and specify which part of the image needs to be repeated (not stretched).
An UIEdgeInset is a struct consisting of four components as follows (CGFloat topCapWith, CGFloat leftCapWith, CGFloat bottomCapWith, CGFloat rightCapWith)
The code below would do the trick
UIImage * backgroundImage = [[UIImage imageNamed:#"Stretch.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(80, 4, 4, 10)];
backgroundImageView.image = backgroundImage;
Since content stretch is deprecated, best approach is to use auto layout. In the inner rectangle give a defining height and width constant and bind its top and leading constraints to the parent view.
In order to get a bottom growth in outer rectangle, bind its bottom constraint or alternatively you can also chnage it height.
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).
Hey, I am making a custom table cell right now but my custom cell is just white cell with some buttons and labels in background color which looks not that great.
Is there a way to render the background color so that the cell has some vertical gradient effect?
For example, on top of the cell it looks white and as it gets closer to center of the cell, it gets darker.
But as it gets closer to the bottom of the cell, it gets whiter again.
A great example would be this free app called "friendsaroundme".
Another thing is that I don't want to use custom image to do it (i.e make the cell.backgroundcolor = [uicolor colorwithpatternimage:somethingsomething.png..... ) because it's not that flexible.
So is there anyway to render the gradient style programatically?
You can use a CAGradientLayer as the background layer. Remember a table view cell is just a UIView. You can add a new layer to the layer tree with:
[[[self view] layer] addSublayer:gradientLayer];
I wrote a blog post on how to do this with UIButtons. The same technique applies.