I have a UITableViewCell in which I would like to draw some lines (say a 2pt line at 1/3rd from top of the TableCell covering the whole width). The lines would always be in the same place within the tableview cell.
One straightforward solution is to just have a -drawRect method that will use CGContextStrokePath to draw the line. But that seems to be like an overkill since it would call drawRect everytime which is inefficient.
I would think that there would be a way to be able to cache it somehow, so that all tableview cells are created with the lines by default. One way I can think of is to create 2pt*2pt png file and add it to a UIImageView on top of the tableview cell. Any other ways?
Try this -
Add this code in your cellForRowAtIndexPath, just adjust y position og this image view-
UIImageView *seperatedImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 49, 320, 1)];
seperatedImageView.backgroundColor = [UIColor colorWithRed:201.0/255.0 green:250.0/255.0 blue:152.0/255.0 alpha:1.0];
[cellBackView addSubview:seperatedImageView];
Another option is, to add a UIView and set its background color. For example:
UIView *lineView = [[[UIView alloc] initWithFrame:CGRectMake(0,0,cell.contentView.bounds.size.width, 2)] autorelease];
lineView.backgroundColor = [UIColor grayColor];
[cell.contentView addSubview:lineView];
You can just add a UIView like a subView of your UITableViewCell.
Related
I have attached an image of cells in a table view, and you can notice the 2 separator lines in the middle are a tiny bit thicker/darker than the 2 outer lines. I want the lines to all be consistent, and the color/thickness of the outer two lines. I could not find a solution, so I am wondering if anyone knows of any. I figure it would be a simple solution, but I haven't been able to figure it out. Thanks guys.
Select your UITableView from xib or storyboard, then make the UITableView separator to None.
See the image
Then place a UILabel with the width same as of UITableViewCell and height=1 in the bottom of your cell, clear the text of the label and set the backGround color as per your wish, this will solve your problem.
Hope this helps you.
Create a custom separator Line Programatically:
UIView *separatorLine = [[UIView alloc] initWithFrame:
CGRectMake(0, cell.contentView.frame.size.height - 1.0,
cell.contentView.frame.size.width, 1)];
separatorLine.backgroundColor = [UIColor blackColor];;
[cell.contentView addSubview: separatorLine];
or you can add a image view for separator in custom UITableviewCell in UI
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.
I have a table. Within each cell of a table, I created a simple bar graph (which is just 2 UIViews with background filled).
I have set cell.selectedBackgroundView to an image.
When the cell is selected, it seems to cover up parts of the bar graph. Does anyone know why?
The red is the selected cell. The top and bottom are unselected cells:
In the image, the grey bar, the brown bar, the 2 numbers (x.xx) and the semi-transparent line at the left, are all subviews of 1 UIView. The UIView is added to the cell. The line and the 2 numbers are still there, but the 2 bars are gone.
Here's some code:
Cell selected image set like this:
UIImage *selectedRowImage = [UIImage imageNamed:#"table-selectedcellbg-red-45px-stretch.png"];
cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[selectedRowImage resizableImageWithCapInsets:UIEdgeInsetsMake(selectedRowImage.size.height, selectedRowImage.size.width/2, selectedRowImage.size.height, selectedRowImage.size.width/2)]];
[cell sendSubviewToBack:cell.selectedBackgroundView]; // This didn't make a difference
Adding the view set like this:
UIView *graph = [barGraph getGraph];
UIView *graphView = [[UIView alloc]initWithFrame:CGRectMake(150, (tableView.rowHeight - graph.frame.size.height)/2, graph.frame.size.width, graph.frame.size.height)];
[graphView addSubview:graph];
[cell addSubview:graphView];
Any ideas?
I think the answer can be found in the UITableViewClass Reference:
selectedBackgroundView
...
Discussion
The default is nil for cells in plain-style tables
(UITableViewStylePlain) and non-nil for section-group tables
(UITableViewStyleGrouped). UITableViewCell adds the value of this
property as a subview only when the cell is selected. It adds the
selected background view as a subview directly above the background
view (backgroundView) if it is not nil, or behind all other views.
Calling setSelected:animated: causes the selected background view to
animate in and out with an alpha fade.
It seems as if selectedBackgroundView only works well if the corresponding backgroundView property of the cell is not nil.
Try adding a backgroundView and test again.
Hope that helps you out.
Edit:
Since this wasn't the solution, I tried to reproduce your problem, but with no success: the backgroundView stayed behind the QuestionMarkIcon (a view like your graphView)..
Code:
- (UITableViewCell*) tableView: (UITableView*) tableView cellForRowAtIndexPath: (NSIndexPath*) indexPath {
//...
UIImage* selectedRowImage = [UIImage imageNamed: #"strecheableImage.png"];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage: [selectedRowImage resizableImageWithCapInsets: UIEdgeInsetsMake(selectedRowImage.size.height, selectedRowImage.size.width/2, selectedRowImage.size.height, selectedRowImage.size.width/2)]];
UIView* graph = [[QuestionMarkIcon alloc] init];
UIView* graphView = [[UIView alloc]initWithFrame: CGRectMake(150, (tableView.rowHeight - graph.frame.size.height)/2, graph.frame.size.width, graph.frame.size.height)];
[graphView addSubview: graph];
[cell addSubview: graphView];
// ...
}
This is how my stretchableImage.png looks like:
Cell 1 is selected but the QuestionMarkIcon (your graph) stays in front:
Sorry I couldn't help.
Hi i want to add a line in my UITableView just like the reminder apps red line. I tried adding it to my custom cell but then it only display in the cell which are used and not in all cell. I want a red image like below
Thanks in advance
You could use a UIView that has the size of the red stripe and place it over your UITableView where you want the red line to appear. Set it's backgroundColor to the color of the red line and make sure that userInteractionEnabled is set to NO to avoid interfering with the scolling of the UITableView.
Try To add UIView on tableView and set it`s Background Color with pattern Image whatever you want,then add such view on tableview. like below.
lineView = [[UIView alloc] initWithFrame:CGRectMake(100, 0, 1,
tblView.frame.size.height)];
[lineView setBackgroundColor:[UIColor blackColor]]; //Change as per your req.
lineView.userInteractionEnabled = NO;
[tblView addSubview:lineView];
But you face problem with this when you scroll up then at vertical bounce you have to manage height of this UIView. So you can implement this by ScrollViewDidScroll Delegate method, This method call cause UITableView is extends from UIScrollView.
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
lineView.frame = CGRectMake(100, 0, 1, tblView.frame.size.height+scrollView.contentOffset.y);
}
I've used -[UITableView setSeparatorColor:] to set the red border in the attached image. But how do I set the color of the border showing up as white?
EDIT: I know I can use the UITableViewSeparatorStyleSingleLine style to get rid of the white color entirely. But I don't want to do that: I want to change its color. Thanks!
The white color is because the separator style is set to Single Line Edged. If you change it to Single Line the white lines will disappear. Not sure if that solves your problem but I don't think you change the color without doing a lot more work.
Try making a "line view" for the cells. So in cellForRowAtIndexPath: method just add that to the cell that you need:
UIView *lineView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.contentView.bounds.size.width, 1)] autorelease];
lineView.backgroundColor = [UIColor whiteColor];
lineView.autoresizingMask = 0x3f;
[cell.contentView addSubview:lineView];
that will add that white line to the top of the each cell. If you don't want it for the very first row add an if-statement:
if (indexPath.row != 0)
{
UIView *lineView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.contentView.bounds.size.width, 1)] autorelease];
lineView.backgroundColor = [UIColor whiteColor];
lineView.autoresizingMask = 0x3f;
[cell.contentView addSubview:lineView];
}
Hope it helps.
You are trying to change the default iOS user interface but the change is so complex that it can't be done with the default properties.
What is the solution? Just remove the lines drawn by UITableVie (setting the color to [UIColor clearColor]) and customize UITableViewCell background.
Of course, you need 3 types of backgrounds - for the first cell, for the last cell and for the middle ones:
- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath (NSIndexPath*)indexPath {
UITableViewCell* cell = [...];
UIView* background;
if (indexPath.row == 0) {
background = [...]; //background for the first cell
}
else if (indexPath.row + 1 == [self tableView:tableView numberOfRowsInSection:indexPath.section]) {
background = [...]; //background for the last cell
}
else {
background = [...]; //background for the middle cells
}
cell.backgroundView = background;
}
The question is how to create the background. Usually I just use an UIImageView or a combination of several UIImageView (rounded corner as one image and the lines as resizible images).
You can't.
This built-in drawing is specific to grouped-style tableView, and can't be changed (to my knowledge...)
There's a workaround to this (we've used -> sorry no source code), but i guess you're not going to like it :
1/ have information of each cell's position
2/ to re-implement drawing of EACH cell's background, depending on its position (so you have to save this position : FirstCell, MiddleCell, LastCell,) to reproduce the grouped tableView look.
A way to do this is with CoreGraphics :
From your subclassed CellGroupedBackgroundView (or customGroupedTableViewCell, depending on the design you choose) you create 2 nearly identical CAShapeLayers. Each one for each separator color. And you expose these colors as properties of your CellGroupedBackgroundView.
You set these layer's path depending on the position property you have set (using only CGPathAddLineToPointfor middle cells, and CGPathAddArcToPoint for first and last cell)
2/ use that created custom backgroundView on a plain UITableView, setting each cell's 'position' according to its indexPath...
Good luck :)