I am trying to display cell's textLabel text to be visible on top of an image that spans the entire cell. I created a custom cell subclass just to make the image width be equal to the entire cell size like so:
- (void) layoutSubviews {
[super layoutSubviews];
self.imageView.frame = CGRectMake(0,0,320,80);
}
Now I would like to display my cells text on top of the cell. I do not have the cell text in the custom cell subclass, rather the code for it is in the TableViewController. Is there a way I can make the text display on top from within the view controller or do I have to put the text to be displayed in the custom cell subclass? Thank you
The best way is to make a custom cell, with an imageView and a label, and add them to the subview when the cell is initialized.
Then make sure they're hooked up to a property so you can configure the frame, as well as the content.
You can display the text in the TableViewController. Just make sure you set the image first before you set the text. I have provided code snippet in the method tableView:cellForRowAtIndexPath:
cell.imageView.image = theImage;
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(50.0, 0.0,100.0, 30.0)];
textLabel.text = #"Testing";
[cell.contentView addSubview:textLabel];
Related
I try to use setSeparatorStyle=UITableViewCellSeparatorStyleNONE;
And it works but I am disappointed because it lets all the separator disappear, this is not what I want. I want to have cell 1, 3 and 4 have separator, while cell 2 separator needs to be hidden. How can i do that?
You can Hide tableView's standard separator line
First use
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
You can Change hight/width/color/image of UIView for set your separatorLine.
Add custom separator to add UIView of 1px height in cell:
UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];/// change size as you need.
separatorLineView.backgroundColor = [UIColor grayColor];// you can also put image here
[cell.contentView addSubview:separatorLineView];
and in index 2
Cell.separatorLineView.hidden = TRUE;
SeperatorStyle property is assigned to the UITableView. So for customization first of all set
[tableview setSeparatorStyle=UITableViewCellSeparatorStyleNone]
//thus the default seperator will be hidden.
Now insert a view having width, the same as cell width, height 1, and color separator preferred color. thus by giving reference we can show or hide this seperatorView accordingly. Seems bulky, but simple.
setSeparatorStyle=UITableViewCellSeparatorStyleNONE; //remove all separator
2.the contentView of Cell call the method addSubview ,the subView is a image(line is bottom at a background image) or a view whose height is 1px.
View the subView as a separator .
3.design a property for a cell, then change the property in the method cellForRowAtIndexPath() According to the property, you can determine if the separator is Hidden in method awakeFromNib
is it possible to make a distance between cells like that in standard UITableView? There is no options to make separator bigger. Also this distance from right and left.
you can do this by set your cell background to whatever background you want (let's say gray in this case) and in the cell, add a white uiview with left, right, and bottom margin like this:
Then go to your table view, set the separator as none
and one last step, set the background of your table view to the same gray background as your cell.
Then you don't have to do anything particularly in your code besides simply initial your table cell based on the custom nib file (i assume you want to do this anyway).
If you prefer to construct your cell in codes, you can use the same logic.
in method:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
...
cell.backgroundColor = [UIColor whiteColor];
// This will create a line of 3 pixels that will be separating the cells
UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,3)];
separator.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview: separator];
// and if you want the border do left and right add:
UIView *separatorRx = [[UIView alloc] initWithFrame:CGRectMake(318,0,2,cell.frame.size.height)];
separatorRx.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview: separatorRx];
UIView *separatorSx = [[UIView alloc] initWithFrame:CGRectMake(0,0,2,cell.frame.size.height)];
separatorSx.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview: separatorSx];
return cell;
}
One way would be to set the backgroundView of the UITableViewCell to an UIImageView containing this white box on that gray background
You have to make a subclass of UITableViewCell. In your own subclass you may make everything you dream about! So, you need to add UIView with whiteColor background and margins as subview on your custom UITableViewCell.
There is not padding option in UITableView. You can either add a UIView in your UITableViewCell which will contains all the cell subviews, and change it's frame to create a padding right in the cell.
I suggest you to use UICollectionView instead, you can easily set the space between cells using a layout. If the cell is smaller than the actual collection View, then it's automatically centered.
Problem:
I use the following code inside the method cellForRowAtIndexPath to set the size of the image for the cell, yet at runtime the image gets blown up to the maximum height and width that the table row will allow.
UIImage *_image = [imageDictionary objectForKey:#"image"]; // Get image data
[_image drawInRect:CGRectMake(0,0,50,50)]; // set size
[cell.imageView setImage: _image]; // assign image to cell
cell.imageView.frame = CGRectMake(cell.imageView.frame.origin.x,cell.imageView.frame.origin.y,50,50);
return cell;
Question: Is there a more robust method of controlling the size of the image in a UITableViewCell? The approach I'm taking comes from several other posts but for some reason its being ignored in my code.
Side-note: I'm using Xcode 5 and developing on an iOS 7 platform.
Use UITableViewCell contentView .
The content view of a UITableViewCell object is the default superview for content displayed by the cell. If you want to customize cells by simply adding additional views, you should add them to the content view so they will be positioned appropriately as the cell transitions into and out of editing mode.
Example:
UIImage *_image = [imageDictionary objectForKey:#"image"]; // Get image data
[_image drawInRect:CGRectMake(0,0,50,50)]; // set size
UIImageView *imageView = [[UIImageView alloc] initWithImage: _image];
[imageView setFrame:yourFrame];
[cell.contentView addSubview:imageView];
This doesn't answer the question but your underlying problem is your approach. You should be customizing your cells by subclassing UITableViewCell. To add to that it's a lot easier to manipulate cell contents as views than to play around with the default picture and text label they give you. To carify, the contents of the cell sit on a view known as contentView accessible as cell.contentView. You can add text labels, buttons, and images as subviews to any location with any size you want the same way you would do with any view added as a subview.
I wish to have a table with some label and then I add a text field UI after the label.
I want the Label to be of some fixed size (say 150) and the rest of the cell width be occupied by the textfield.
Hence I set the frame of my cell.textLabel in function
cellForRowAtIndexPath
in this way
[cell.textLabel setFrame:CGRectMake(cell.textLabel.frame.origin.x, cell.textLabel.frame.origin.y, 150, cell.textLabel.frame.size.height)];
but this doesnt seem to work.
Any ideas why and What could be my solution to this?
why don't you add custom lable on your cell...
UILabel *mylabel = [[UILabel alloc] initWithFrame:CGRectMake(5,5, 150, 40)];
[cell.contentView addSubview:mylabel];
Otherwise you need to override -LayoutSubViews method and have to subclass UITableViewCell..
With a UITableViewCell its responsible for laying out its subviews. You have a very high level control over its layout using the UITableViewCellStyle enum.
If you want something custom, override UITableViewCell and add view to its content view or modify existing views. When you do this, be sure to do the layout in the layoutSubviews method, e.g.
- (void)layoutSubviews
{
[super layoutSubviews];
self.textLabel.frame = CGRectMake(self.textLabel.frame.origin.x,
self.textLabel.frame.origin.y,
150,
self.textLabel.frame.size.height);
}
The cell's frame will change when its added to the UITableView. When the cell's frame changes layoutSubviews is called to give you a chance to adjust its subviews. By default the UITableViewCell will do some if its own adjustments which is what was probably causing your issue.
Having a UITextField in a UITableViewCell
I'm making a fill-out form (First name, Middle Init, Last Name) using table views and want to embed text fields in some of my cells. I see a lot of examples on adding a UITextField inside a UITableViewCell, like the one above. However ALL of them have hard-coded values for the text field's frame, like this
UITextField *playerTextField = [[UITextField alloc] initWithFrame:CGRectMake(110, 10, 185, 30)];
I want my text field to use the cell's frame or bounds.
To make things more interesting, my table view has four sections, and only section 1, which has 3 rows, will have text fields embedded.
To make things even more interesting, I use a popup controller to present my form.
So how can I embed my text field to fit properly inside my table view cells without using hard-coded values when setting its frame or bounds?
Thanks!
Autoresizing masks are your friend.
cell = [tableView dequeueReusableCellWithIdentifier:#"identifier"];
CGFloat optionalRightMargin = 10.0;
CGFloat optionalBottomMargin = 10.0;
UITextField *playerTextField = [[UITextField alloc] initWithFrame:CGRectMake(110, 10, cell.contentView.frame.size.width - 110 - optionalRightMargin, cell.contentView.frame.size.height - 10 - optionalBottomMargin)];
playerTextField.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview:playerTextField];
If you want to ensure the UITextField fills the contentView of a cell then you do:
cell = [tableView dequeue....];
if (!cell) {
cell = ... // create cell
UITextField *textField = [[UITextField alloc] initWithFrame:cell.contentView.bounds];
textField.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview:textField];
}
Obviously this needs additional cell setup and something should be set to the text field's delegate. But this covers the basics of getting the text field to fill the cell's contentView. If the cell's size changes the text field will change along with it.
You could map it out using the storyboard editor by creating a custom nib that you then reference in cellForRowAtIndexPath
Assuming your targeting iOS5+, it's quite easy to do.
setup the nib in viewDidLoad with the following
[self.tableView registerNib:[UINib nibWithNibName:#"nibname" bundle:nil] forCellReuseIdentifier:<#(NSString *)#>]
load the nib in cellForRowAtIndexPath
CellClass *cell = [tableView dequeueReusableCellWithIdentifier:<#(NSString *)#>];
where CellClass is the class that you've created for the cell.
This approach allows a lot of flexibility to customize the cell as well as to create cell-specific methods. (say if you use more than one cell template w/in the tableView).