I have a cell that has some text in it and was trying to add an image to the cell.
This is what Ive tried:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 30, 30, 30)];
imageView.backgroundColor = [UIColor clearColor];
[imageView.layer setCornerRadius:5.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:[UIImage imageNamed:#"test2.jpeg"]];
[cell.contentView addSubview:imageView];
cell.imageView.clipsToBounds = YES;
This is what it looks like right now:
Is there a way to avoid the image from overlapping the text in the cell? Thanks in advance!
tableviewcells have their own imageView that will appear to the left of the content or atleast to the left of the cells text.
You are creating an extra imageView that just happens to have the same name.
Just change the location
cell.imageView.center = CGPointMake(x,y);
Check out https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TableView_iPhone/TableViewCells/TableViewCells.html#//apple_ref/doc/uid/TP40007451-CH7-SW11 which has a nice example of how to use the built-in UITableViewCell image view.
Every UITableViewCell already has an UIImageView property 'imageView', but it's only shown if you set the imageView properties image property (cell.imageView.image = /* image code */;)
The best thing you can do is create a custom UITableViewCell. Or perhaps add another UILabel to the current cell and set your text in that instead of using the default UILabel.
Related
I'm constructing a UITableViewCell via a nib file. I also have a corresponding UITableViewCell subclass which the nib's outlets are connected to.
I need a dynamically sized UIImageView (only the width) to be the background of my tableviewcell's label. Is there a way this can be achieved via autolayout?
I've tried setting the imageview as a subview of the label in code:
[theLabel sizeToFit]
CGRect boundingRect = [theLabel.text boundingRectWithSize: theLabel.frame.size options:NSStringDrawingUsesLineFragmentOrigin attributes:0 context:0];
UIImageView *background = [[UIImageView alloc]initWithFrame:boundingRect];
background.image = [UIImage imageNamed: #"validImageName"]];
[theLabel addSubview: background];
However this does not result in the correct frame. I've also considered setting the background of the label with [UIColor colorWithPatternImage: #"aValidImageName"]; but this does not include padding on the background image. Also, the background image contains rounded corners which I want to retain (which this method cuts). Any ideas are appreciated.
Try this,
1) You can use Autoresizing to change image width according to size of screen.
(OR)
2) Set Custom frame for your imageview
Ex:
UIImageView *background = [[UIImageView alloc]initWithFrame:(0,0,Your_Custom_Width_Size_Value,100)];
background.image = [UIImage imageNamed: #"validImageName"]];
[theLabel addSubview: background];
(or)
//Change width according to the label
UIImageView *background = [[UIImageView alloc]initWithFrame:(0,0,Your_Label_Name.frame.size.width,100)];
background.image = [UIImage imageNamed: #"validImageName"]];
[theLabel addSubview: background];
I would advise you to use a UIView object as a container and add your UIImageView and UILabel as subViews to it. Add constraints to the Image View and the Label so that their height and width are always equal to the superview. Then just give the container UIView whatever frame you want.
I have a 40x40 button and in it I wanted to place an image of 20x20 dimension in the center. Here is what I did.
Set the content mode to center.(No scaling)
Assigned the image as the 'image' property of the button.
But when I run the program and check the image's dimension, it is different. Am I doing something wrong here?
In UIButton class, you've image and backgroundImage properties which have different behaviour when you set an image. You can use one of the 2 depending on what you want to do.
In my case If I just set the image property of the button,The image will be in the center.
Check these things:
1.Make sure you set the *image* ,not the *backgroundImage*.
2.Make sure the size of your image assets is smaller than the button's size.
3.Er...I just know two things...
Create the Custom UIButton
Create the UIImageView and add it as subview of custom UIButton.
Please refer the below code snippet, it will add the image in centre of button.
-(void)addImageInCenterForButton:(UIButton *)button
{
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SettingIcon"]];
CGRect imgRect = button.bounds;
imgRect.size.width = 20;
imgRect.size.height = 20;
imgRect.origin.x = (button.bounds.size.width - imgRect.size.width) / 2;
imgRect.origin.y = (button.bounds.size.height - imgRect.size.height) / 2;
imgView.frame = imgRect;
[button addSubview:imgView];
}
try this i hope it helps..
my image is of 20x20 dimension,and if i change the size of button it looks same and its also in the center of a button..
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40 ,40)];
[btn setImage:[UIImage imageNamed:#"ok"] forState:UIControlStateNormal];
[btn setBackgroundColor:[UIColor redColor]];
[btn setContentMode:UIViewContentModeCenter];
[self.view addSubview:btn];
I have a problem positioning a textLabel and detailTextLabel into a custom UITableViewCell that has a UIImageView appearing behind the textLabel and detailTextLabel.
Refer to the image - it will make more sense
--> what you're looking a UITableView, where each bubble represents a different UITableViewCell.
Essentially, I am trying to fit the textLabel and detailTextLabel into the bubble you see by expanding the bubble dimensions. However, no matter what I try the bubble will not change it's width and height even if I change the UIImageView frame or bounds or contentMode.
Here is the relevant code in cellForRowAtIndexPath:
//Set font and style
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor];
// Assign our own background image for the cell
UIImage *cellBackgroundImage = [UIImage imageNamed:#"Chat.png"];
UIImageView *cellBackgroundImageView = [[UIImageView alloc] initWithImage:cellBackgroundImage];
//[cellBackgroundImageView setBounds:CGRectMake(0, 0, 20, 20)];
//[cellBackgroundImageView setImage:cellBackgroundImage];
//cellBackgroundImageView.frame = CGRectMake(cellBackgroundImageView.frame.origin.x, cellBackgroundImageView.frame.origin.y, 20, 20);
//cellBackgroundImageView.bounds = CGRectMake(cellBackgroundImageView.frame.origin.x, cellBackgroundImageView.frame.origin.y, 0, 0);
cellBackgroundImageView.contentMode = UIViewContentModeScaleAspectFill;
cellBackgroundImageView.image = cellBackgroundImage;
cell.backgroundView = cellBackgroundImageView;
Any help would be appreciated.
Don't do it here, I did it by writing frame of image and label in LayoutSubviews method in custom cell class.
Just
-(void)layoutSubviews
{ setframe: for both UI components }
Dont use Aspect FIll, use either scaleToFill, or set image to image view using imageCapInsets .
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
For your Image, it must be like
UIImage *cellBackgroundImage = [[UIImage imageNamed:#"Chat.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(20, 70, 40, 20) resizingMode:UIImageResizingModeStretch]
I have create a table view and have filled its cells with text. What I'm trying to do is add an image to the cell but whats happening is the image is coving the whole cell and it looks bad...
This is what I'm doing: cell.imageView.image = [UIImage imageNamed:#"test2.jpeg"];
And this is what it looks like:
What I'm trying to get it to look like is:
How do i resize the image of the table view cell in order to get the desired result?
Update
This is what I have tried suggested in the answers below:
cell.imageView.frame = CGRectMake(0.0f, 0.0f, 30.0f, 30.0f);
cell.imageView.layer.cornerRadius = 8.0;
cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
cell.imageView.layer.masksToBounds = YES;
cell.imageView.image = [UIImage imageNamed:#"test2.jpeg"];
but still the output I'm getting is:
Update 2.0
Ive tried some other ways suggested:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 30, 30, 30)];
imageView.backgroundColor = [UIColor clearColor];
[imageView.layer setCornerRadius:8.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:[UIImage imageNamed:#"test2.jpeg"]];
[cell.contentView addSubview:imageView];
but now I'm getting this:
First you need to set the cell's imageView to the max size you want. Then assure via Interface Builder or via code that you have the correct content mode:
cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
Basically with this mode it will try to fit the space you created for your image but it will maintain the aspect ratio.
Jackson posted a good image that shows the content modes here:
For the corner you will need QuartzCore and you can do set it with this code:
#import <QuartzCore/QuartzCore.h>
...
cell.imageView.layer.cornerRadius = 4;
cell.imageView.layer.masksToBounds = YES;
UPDATE
If your imageView isn't an outlet you are better off adding one imageView yourself to the cell. You can (and you should) do that via storyboard/xib. This tutorial might help you on that, although there are a lot of them on the internet. This stackoverflow question gives other solutions to that problem.
I spent the last few hours figuring out how to do this, so I'll share what I've found. Your code from Update 2.0 is a good start:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 30, 30, 30)];
imageView.backgroundColor = [UIColor clearColor];
[imageView.layer setCornerRadius:8.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:[UIImage imageNamed:#"test2.jpeg"]];
[cell.contentView addSubview:imageView];
You can mess with the numbers in the first line to get the image to appear where you need it; for my purposes, I used (20, 5, 40, 40).
Add this line before [cell.contentView addSubview:imageView] :
[imageView setTag:99];
We need this tag to identify which subview we just added. If you don't remove the image every time you reload a cell, the images will just start piling up there. For your case, this doesn't make much of a difference because it will keep using the same image, so it will look the same. However, if you get a user that likes to scroll up and down a lot, you could run into problems with a couple hundred or more of those images loaded. And if your cells will have different images, they will start displaying on top of each other, which will look really bad if they're different sizes. So before you initialize *imageView, run this loop:
for (UIImageView *subview in cell.contentView.subviews)
{
if (subview.tag == 99)
{
[subview removeFromSuperView];
}
}
With this code, your image should look the same as it does in Update 2.0, but it should run better. To move your text over, use cell.indentationLevel and cell.indentationWidth. Make sure your cell style is set to "basic" (it looks like yours is) and somewhere before you return your cell, use
cell.indentationWidth = 10; // The amount each indentation will move the text
cell.indentationLevel = 7; // The number of times you indent the text
so this code will move the text over 10 points 7 times. You can play with it until you get it to look right; this is just what I used in my project. Hope this helps!
Can you edit the image itself? Try editing the image down the size you'd like and manually rounding the corners. Then call
cell.imageView.image = [UIImage imageNamed:#"test3.jpeg"];
The best way to implement this is to add the below where you call cell.imageView.image
cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
For the rounded corners #import <QuartzCore/QuartzCore.h>
cell.imageView.layer.cornerRadius = 8.0;
So, when I do this with a regular old view:
UIView *topBlock = [[UIView alloc] initWithFrame:CGRectMake(0,-frameSize.height, frameSize.width, frameSize.height/2)];
[viewController.view addSubview:topBlock];
topBlock.autoresizesSubviews = NO;
topBlock.clipsToBounds = YES;
UIImage *topImage = [UIImage imageNamed:#"BloktLayout"];
UIImageView *topImageView = [[UIImageView alloc] initWithImage:topImage];
topImageView.frame = viewController.view.frame;
[topBlock addSubview:topImageView];
I get the nice old image where I want it, in the top view. But the middle view is a UILabel, and when I try the same thing:
UILabel *midBar = [[UILabel alloc] initWithFrame:CGRectMake(midBarOrigin.x, midBarOrigin.y, midBarWidth, midBarHeight)];
midBar.text = #"Blokt";
midBar.textColor = [UIColor blackColor];
midBar.textAlignment = NSTextAlignmentRight;
midBar.font = [UIFont fontWithName:#"HelveticaNeue-UltraLight" size:80.0f];
[viewController.view addSubview:midBar];
midBar.autoresizesSubviews = NO;
midBar.clipsToBounds = YES;
UIImage *midImage = [UIImage imageNamed:#"BloktLayout"];
UIImageView *midImageView = [[UIImageView alloc] initWithImage:midImage];
midImageView.frame = viewController.view.frame;
[midBar addSubview:midImageView];
I don't see any image at all in the UILabel. Any help?
Seems like the issue is related to your frames.
Tough to say without additional info. Can you post viewController.view.frame, frameSize, and midBarOrigin / midBarWidth / midBarHeight?
In the second codeblock, midBar.clipsToBounds == YES, but it looks like the midImageView.frame is likely very different / outside of midBar.frame in which case it wouldn't be visible.
Edit Some screenshots would help but aren't necessary
Edit 2 Note that subviews' origin points are always relative to the coordinate system of their superview, never relative to the coordinate system of any other view in the view heierarchy. This is likely the heart of the issue here. If you do want to convert CGPoints or CGRects from one coordinate system to another there are methods on UIView such as convertRect: and convertPoint: etc.
Interface Builder doesn't even let you add a control inside of a UILabel.
Instead, if you wish to group multiple controls, you can add them both as subviews of a UIView.
In other words, your image view and label can share the same superview, but the image view cannot be a subview of the label.
If they share the same superview, you can position the image view behind the label, and it should appear "through" the label as long as the label's background is clear.
Simple Way to do.....
You can add UIImageView, UILabel as subview of cell.textLabel
UIImageView *statusImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 4, 8, 8)];<br/>statusImage.backgroundColor = [UIColor redColor];<br/>
statusImage.layer.cornerRadius = 4;<br/>
statusImage.clipsToBounds = YES;<br/>
[cell.textLabel addSubview:statusImage];<br/>
UILabel *Lbl = [[UILabel alloc] initWithFrame:CGRectMake(15, 0, cell.textLabel.frame.size.width - 15, cell.textLabel.frame.size.height)];<br/>
Lbl.text = #"xyz";<br/>
[cell.textLabel addSubview:Lbl];<br/>
I just had this problem as well.
I found that ImageView was behind the label.
When I replaced label with UIView, it works properly.