In IB, on the .xib where the file's owner is a subclass of UITableViewController, the structure of a cell that I wish to load from the xib is:
(UITableViewCell)cell->(UIView)View->(UIButton)but1,but2,but3.
I am trying to have the buttons appear on the table without the frame/background of the cell.
I've made the cell's background and its View's background clearColor, but what I get now is a black background on the cell (with the rounded corners), like so:
Because of the striped nature of the tableview's background, if I choose that same background for the cell then the stripes won't align perfectly, so it is not acceptable. I just need the damn cell to be translucent, I don't know where the black is coming from.
Any ideas?
Got it. Thought I'd post it if anybody else is in the same plight:
UIView *backView = [[UIView alloc] initWithFrame:CGRectZero];
backView.backgroundColor = [UIColor clearColor];
cell.backgroundView = backView;
[backView release];
Now it looks like this:
Related
I have a table view which flips back and forth between view mode and edit mode. I have one cell which I would like to be transparent in view mode, and look like a "normal" cell in edit mode (i.e. white background, rounded rectangle outline). Basically, the same thing you see the name cell do in the contacts app as you switch in & out of edit mode.
I used the solution in How to create a UITableViewCell with a transparent background to get a transparent background, but I can't figure out how to get the original background back.
Currently, I create two background views in viewDidLoad:
nameCellDefaultBackview = [[UIView alloc] initWithFrame:CGRectZero];
nameCellDefaultBackview.backgroundColor = [UIColor clearColor];
nameCellEditBackview = [[UIView alloc] initWithFrame:CGRectZero];
nameCellEditBackview.backgroundColor = [UIColor whiteColor];
I then give my cell the default background view:
nameCell.backgroundView = nameCellDefaultBackview;
In setEditing:animated: I set the background of the cell depending on the editing mode:
if (editing) {
nameCell.backgroundView = nameCellEditBackview;
} else {
nameCell.backgroundView = nameCellDefaultBackview;
}
The problem is, in editing mode I get a white rectangle instead of something that looks like a cell - which is precisely what I asked for, but not what I want :). I've tried a couple of other things, like setting backgroundView to nil (which seems to = no change), and saving the 'initial' background view in viewDidLoad (that didn't seem to work, and looking in the debugger the variable was 0x0 when I tried to assign it to the cell in setEditing).
So what I want is to look like this in normal mode:
And like this in edit mode:
But what I currently get in edit mode is:
So how do I get the white background/border/rounded corners back?
If you want to use back the original cell in edit mode, you should consider showing and hiding the cell instead of setting the background view. The background view is added as a subview behind all other views, thus, setting it to transparent has no effect. Reference: Apple Doc.
To hide or show a table cell, see this post
for editing mode, dont set the backgroundView. Just call [tableView reloadData] when you enter editing mode and set the backgroundView in cellForRowAtIndexPath like this:
if (!editing) {
nameCell.backgroundView = nameCellDefaultBackview;
}
//if it is editing, then it will take the default style.
hope this helps.
I've decided to change my approach a bit, and this is now working:
Instead of trying to show/hide the background of one cell, I now have two cells:
IBOutlet UITableViewCell *nameCellViewMode;
IBOutlet UITableViewCell *nameCellEditMode;
In viewDidLoad: I change the background of nameCellViewMode to make it transparent:
UIView *clearBackgroundView = [[UIView alloc] initWithFrame:CGRectZero];
clearBackgroundView.backgroundColor = [UIColor clearColor];
nameCellViewMode.backgroundView = clearBackgroundView;
In following with KDaker's suggestion I now just do a tableView reloadData in setEditing:animated:, and then in cellForRowAtIndexPath I do this:
if (self.editing)
{
return nameCellEditMode;
}
else
{
return nameCellViewMode;
}
I'm trying to create a grouped style tableview which features cells with a background image. Both the tableview and the cells have been set up in Interface Builder.
Everything works, however the cells won't clip the background images corners, leaving the cell square. I've tried to enable "clip subviews", I've tried adding an UIImageView as a subview (as opposed to making the background view an imageview), I've both tried selecting a background image directly or connecting a seperate UIImageView to the cell's backroundView Outlet - to no avail.
I've tried setting up the cell programmatically, too - doesn't work. It seems the only thing that will leave the corners rounded is selecting a background color (not an image) directly in Interface Builder, which is not what I want.
There are other questions on SO with related problems, none of which covered the use of background images however, so no help there.
Thanks alot for any insights..!
Have you tried _table.backgroundColor = [UIColor clearColor]; ?
FIXED: _cell.backgroundColor = [UIColor colorWithPatternImage:image];
The above did not work for me.
first set the background of your window to the color you want in your app delegate like this:
UIView *bgView = [[UIView alloc] initWithFrame:self.window.frame];
bgView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"main_background.png"]];
[self.window addSubview:bgView];
[bgView release];
Now if you just have one view controller just set its background to clear and your done. I had to to the next steps because I was popping a modal window with a table view and if the background of that view was clear it looked choppy coming up. So the code below fixed the choppy view and I still get the rounded corners because after the view has appeared I set the background to clear again and let the background from the window show through.
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"main_background.png"]];
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
self.view.backgroundColor = [UIColor clearColor];
[self.tableView reloadData];
}
In the native Mail app, the To: field has a ContactAdd UIButton on the right in the accessoryView position, but it is aligned to the bottom of the cell (which you can see as the cell grows in height). Is it possible to mimic this using the accessoryView property? As far as I can tell, accessoryViews always align in the middle.
I found that you can subclass UITableViewCell, override layoutSubviews, and in that method, get the accessoryView and adjust its frame as desired.
In my app, I found a partly-working solution with the following code:
UIImage *accessoryImage = [UIImage imageNamed:#"accessory_disclosure_bottom.png"];
UIImageView *accImageView = [[UIImageView alloc] initWithImage:accessoryImage];
[accImageView setFrame:CGRectMake(0, 10, 14, 28)];
accImageView.backgroundColor = [UIColor greenColor];
accImageView.userInteractionEnabled = YES;
cell.accessoryView = accImageView;
I got the image from http://m.tech-recipes.com/rx/UITV_accessory_disclosure.png, cut away the bottom padding and made the background transparent in my graphics program. It has the full accessor functionality when selecting the row, however the image is not colored blue when selecting, which is really annoying (it seems to ignore the background transparency altogether).
How do I fill the background color of a UITableViewCell? I tried this code but it didn't work.
cell.backgroundColor = [UIColor redColor];
Try setting a backgroundView for UITableViewCell :
UIView *bgView = [[UIView alloc] init];
bgView.backgroundColor = [UIColor redColor];
cell.backgroundView = bgView;
// release object
[bgView release];
You can change the selection background view of UITableViewCell the same way.
cell.selectedBackgroundView = bgView;
Setting the background color though UITableViewCell's backgroundColor property only works in a Grouped table view. So if your table view is in the Plain style then it won't work.
You can of course set the background color of the UITableView's contentView. But then you probably have to do some additional work as the other subview (text labels and accessory views) have their own idea of background colors.
Take a look at the following snippet from the UITableViewCell documentation.
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewCell_Class/Reference/Reference.html
Note: If you want to change the background color of a cell (by setting the background color of a cell via the backgroundColor property declared by UIView) you must do it in the tableView:willDisplayCell:forRowAtIndexPath: method of the delegate and not in tableView:cellForRowAtIndexPath: of the data source. Changes to the background colors of cells in a group-style table view has an effect in iOS 3.0 that is different than previous versions of the operating system. It now affects the area inside the rounded rectangle instead of the area outside of it.
That should solve your problem.
How can I set the background of UITableView (the tableview style is "Grouped") to use an image?
In newer versions of the SDK, you'll need to set tableView.backgroundView if you want it to be transparent, try something like this:
tableView.backgroundColor = [UIColor clearColor];
tableView.opaque = NO;
tableView.backgroundView = nil;
We need to do something about that plain background. We're going to use a PNG image and display it behind the UITableView.
Prepare a PNG image. It should be either 320x460 (if you have the status bar visible in your app) or 320x480 (if you hide it).
Drag it into XCode into the Resources folder and add to your project
Load the NIB file containing your UITableView into Interface Builder
Open the library (Tools> Library), switch to the Media tab, and drag the image to the View, create a new UIImageView.
Use the inspector to move and resize the image so it's at X=0, Y=0, Width=320, Height=480
Put the UIImageView behind the UITableView (Layout > Send to Back)
Save, Build and Go!
Disappointingly, you won't be able to see your background. The UITableView's background is blocking us from seeing the UIImageView. There are three changes you need to make:
In the Attributes Inspector, make sure the UITableView's "opaque" checkbox is unchecked!
Set the UITableView's background color to transparent:
tableView.backgroundColor = [UIColor clearColor];
I hope this helps and solves your problem. It has worked for me and I have yet to find a more elegant way to display a background image for a UITableView.
The advantage of my solution, in comparison with setting a background image directly on the UITableView, is that you can indent the table's content. I often wanted to do this to just show two or three table cells at the bottom of the screen.
[tableView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"whatever.png"]]];
tableView.backgroundView = nil;
is enough. No need to set background color as Clear Color.
One way would be to make the table view transparent (set the view's background to 0% opacity) and place a UIImageView behind the UITableView. Remember that transparent tables and table cells will not perform as well as opaque ones.
In UI Builder the Background color has an "Other" choice.
This brings up a color picker.
The color picker has an opacity setting.
If you set the Opacity of the COLOR to 0 it works, can't speak to performance.
What I've found is that you have to use a "plain" styled table with a transparent background and then recreate the look of the rounded-corner cells by setting each cell's backgroundView to a UIImageView with a image that simulates the rounded look. This means that the top, bottom, and middle cells need different background images.
However, this does not address what happens when the user taps the cell and it goes "highlighted" - it will look squared off then. You can get around this by setting the highlighted image for your faked tablecell background image. You will also want to create your own disclosure accessory view (ImageView) with a white highlighted version. Then you can create a cell like this one I'm using (below). After I alloc one of these cells I then set the backgroundView and accessoryView to my UIImageViews.
#import "ClearBackRoundedTableCell.h"
#implementation ClearBackRoundedTableCell
- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier]) {
}
return self;
}
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
if( [[self.accessoryView class] isSubclassOfClass:[UIImageView class]] )
((UIImageView *)self.accessoryView).highlighted = highlighted;
if( [[self.backgroundView class] isSubclassOfClass:[UIImageView class]] )
((UIImageView *)self.backgroundView).highlighted = highlighted;
self.textLabel.highlighted = highlighted;
}
#end
One note if you go this route: the cells in a grouped table are typically 300 px wide (in portrait mode) but your plain table here would need to be 302 wide to allow for the grey line on each side of the table, which is normally outside of the "content" of the table cell.
After spending a while with color picker, I found out that you need to specify opaque background not for the table view cell xib, but for the Table View where the cells will be located, which is another xib. From what I have seen, table view cell background attributes have no visual effect.
try this one
UIView *backView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
backView.backgroundColor = [UIColor clearColor];
cell.backgroundView = backView;
It worked for me in grouped tableview.
Make UITableview background as clear color.
Programmatically you can do it like this if your image is added into your resources:
self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.opaque = NO;
UIImage *backroundImage = [UIImage imageNamed:#"my_backround"];
UIImageView *backroundImageView = [[UIImageView alloc] initWithImage:backroundImage];
Else you can do it in Interface Builder with this style :
You may need to configure the header files interface from UITableViewController to UIViewController and add <UITableViewDataSource,UITableViewDelegate> ,also don't forget to set the attributes of the tableview to not be opaque and reconnect the tableviews datasource and delegate outlets to the viewcontroller.