Currently I'm trying to change the background selection color of a grouped UITableViewCell (non-subclassed) with the following code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
...
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor yellowColor];
}
The following problem occurs:
Also Tried:
cell.selectedBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.frame.size.width - 17, cell.frame.size.height-3)];
cell.selectedBackgroundView.backgroundColor = coolBlue;
UIBezierPath *rounded;
rounded = [UIBezierPath bezierPathWithRoundedRect:cell.selectedBackgroundView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(8.0f, 8.0f)];
else
rounded = [UIBezierPath bezierPathWithRoundedRect:cell.selectedBackgroundView.bounds byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(8.0f, 8.0f)];
CAShapeLayer *shape = [[CAShapeLayer alloc] init];
[shape setPath:rounded.CGPath];
cell.selectedBackgroundView.layer.mask = shape;
When I try using the above code part of the bottom of the cell gets cut off when I try to subtract 3 from the height. I'm subtracting 3 pixels in attempt to maintain the separator line.
Have you tried just using:
[cell setBackgroundColor:[UIColor yellowColor]];
It seems to work for me but my tableView might be set up differently than yours.
Related
I try to implement my own simple style of cells in my UITableView and I have a problem with separator. Works great with normal view, but when i select a cell it disappears. I try to add to my customSelect view separator, but then I can't see the separator anywhere. How can I add a separator to selected cell?
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *MyCellIdentifier = #"MyCellIdentifier";
UITableViewCell *cell = [wallMenuTableView dequeueReusableCellWithIdentifier:MyCellIdentifier];
if(cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:MyCellIdentifier];
MenuItemModel *mItem = [menu.menuPositions objectAtIndex:indexPath.row];
cell.textLabel.text = mItem.displayName;
cell.textLabel.textColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.textLabel.font = [UIFont fontWithName:#"ArialMT" size:16];
cell.textLabel.shadowColor = [UIColor blackColor];
cell.textLabel.shadowOffset = CGSizeMake(0.0, 1.0);
customSeparator = [[UIView alloc] initWithFrame:CGRectMake(0, (cell.frame.origin.y), 320, 2)];
customSeparator.backgroundColor=[UIColor blackColor];
[customSeparator.layer setShadowOffset:CGSizeMake(0.0, 0.8)];
[customSeparator.layer setShadowOpacity:0.8];
[customSeparator.layer setShadowRadius:0.8];
[customSeparator.layer setShadowColor:[UIColor grayColor].CGColor];
[cell.contentView addSubview:customSeparator];
customSelect = [[UIView alloc] initWithFrame:CGRectMake(0, (cell.frame.origin.y+2), cell.frame.size.width, cell.frame.size.height)];
//[customSelect addSubview:customSeparator];
customSelect.backgroundColor = [UIColor clearColor];
[cell setSelectedBackgroundView:customSelect];
}
return cell;
}
And current result:
Use a UIImageView instead of a simple UIView for your separator. Set the Image value (this is important!) instead of backgroundColor value and stretch the image with scale to fill.
Maybe your costumSelect is under the contentView of the Cell. I implemented such behaviour before, but I subclassed UITableViewCell. Try to override setSelected method on your custom cell.
use tableView.separatorColor (and tableView.separatorStyle) to set a contrasting separator color. If you're drawing your own separators within the cell, set separatorStyle=UITableViewCellSeparatorStyleNone. Furthermore, setting the selectionStyle to UITableViewCellSelectionStyleNone will likely help you
I'm working on a custom "Pulse style" UITableView according to this tutorial, and everything is going great. I've made some modifications and extensions but there is one feature I'd like to implement that I need some help with: the color of the horizontal bounce regions.
This is the method that creates my cell with a table view in it:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *cellIdentifier = [#"TableViewCell" stringByAppendingFormat:#"%i", self.content.indexInArrayOfViews];
UIView *view = [self.content viewAtIndex:indexPath.row];
UITableViewCell *cell = [self.horizontalTableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier] autorelease];
view.center = CGPointMake(view.center.y,view.center.x);
view.contentMode = UIViewContentModeCenter;
view.transform = CGAffineTransformMakeRotation(M_PI_2);
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
[cell addSubview:view];
return cell;
}
I'm aware there is a reuse cell issue, but for right now I want to change this color here [IMG].
I can control the color of the vertical table view bounce areas, but I am having difficulty replicating this success for my horizontal view.
This is how I do it vertically:
CGRect frame = self.tableView.bounds;
frame.origin.y = -frame.size.height;
UIView* topBack = [[UIView alloc] initWithFrame:frame];
topBack.backgroundColor = [self.delegate backgroundColorForTopOfTableView];
[self.tableView addSubview:topBack];
[topBack release];
This was according to this StackOverflow question.
How do I change the color/background of my horizontal table view (which is nested in a table view cell)?
Here is an album with some relevant iPhone screenshots and IB screenshots.
I discovered a solution:
if (indexPath.row == 0){
UIView *bounce = [[UIView alloc] initWithFrame:CGRectMake(-320, 0, 320, 150)];
bounce.backgroundColor = [self.delegate colorForBounceRegionAtRow:self.content.indexInArrayOfViews];
[view addSubview:bounce];
}
if (indexPath.row + 1 == self.content.viewCount){
UIView *bounce = [[UIView alloc] initWithFrame:CGRectMake([self.content widthOfViewAtIndex:self.content.viewCount - 1], 0, 320*2, [self.content greatestHeight])];
bounce.backgroundColor = [self.delegate colorForBounceRegionAtRow:self.content.indexInArrayOfViews];
[view addSubview:bounce];
}
This adds a full screen's worth of colored rectangle to the first and last elements, giving the illusion of a bounce region.
I want that my text should be align right.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:#"lisn"];
cell=[[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"lisn"] autorelease];
CGSize textSize = { 210.0, 10000.0 };
CGSize size = [[gMessageArray objectAtIndex:indexPath.row] sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:textSize lineBreakMode:UILineBreakModeWordWrap];
UILabel *lisnerMessage=[[[UILabel alloc] init] autorelease];
lisnerMessage.backgroundColor = [UIColor clearColor];
[lisnerMessage setFrame:CGRectMake(75 ,20,size.width + 5,size.height+2)];
lisnerMessage.numberOfLines=0;
lisnerMessage.textAlignment=UITextAlignmentRight;
lisnerMessage.text=[gMessageArray objectAtIndex:indexPath.row];
[cell.contentView addSubview:lisnerMessage];
return cell
}
but my text is not align right Please Help
Because you are using sizeWithFont and then setting your frame to that size, your text is aligned right. Try added a background color of light gray to your label to see what I'm talking about. Your label should be set to the same size as your table cell and allow the text to flow inside it. Then it will align to the right.
Update with sample
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"lisn"];
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"lisn"];
UILabel *lisnerMessage = [[UILabel alloc] init];
lisnerMessage.backgroundColor = [UIColor clearColor];
[lisnerMessage setFrame:cell.frame];
lisnerMessage.numberOfLines = 0;
lisnerMessage.textAlignment = NSTextAlignmentRight;
lisnerMessage.text = [gMessageArray objectAtIndex:indexPath.row];
[cell.contentView addSubview:lisnerMessage];
return cell
}
Right alignment for label
yourLabel.textAlignment = NSTextAlignmentRight;
Finally I have fix my problem. I was doing small mistake
[lisnerMessage setFrame:CGRectMake(75 ,20,size.width + 5,size.height+2)];
I just remove size.width and give my specific coordinate 200 after that the text is align right.
[lisnerMessage setFrame:CGRectMake(75 ,20,200,size.height+2)];
Thanks all for your response
Why don't you just make the label in interface builder/storyboard and select the "align right" option? Then connect it as a property named lisnerMessage and
lisnerMessage.text=[gMessageArray objectAtIndex:indexPath.row];
That would significantly cut down on how much code you're writing and definitely work.
I'm trying to use my ReusableCell for cells with images in different dimensions. The images are put inside a 220x150 black box with with scaling UIViewContentModeScaleAspectFit.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"NewsTableViewCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]];
[cell.imageView setImage:[[UIImage alloc] initWithData:data]];
[cell.imageView setBackgroundColor:[UIColor blackColor]];
[cell.imageView setContentMode:UIViewContentModeScaleAspectFit];
CGRect imageViewFrame = cell.imageView.frame;
imageViewFrame.size.width = 220;
imageViewFrame.size.height = 150
[cell.imageView setFrame:imageViewFrame];
[cell.textLabel setText:item.title];
return cell;
}
The above code results in a layout like below and the images are sometimes changing when scrolling in the table view.
Instead of this unstructured layout, I would like the images to be aligned like this:
What am I doing wrong with this ReusableCell?
EDIT1:
I'm trying to create an imageView and add this imageView as a superview to cell.contentView.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"NewsTableViewCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];
UIImage *placeholderImage = [UIImage imageNamed:#"ImagePlaceholderThumb"]; //220x150
UIImageView *imageView = [[UIImageView alloc] initWithImage:placeholderImage];
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]];
[imageView setImage:[[UIImage alloc] initWithData:data]];
[imageView setBackgroundColor:[UIColor blackColor]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
CGRect imageViewFrame = imageView.frame;
imageViewFrame.size.width = placeholderImage.size.width;
imageViewFrame.size.height = placeholderImage.size.height;
[imageView setFrame:imageViewFrame];
[cell.contentView addSubview:imageView];
[cell.textLabel setText:item.title];
return cell;
}
The above code results in the following:
It is like some of the images are visible in two cells. It seems that they are not keeping the size I've set in the imageViewFrame. Do you know why?
A quick fix would be using content mode UIViewContentModeScaleAspectFill. Images will be stretched in one or both dimensions to fill up the whole image view bounds.
You really need subclassing UITableViewCell to do this right.
Thre is a lazy solution adding a new UIImageView and using a spacer, as Keller told you in his answer (feel free to accept his answer, this is just the missing code).
Extract of tableView:cellForRowAtIndexPath::
...
cell.textLabel.text = [NSString stringWithFormat:#"Cell #%i", indexPath.row];
cell.imageView.image = [UIImage imageNamed:#"spacer.png"]; /* spacer is 64 x 44 */
/* image view width should be ~ 64 px, otherwise it will overlap the text */
UIImageView *iv = [[UIImageView alloc] initWithFrame:(CGRect){.size={64, tableView.rowHeight}}];
switch (indexPath.row) {
case 0:
iv.image = [UIImage imageNamed:#"waterfall.png"];
break;
/* etc... */
}
if (indexPath.row < 3) {
/* add black bg to cell w/ images */
iv.backgroundColor = [UIColor blackColor];
}
iv.contentMode = UIViewContentModeScaleAspectFit;
[cell.contentView addSubview:iv];
...
The table will look like this:
You need to set the placeholder (spacer.png above) in the existing cell image view. It will push the text label to the right.
You can use aspect fill and remove the background color bit:
iv.contentMode = UIViewContentModeScaleAspectFill;
The table will look wrong because the image is drawn outsite the bounds:
Just clip to bounds to get a better result:
iv.clipsToBounds = YES;
Create a UIImageView subview for each cell and it to the contentView. Each UIImageView contains an image with a consistent frame but with option UIViewContentModeScaleAspectFit. Then just Set the background color of the UIImageView to black.
I just confirmed this works, but you need to also create a placeholder spacer image to make sure the textLabel moves out of the way. Just make it the same dimensions of your image (with the letter boxing).
- (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];
//spacer
cell.imageView.image = [UIImage imageNamed:#"placeholder"];
//imageview
UIImageView *thumbnail = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 44)];
thumbnail.tag = kThumbTag;
thumbnail.backgroundColor = [UIColor blackColor];
thumbnail.contentMode = UIViewContentModeScaleAspectFit;
[cell.contentView addSubview:thumbnail];
}
// Configure the cell...
cell.textLabel.text = [NSString stringWithFormat:#"Cell %d", indexPath.row];
cell.imageView.frame = CGRectMake(0, 0, 80, 44);
UIImageView *thumb = (UIImageView*)[cell.contentView viewWithTag:kThumbTag];
if (indexPath.row == 0) {
[thumb setImage:[UIImage imageNamed:#"image1.png"]];
} else {
[thumb setImage:[UIImage imageNamed:#"image2.png"]];
}
return cell;
}
Obviously, this example isn't lazy loading the images (I didn't realize you were loading them from a URL). For that, I would use a subclass with EGOImageView or something of the like.
I'm trying to display a UIImageView inside a UITableViewCell.
Inside method - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath I have:
- (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];
}
CGSize cellSize = cell.frame.size;
CGFloat cellWidth = cellSize.width;
CGFloat cellHeight = cellSize.height;
CGRect imageFrame = CGRectMake(0, 0, 70, cellHeight);
UIImageView * image = [[UIImageView alloc] initWithFrame:imageFrame];
[image setImage:[UIImage imageWithContentsOfFile:#"cyan.jpg"]];
CGRect nameFrame = CGRectMake(80, 0, cellWidth-80, cellHeight/2);
UILabel * nameLabel = [[UILabel alloc] initWithFrame:nameFrame];
nameLabel.text = #"Name: John Doe";
CGRect jobFrame = CGRectMake(80, 20, cellWidth-80, cellHeight/2);
UILabel * jobLabel = [[UILabel alloc] initWithFrame:jobFrame];
jobLabel.text = #"Job: IT-Consultant";
[cell addSubview:image];
[cell addSubview:nameLabel];
[cell addSubview:jobLabel];
return cell;
}
The labels are displaying perfectly but I don't see the image.
Any help would be appreciated.
imageWithContentsOfFile: expects a path to be sent to it. Use imageNamed: instead, or get hold of the path first by using NSBundle's pathForResource... methods first to get the path.
Also, if the image is the same for every cell, you should add the image view inside the cell=nil block, or you will be adding the view over and over again.
Add it to the UITableViewCell contentView instead.
[cell.contentView addSubview:...];
Use the UITableViewCell's imageView property instead of what you're doing. To be more clear, use cell.imageView.image and set your UIImage to that.
Or if you wish the image's location to be more flexible, add the imageView to the cell's contentView. i.e: [cell.contentView addSubview:yourImageView];