I have a ViewController with a radial gradient background. Inside that I have a UITableView with cells and sections. Now I want to show the gradient behind the table view as you scroll. The issue is that when the section locks at the top you can see the cells behind the section. I would set the section background color but if I do that it does not match the radial gradient background. Is there anyway to have the cells clip under the sections while keeping the clearColor background?
Simple way to get a transparent section header without creating your own header views.
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
if ([view isKindOfClass:[UITableViewHeaderFooterView class]]) {
UITableViewHeaderFooterView *headerView = (UITableViewHeaderFooterView *)view;
headerView.contentView.backgroundColor = [UIColor clearColor];
headerView.backgroundView.backgroundColor = [UIColor clearColor];
}
}
This piece of code works perfectly fine in iOS 7.
EDIT
I know this is a little late, but along with this you have to add 2 lines making sure the background color (and background color of the background view?) of the uitableview is also clear.
tableView.backgroundColor = [UIColor clearColor];
tableView.backgroundView.backgroundColor = [UIColor clearColor];
if I understand it, you want a completely clear tableview and tableview cell so you can see the background of your view controller.
You can achieve this by setting the tableview as having no background
tableview.backgroundColor = [UIColor clearColor];
tableView.opaque = NO;
tableView.backgroundView = nil;
and also the cell
cell.backgroundColor = [UIColor clearColor]
if you also want the section to be transparent, you can use this method:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
to make a custom view (for example create an image view with a transparent .png for the background)
I hope I understand your question correctly.
edit after clarification
to give the appearance that the cells stop before going underneath the section header:
make a class that is a subclass of uitableview with this ivar:
#interface CustomTableView : UITableView
{
CAGradientLayer* maskLayer;
}
obviously this will create a gradient but if you wanted you could either tweak it or use CALayer and instead of programmatically creating the mask, create a .png with the correct width/height of your section header.
ANYWAY: if you use the CAGradientLayer:
- (id)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self)
{
[self setupGradients]; //call your method
}
return self;
}
- (void)setupGradients
{
[self addObserver:self forKeyPath:#"contentOffset" options:0 context:nil];
*/ ***** if you choose to use CALayer instead of CAGradient ****** */
//maskLayer = [[CALayer layer] retain];
//maskLayer.contents = (id) [UIImage imageNamed:#"maskLayer.png"].CGImage;
//maskLayer.backgroundColor = [UIColor clearColor].CGColor;
*/ ***** if you choose to use CALayer instead of CAGradient ****** */
maskLayer = [[CAGradientLayer layer] retain];
CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;
CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
maskLayer.colors = [NSArray arrayWithObjects:(id)outerColor,
(id)innerColor, (id)innerColor, (id)outerColor, nil];
maskLayer.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.9],
[NSNumber numberWithFloat:1.0], nil]; //this creates a gradient effect. Tweak these numbers for a hard line.
maskLayer.bounds = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
maskLayer.anchorPoint = CGPointZero;
self.layer.mask = maskLayer;
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
[CATransaction begin];
[CATransaction setDisableActions:YES];
maskLayer.position = CGPointMake(0, self.contentOffset.y);
[CATransaction commit];
}
then in your view controller:
CustomTableView *_tableView; //ivar
_tableView = [[CustomTableView alloc] initWithFrame:YOUR_FRAME];
The basic idea is a mask, you create a mask shape on the top of your tableview that is the same size as your section header. it will appear that the cells "disappear" behind it. It's a bit tricky, but it will work.
Related
Further to this question I asked recently, I was able to get the explanation view appearing in front of the tableview successfully, but I now have a problem whereby the tableview's separator lines are briefly visible underneath my explanation view when the tableview first loads. This is in spite of setting the explanation view's background colour, setting it to opaque and bringing it to the front. It's just a brief flash, but it's noticeable and distracting.
Here is my code (_explanationView is a UIView instance variable that I set to nil in the view controller's dealloc method):
- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.separatorColor = [UIColor darkGrayColor];
CGRect frame = CGRectMake(50.0f, 120.0f, 220.0f, 155.0f);
_explanationView = [[UIView alloc] initWithFrame:frame];
_explanationView.userInteractionEnabled = NO;
_explanationView.backgroundColor = [UIColor whiteColor];
_explanationView.opaque = YES;
_explanationView.layer.borderColor = [UIColor darkGrayColor].CGColor;
_explanationView.layer.borderWidth = 1.0f;
_explanationView.layer.cornerRadius = 10.0f;
_explanationView.layer.masksToBounds = YES;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20.0f, 0.0f, 180.0f, 145.0f)];
label.backgroundColor = [UIColor whiteColor];
label.textColor = [UIColor darkGrayColor];
label.numberOfLines = 0;
label.lineBreakMode = UILineBreakModeWordWrap;
label.font = [UIFont systemFontOfSize:14.0f];
label.text = #"Explanation of this screen...";
[_explanationView addSubview:label];
[self.tableView addSubview:_explanationView];
}
I found that I had to bring the explanation view to the front in the viewDidAppear: method, otherwise the tableview's separator lines are permanently visible underneath.
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[self.tableView bringSubviewToFront:_explanationView];
}
What can I do to stop the tableview's separator lines from briefly being visible underneath my custom view?
I found this answer which indicates that handling the order of a custom subview in tableView can be done in the layoutSubviews method.
How can I make a custom sublayer in a UITableViewCell disappear in setSelected:animated:?
Context:
I've added a custom background layer to my UITableViewCell by adding a CAGradientLayer inside of drawRect:, like so:
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
[[self providerLabel] setTextColor:kOUBlue];
[self addGrayLayer];
}
- (void)addGrayLayer{
[[[self contentView] layer] insertSublayer:[self grayGradientLayer] atIndex:0];
}
- (CAGradientLayer *) grayGradientLayer{
if (!_grayGradientLayer) {
CAGradientLayer *gradient = [CAGradientLayer layer];
UIColor *white = [UIColor colorWithWhite:1 alpha:2];
UIColor *gray = [UIColor colorWithRed:0.96 green:0.96 blue:0.96 alpha:1];
[gradient setColors:#[(id)white.CGColor, (id)gray.CGColor]];
[gradient setFrame:[self bounds]];
_grayGradientLayer = gradient;
}
return _grayGradientLayer;
}
When the user taps on a cell, the blue highlighting doesn't appear. So I've attempted to hide the CAGradientLayer in setSelected:animated: like so:
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
if (selected) {
[[self grayGradientLayer] setHidden:YES];
}else{
[[self grayGradientLayer] setHidden:NO];
}
[[self contentView] setNeedsDisplay];
}
The blue background appears, but not until the push animation begins. Is there any way for me to make the default blue appear immediately? I've also tried to add a second colored CAGradientLayer and swap them manually, but it seems to me that the cell doesn't redraw immediately after I hide the layer in setSelected:.
I've tried to force the cell to redraw, using setNeedsDisplay with no luck. Any ideas?
After digging around, I found this question, I realized I was using the wrong method. It turns out I had to use the setHighlighted:animated: method.
My new code looks like this:
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated{
[super setHighlighted:highlighted animated:animated];
if (highlighted) {
[[self grayGradientLayer] setHidden:YES];
}else{
[[self grayGradientLayer] setHidden:NO];
}
}
I'm using a custom sectionheader class with a tableview, and getting some unexpected behavior after rotation. Here's the use case:
Tap on cell in UITableView
View pushed onto stack.
Rotate the view to landscape.
Rotate back to portrait.
Pop the view.
On the iPhone 3G only, a landscape-sized section header now appears stuck somewhere down the middle of the view (in addition to the portrait-sized section header, which appears, as it should, at the top of the tableview). The extraneous header scrolls with the UITableView cells, and switching away from and back to the view (the UITableView is nested within a UITabBarController) doesn't fix the problem.
I can't reproduce this problem on the iPhone 4, or in the Simulator. It seems that, for some reason, a landscape oriented sectionheaderview is being added to the uitableview after popping the second level view, but why would this be? Note that the same problem is reproduced when the default (and not a custom) header is used. I've also checked whether it's a problem with device orientation being returned incorrectly, and that does not appear to be the case.
Here's the init code for the custom SectionHeaderView class, if it's helpful:
-(id)initWithFrame:(CGRect)frame title:(NSString*)title delegate:(id <SectionHeaderViewDelegate>)aDelegate {
self = [super initWithFrame:frame];
if (self != nil) {
float lineHeight = 0.5f;
// check line sizing for retina/non-retina
if (![Utilities hasRetina])
{
lineHeight = 1.0f;
}
// Set up the tap gesture recognizer.
delegate = aDelegate;
// Create and configure the title label.
CGRect titleLabelFrame = self.bounds;
titleLabelFrame.origin.y -= 12.5;
titleLabel = [[UILabel alloc] initWithFrame:titleLabelFrame];
titleLabel.text = title;
titleLabel.textAlignment = UITextAlignmentCenter;
titleLabel.font = [UIFont fontWithName:#"Georgia" size:15.0];
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
[self addSubview:titleLabel];
// add thin white line to top of section header
UIView *topBorder = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, self.bounds.size.width, lineHeight)];
[topBorder setBackgroundColor:[UIColor whiteColor]];
[self addSubview:topBorder];
[topBorder release];
// Set the colors for the gradient layer.
static NSMutableArray *colors = nil;
if (colors == nil) {
colors = [[NSMutableArray alloc] initWithCapacity:3];
UIColor *color = nil;
color = [UIColor colorWithRed:57.0/255.0 green:56.0/255.0 blue:105.0/255.0 alpha:1.0];
[colors addObject:(id)[color CGColor]];
color = [UIColor colorWithRed:54.0/255.0 green:53.0/255.0 blue:95.0/255.0 alpha:1.0];
[colors addObject:(id)[color CGColor]];
color = [UIColor colorWithRed:57.0/255.0 green:56.0/255.0 blue:105.0/255.0 alpha:1.0];
[colors addObject:(id)[color CGColor]];
}
[(CAGradientLayer *)self.layer setColors:colors];
[(CAGradientLayer *)self.layer setLocations:[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.48], [NSNumber numberWithFloat:1.0], nil]];
}
return self;
}
Why would an additional landscape version of the custom SectionHeaderView be added in the portrait view, only on the iPhone 3G?
Thanks in advance for any help.
Still no clue what's causing this problem, but I eventually solved it by adding a check in viewWillAppear to make sure the old header was removed.
I can't get the searchResultsTableView cells to be fully visible when loading with a background image. The cells look quite weak and don't stand out from the background imageview, even when selected. Any suggestions?
- (void)searchDisplayController:(UISearchDisplayController *)controller willShowSearchResultsTableView:(UITableView *)tableView {
for (UIView *view in controller.searchResultsTableView.subviews) {
//if ([view isKindOfClass:[UIImageView class]]) {
[view removeFromSuperview];
//}
}
UIImage *patternImage = [UIImage imageNamed:#"background_newer.png"];
UIImageView * backgroundImageView = [[UIImageView alloc] initWithImage:patternImage];
//backgroundImageView.opaque = NO;
backgroundImageView.alpha = 0.9;
controller.searchResultsTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
controller.searchResultsTableView.backgroundColor = [UIColor clearColor];
[controller.searchResultsTableView addSubview:backgroundImageView];
[controller.searchResultsTableView sendSubviewToBack:backgroundImageView];
controller.searchResultsTableView.rowHeight = 25;
[patternImage release];
[backgroundImageView release];
}
I am not doing anything else than allocating a new UITableViewCell for use (in searchResultsTableView) inside this delegate method:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { .... }
Thanks for any corrections!
(I am on iPhone simulator 3.1.2)
#Jessedc
Thanks for your advice. Haven't tried out your code yet.
I solved this headache (before I saw your reply) by setting hidden=YES on the main tableview behind the searchResultsTableView whenever the searchResultsTableView loads, and hidden=NO when the search is over. The main tableview is set with backgroundColor=[UIColor clearColor] on top of an imageview (loaded with the same image as in my original searchResultsTableView code up there).
This new layout is as previously desired :-).
Are trying to display a static background image with the table text scrolling over the top?
I think you may have your code a little mixed up (possibly).
Customising a table is usually done in a viewWillAppear method. so this code should go there:
UIImage *patternImage = [UIImage imageNamed:#"background_newer.png"];
UIImageView * backgroundImageView = [[UIImageView alloc] initWithImage:patternImage];
//backgroundImageView.opaque = NO;
backgroundImageView.alpha = 0.9;
controller.searchResultsTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
controller.searchResultsTableView.backgroundColor = [UIColor clearColor];
[controller.searchResultsTableView addSubview:backgroundImageView];
[controller.searchResultsTableView sendSubviewToBack:backgroundImageView];
controller.searchResultsTableView.rowHeight = 25;
[patternImage release];
[backgroundImageView release];
Next, in your delegate method searchDisplayController:willShowSearchResultsTableView you are not referring to the tableview object passed in, but you are calling it through the top level (unnecessary perhaps?)
Have a go at moving your table setup code into the viewWillAppear.
Let me know if this helps, or if you can provide more information/code.
It seems to me like you're setting the background of your tableview the hard way. I don't know if it's 100% the problem, but you should set your UITableView background like this:
controller.searchResultsTableView.backgroundColor = [[[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"background_newer.png"]]autorelease];
I am trying to develop an app with a UIPicker in landscape mode, taking up (almost) the entire width of the screen (with 5 or 6 components). Can you please tell me how to set the size of UIPicker. Thank you very much for your help.
Actually, I resize my pickers for almost every app. I do not like that they take up the entire screen. Here is the method that I am using: (note that I am also rotating the picker to be horizontal)
in viewDidLoad .....
picker = [[UIPickerView alloc] initWithFrame:CGRectZero];
picker.delegate = self;
picker.dataSource = self;
picker.showsSelectionIndicator = NO;
//Resize the picker, rotate it so that it is horizontal and set its position
CGAffineTransform rotate = CGAffineTransformMakeRotation(-1.57);
rotate = CGAffineTransformScale(rotate, .46, 2.25);
CGAffineTransform t0 = CGAffineTransformMakeTranslation(3, 22.5);
picker.transform = CGAffineTransformConcat(rotate,t0);
[self.view addSubview:picker];
[picker release];
Then, I like to add a background image for my view that covers up the grey bars (which are now on the top and bottom) of the UIPicker:
//Create the overlay to superimpose ontop of the picker
//In this case, the image is the size of the screen with a transparent area the size of the //UIPickerView cut out in the middle
UIImageView *uiiv = [[UIImageView alloc]
initWithImage:[UIImage imageNamed:#"problem_bg.png"]];
uiiv.userInteractionEnabled = NO;
uiiv.opaque = YES; //for performance
[self.view addSubview:uiiv];
[uiiv release];
UIPickerView delegate method:
-(UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)rowforComponent:(NSInteger)component reusingView:(UIView *)view
{
UIView *viewForRow = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 280)] autorelease];
UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"myimage.png"]];
img.frame = CGRectMake(0, 0, 102,280);
img.opaque = YES;
[viewForRow addSubview:img];
[img release];
UILabel *label;
UIFont *font = [ UIFont fontWithName:#"Helvetica" size:20];
label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 20, 270, 100)] autorelease];
label.text = #"I am a label";
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.font = font;
label.backgroundColor = [UIColor clearColor];
label.opaque = NO;
[viewForRow addSubview:label];
CGAffineTransform rotate = CGAffineTransformMakeRotation(1.57);
[viewForRow setTransform:rotate];
return viewForRow;
}
This gives a much smaller, horizontal picker with a nice look and feel. I hope this helps someone.
You can edit the size by opening the .xib file in TextEdit and changing the size of the UIPickerView.
You can't. UIPickerView's size is constant.
UPDATE: It turns out you can resize an UIPickerView. The trick is to place it inside another (smaller) UIView, and resize that view. I haven't tried this yet.
UPDATE 2: This method does not resize the UIPickerView, but rather crops it. It might or might not be what you're looking for, but AFAIK, there's no way to truly resize an UIPickerView, and this is as close as it gets. It doesn't look that bad.
UPDATE 3 (Long overdue): As of SDK 3.0, UIPickerView is completely resizeable using initWithFrame or setFrame.
I wrestled with the same issue of resizing the pickerview. After some research and headache here is something you can easily do:
Forget Interface builder! I think you can so much better UI without
the interface builder.
In your controllers overwrite the load view method.
-(void)loadView
{
//create your view
self.view = [[UIView alloc] initWithFrame:CGRectZero];
// create a default sized pickerView
pickerView = [[UIPickerView alloc] initWithFrame:CGRectZero];
pickerView.delegate = self;
pickerView.dataSource = self;
pickerView.showsSelectionIndicator = YES;
// Get its frame
CGRect pickerFrame = pickerView.frame;
// Set it to what ever you like, I use a default screen height times a shrink factor like 0.75 for 3/4 of its original size
pickerFrame.size.width = screenWidth*pickerShrinkFactor;
pickerFrame.size.height = pickerHeight*pickerShrinkFactor;
// You can also set the upper left corner of the picker
pickerFrame.origin.x = 0;
// Set the picker frame to new size and origin
pickerView.frame = pickerFrame;
// Add it to your view
[self.view addSubview:pickerView];
}
Good luck
I'm fairly certain that the UIPicker comes in one size, which you can't change. Would be interested to hear different.
The answer is in:
-(UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {
Since with:
- (NSString*)pickerView:(UIPickerView*)pv titleForRow:(NSInteger)row forComponent:(NSInteger)component
Makes it work (that is: sideways with scaled label) of course
No problem (I just registered). By the way I just realized that when I posted my answer, that the method (UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent .... lost the space between row and forComponent. So make sure that you have the delegate correct or else it will not work.