How can I display icons to the left of the UITableViewCell in UITableView?
The Mail app does this, and I'm wondering if this is a native feature that comes with iOS, or one that need a custom implementation.
Thanks!
If you have Custom UITableViewCell then you can implement layoutSubviews as follows:
- (void)layoutSubviews
{
[super layoutSubviews];
self.imageView.bounds = CGRectMake(5, 5, 15, 15);
self.imageView.frame = CGRectMake(5, 5, 15, 15);
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
}
I have used this one. It works. Hope this helps you.
You need to extend UITableViewCell with a class of your own.
In this new class of yours you can have your own layout and complete control of what you want the cell to look like. On interface builder for this cell you can have the image and just add a method to display/hide such image.
When implementing your UITableView you will need to specify your cell identifier for your new class so it loads the right nib.
static NSString *cellIdentifier = #"MyCustomCellClass";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
The credit should really go to #rdelmar, but as he gave the solution in in a comment rather than an answer, I'm posting this for other people:
That image is not "left of the cell", it's part of the cell. With a
custom cell, you can put your content where you want, as well as inset
the separator so it looks like the cell doesn't go all the way to the
left edge of the screen
Related
I am learning about UITableview on iOS and following a course online. I get the table showing fine, but the images on my cells are not all the way to the left (whereas the instructor's ones are). Here is a screenshot of the cells in question:
I don't want that gap, I want the images to be positioned right at the beggining of the cell, all the way to the left. I have done some research and it seems Apple has changed the default look of the cells between ios6 and ios7 so that now the images in cells show a little gap at the left. To get rid of it, I have tried UIEdgeInsets:
[tableView setSeparatorInset:UIEdgeInsetsZero];
and that's not working. I also have tried this approach:
cell.imageView.frame = CGRectMake( 0, 0, 50, 55 );
Nothing happens. So how would I go about it? Thanks
edit-------------------------------------------------------------------------------------------------------------------------------
Still not have found the answer to this. The solutions posted here don't work. I found this piece of code:
self.tableView.contentInset = UIEdgeInsetsMake(0, -50, 0, 0);
Which besides completely puzzling me (as the parameter affected should be the y?) I thought solved the issue by making the image on the cell appear all the way to the left, until I realised it only moved the whole view to the left (as I should have expected I guess) leaving an equal gap on the other side of the screen. All I want is for my images in the cells to appear all the way to the left of the cell as it used to be the case on previous ios. Thanks
It happens because default table content offset from left is 15, you should change it with 0.
See this once, you get idea Remove empty space before cells in UITableView
If you create custom cells. UITableViewCell have owner imageView. Change title of image in your cell.
If you use default cell, use custom cell with constraint Leading space = 0.
It is better not use default imageView of the cell. Drag and drop UIImageView from objective library, create a custom table view cell (Child class of UITableViewCell) then create and outlet of the image view just dragged.
The spacing in the UITableViewCell is because of the default TRUE returned by shouldIndentWhileEditingRowAtIndexPath method of UITableViewDelegate.
I was able to reproduce your problem by the below scenario:
UITableView is in editable mode:
self.tableView.editing = true
And you have implemented:
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView
editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
return UITableViewCellEditingStyleNone;
}
To correct your code:
If you do not want to set Editing Style then you can turn off the editing mode by
self.tableView.editing = false
and remove editingStyleForRowAtIndexPath.
Else if you need editing mode then set the appropiate Editing style(UITableViewCellEditingStyleDeleteor UITableViewCellEditingStyleInsert) or simply turn the indentation off.
- (BOOL)tableView:(UITableView *)tableView
shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath {
return FALSE;
}
You must create a custom cell, by adding a new class as a subclass of UITableViewCell. then you can design cell with autolayout and constraints which will resolve the issue.
there is a another concrete way to achieve this by creating subclass uitableviewcell (custom class).
steps to follow
create a class subclass of UITableViewCell.
in .h file create properties and outlets of UI components.
go to storyboard and add table view cell inside the tableview.
now add UI components like: imageview or button etc and set the x, y values according to.
make class of custom cell your className using identity inspector see image.
connect all outlets of UI components.
use below code uitableview
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
NSString *MyIdentifier = #"uniqueIdentifire";
yourCustomClassForCell *cell = (yourCustomClassForCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil){
cell = [[yourCustomClassForCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:MyIdentifier];
}
cell.imageView.image = [imageAry objectAtIndex:indexPath.row];
}
Dont forget to give identifire by selecting your cell using storyboard Attribute inspector uniqueIdentifire to identifire property see image.
Also you can give some vertical space between cells by just to add this below code (Method only) inside customeCellClass.
- (void)setFrame:(CGRect)frame { // method to insert gap between table view cell
frame.origin.y += 6;
frame.size.height -= 2 * 6;
[super setFrame:frame];
}
You can not really change the frame of the inbuilt subviews of uitableviewcell like imageview, accessoryview. But if you create a custom tableviewcell class(even if you do not add any other subelement to it), you can change the frame of the inbuilt imageview by overriding the layoutSubviews method inside the UITableViewCell. I have tried it and it works.
#import "TableViewCell.h"
#implementation TableViewCell
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
-(void) layoutSubviews{
[super layoutSubviews];
CGRect frame = self.imageView.frame;
frame.origin.x = 0;
self.imageView.frame = frame;
}
#end
i have some strange Problem. I use the Interface Builder to create a Custom TableCell with three Labels and one UIImageView:
I want that the Cell has a little space to the TableView (the blue border), so i put an extra View inside the Cell. As you can see the UIImageVIew is realy small and not higher than two labels, but when i run my code on the device the UIImageView is high as the white View and even covers the Label a little bit. The only thing i do in my Code is:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier1 = #"CustomCellReuseID";
GTEventCustomCell *eventCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier1];
if (eventCell == nil) {
eventCell = [[GTEventCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier1];
}
// Configure the cell...
[eventCell.imageView setImage:[UIImage imageNamed:#"heart.png"]];
.
.
.
What´s wrong?
This will fix your problem:
eventCell.imageView.contentMode = UIViewContentModeScaleAspectFit;
I hope you have not missed the auto layout constraints for the objects inside the custom cell.
If not select a label/view
in toolbar Editor > Resolve Auto Layout issues > add missing constraints
and change the auto layout constraint as you need it.
I just think you should change your properties in the right panel.
You can also desactivate autolayout constraints and, to be sur to place your items at the good place, set them programmatically.
example :
at the top of your file :
#define X_Cell_Padding 10
#define Y_Cell_Padding 10
in cellForRow methods :
[[cell yourImageView] setFrame : CGRectMake(X_Cell_Padding, Y_Cell_Padding, yourImageView.frame.size.width, yourImageView.frame.size.height)];
don't forget to create a custom cell class with your IBOutlet yourImageView and to set this class for the cell in your storyboard / xib
I am struggling to figure out how to get complete control over my tableview cells. I want them to look something like this:
Right now I need to know how to properly manage my cells. Should I make a table view cells subclass? Should I be doing this all within the storyboard of the tableview? That's what I'm doing now. Also, how do I implement dynamic cell heights based on the amount of lines of text?
Thanks
You should subclass the UITableViewCell class and create your own custom cell using XIB. This will give you a lot of leg room for dynamism.
Refer to this tutorial for how to do so:
http://www.appcoda.com/customize-table-view-cells-for-uitableview/
U can create a custom view and use the followingin the cellForRowAtIndex
static NSString * cellIdentifier=#"MyTableView";
UITableViewCell * cell;
if(cell== nil)
{
cell = [myTableView dequeueReusableCellWithIdentifier:cellIdentifier];
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
contentCell.tag =100;
contentCell=[[ContentOfCell alloc]initWithFrame:CGRectMake(0, 0, 100, 50)];
[cell.contentView addSubview:contentCell];
}
else{
// Reusable part. Reuse the UI controls here from existing cell
contentCell = (ContentOfCell *)[cell.contentView viewWithTag:100];
}
//Assign all the data here
contentCell.nameField.text=[arr objectAtIndex:indexPath.section];
//same way for other fields
}
Where contentCell is a custom view
I will try to answer your question in three parts :
For Dynamic cell height which is based on text content : you have a table view delegate called heightForRowAtIndexPath, you should calculate the height of the text based on its font and font size characteristics, and of course by providing the available width, for this you can use method "sizeWithFont" of NSString.
For more control on the cell appearance : you should make a table view cell subclass and use it in the cellForRowAtIndexPath.
Should you be doing this using storyboard : It is not necessary to do it using storyboard.
This is my first native iOS app...
Exactly like the iTunes app on iOS does, by having a tableview that you can scroll vertically, and then each row, you can scroll independently horizontally. At least this is ow I imagine it to work.
how would I implement this? I imagine a view inside each tableCell that can scroll horizontally?
Can any one please shed some light on this and what I might read or try to do
You can add the scroll view into the cells content view and then just the content size property of the scroll view to whatever length you want. Here I have set the width of scroll view to 1000 and the height to 44 (which is the default size of the UITableViewCell).
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
UIScrollView *vwScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
vwScroll.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
vwScroll.contentSize = CGSizeMake(1000, 44);
[cell.contentView addSubview:vwScroll];
return cell;
}
The only option I can think of is if you place a UIScrollView inside the UITableViewCell's view.
Note though, that this may cause problems in regard to the vertical scrolling behavior of the UITableView itself.
To achieve independently scrolling rows similar to the App Store app on iOS, one approach is to nest a Collection View inside a Table View Cell.
I wrote a Swift tutorial with step-by-step instructions on the setup, including how to wire the Collection View dataSource to the Table View Cell.
The tutorial includes a working sample project on GitHub and a link to an Objective-C tutorial.
I believe the free Sensible TableView framework provides these cells out of the box. Should give you a good head start since you're still starting out. Hope this helps.
In the following code, if we do [cell addSubview: someLabel] vs [cell.contentView addSubview: someLabel], they seem to work the same. Is there any difference doing one or the other? (the custom cell in the real code is adding UIImageView and UILabel) (UIView, on the other hand, doesn't have contentView, so we don't need to add subview to its contentView. UITableViewCell is a subclass of UIView by the way)
-(UITableViewCell *) tableView:(UITableView *) tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = nil;
if ([tableView isEqual:self.songsTableView]){
static NSString *TableViewCellIdentifier = #"MyCells";
cell = [tableView dequeueReusableCellWithIdentifier:TableViewCellIdentifier];
if (cell == nil){
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:TableViewCellIdentifier];
}
// ... some code to create a UILabel (not shown here)
[cell addSubview: someLabel]; // vs using [cell.contentView addSubView: ...]
I believe If I am not wrong, the contentView is a subview of UITableViewCell.
If you look at this page here, you can see there are actually 3 subviews in a UITableViewCell
I think by default, the Editing Control is hidden until you enter edit mode for a table in which case, the Editing Control appears (the minus button left of each row) and your contentView gets resized and pushed to the right. This is probably what gives the "proper animation" effect mentioned by the other answer.
To test the difference, try adding a subview such as UILabel with text, to the cell rather than the cell.contentView. When you add it to cell rather than cell.contentView and you enter edit mode for your table, I believe your UILabel will not resize, you will see the edit button ontop/below the minus sign button.
Placing your views in the contentView affects proper animation in and out of edit mode. Place all of your subviews in contentView when you're not subclassing, which should be all of the time unless you know what you're doing.