Set Tableview background with Image and Label - ios

I have searched all over but haven't found the answer that works for me.
I just want a tableview background to be set with an Image and a Text below the image when there are no items in the tableview. Like this:
http://i.stack.imgur.com/7DZa5.png
It also has to be in the center and has to work in both iPhone and IPad.
I have tried setting the tableview background to an ImageView but I can't get the label to be positioned below the image. I have also tried creating a separate .xib file for this but I can't get it to work. Please help!

Do you believe in magic ? Kidding...
I believe its not the background of table view. Whenever the array populating your table view contains no data, you need to remove the table view (_tableView.hidden = YES; WILL WORK) and add this custom view with your image and label.

Why don't you set the UITableView's background property to clear. Then just set the image as the background of the view it self? Using AutoLayout will help you keep it centre at all times.

Hi i have done it using ImageView and setting a label inside the imageview.. then adding the imageview as the background for the tableview. It works on iphone and ipad. here is the code:
UIImage *image = [UIImage imageNamed:#"ico_file_list_not_found.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
imageView.image = image;
[imageView setContentMode:UIViewContentModeCenter];
UILabel *messageLbl = [[UILabel alloc] initWithFrame:CGRectMake(self.tableView.bounds.size.width/2 - image.size.width / 2 + (image.size.width/7),
self.tableView.bounds.size.height/2 + image.size.height / 2
, 120, 21)];
messageLbl.text = #"No files found.";
[imageView addSubview:messageLbl];
self.tableView.backgroundView = imageView;
thank you

It work for you
1> IBOutlet lblTextlable and imgNoItem
2> you set the UITableView's background property to clear.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
if (arrTableListItem.count==0) {
lblTextlable.hidden = false;
imgNoItem.hidden = false;
}
else {
lblTextlable.hidden = true;
imgNoItem.hidden = true;
}
return arrTableListItem.count;
}

As I see in that image, it's the label and image. So the code logic maybe as follow:
If there is no item in list view, hide it and "show" the image / label.
If there are at least one item in the list view, show the list view and hide the Image / Label.

Related

Access the UIImageView of the background image of a UIButton

I have a UIButton, and I would like to access the UIImageView of its background image so that I can make the image circular. I know that I can affect the image itself but I would prefer to do this more elegantly. I also know that I can use the button.currentBackgroundImage property to get the UIImage in the background, but I want the view itself. Once I have the view I intend to use this code:
buttonImageView.layer.cornerRadius = buttonImageView.frame.size.width / 2;
buttonImageView.clipsToBounds = YES;
How can I access the buttonImageView?
EDIT:
Due to #vhristoskov's suggestions, I tried cropping the button itself with this code:
self.button.layer.cornerRadius = self.button.frame.size.width/2;
self.button.clipsToBounds = YES;
And it made this shape:
After debugging I found that frame.size.width was 46, when it should have been 100. So I tried this code instead:
self.button.layer.cornerRadius = self.button.currentBackgroundImage.size.width/2;
self.button.clipsToBounds = YES;
And that produced this shape:
And this time, the cornerRadius was being set to 65. So it actually seems like my problem is that I don't have the correct width at the moment. Which property should I access to get the correct number?
Well as I guessed and as you've already found - the problem is in the button size. To be sure that your button's size at runtime is what you expected to be - review your constraints. In the example below the button has vertical and horizontal central alignment and fixed width and height.
Constraints:
To have perfectly circular button you should have button.width == button.height. If this condition is met your code should work like a charm:
self.button.layer.cornerRadius = CGRectGetWidth(self.button.frame) / 2;
self.button.clipsToBounds = YES;
Assuming that you called something like:
[self.myButton setBackgroundImage:[UIImage imageNamed:#"image"] forState:UIControlStateNormal];
in viewDidLoad or earlier, you can then call the following in viewDidAppear:
if (self.myButton.subviews.count > 0 && [self.myButton.subviews[0] isKindOfClass:[UIImageView class]]) {
UIImageView *imageView = self.myButton.subviews[0];
imageView.layer.cornerRadius = imageView.frame.size.width / 2;
imageView.clipsToBounds = YES;
}
but it is not more elegant as the subview ordering is an implementation detail of UIButton and may change at any time.

Can't hide UIImageView via setHidden:

I have a custom UITableViewCell in which i create an Icon like this:
self.icon = [[UIImageView alloc] initWithFrame:CGRectMake(15, 15, 50, 50)];
[self.icon setImage:[AppearanceProxyController getImageForAssetIdentifier:#"import"]];
[self addSubview:self.icon];
which works just fine. In addition there is my method to hide the icon:
-(void)hideIcon{
dispatch_async(dispatch_get_main_queue(), ^{
[self.icon setHidden:true];
});
}
which ... has no effect at all and i have no clue why.
the method is called when the cell is tapped from its tableviewcontroller.
the check states it as hidden but it is not.
UIImageView: 0x17d37d20; frame = (15 15; 50 50); hidden = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x17f8f4c0>> is hidden: 1
setting the uiimage to nil od the alpha to 0.0 has no effect either. What am i doing wrong?
You probably have more than one UIImageView instance, but only have a reference to the latest one. When you hide that, you'll see the old instance underneath which (if they show the same image) looks like hiding didn't work.
So you need to make sure that you call removeFromSuperview on the old instances or need to make sure that you don't create more than one.
Your problem is you are creating self.icon in every uitableview cell.
You alloc init the icon every time so self.icon hold the last object which you alloc init. if you hide the self.icon then it hides the last object.
So If you want to hide some image view just pass this object in your hide icon method like this
-(void)hideIcon : (UIImageView *)imageView{
dispatch_async(dispatch_get_main_queue(), ^{
[imageView setHidden:true];
});
}
And call it when you want to hide

How can i set images after generating imageview in ios?

Suppose I generated the 100 image views. First of all I wish to generate all 100 image views and add them in my scroll view.
So image view are clearly display it’s in position using background color
Then after I want to set images into the image view. I have to types of Dictionary (Which comes from the another class). One Dictionary into set Already Downloaded images and another one into only generate object (Remaining download images). I am downloading this image Asynchronously.
Then how can I set images into the image view?
-(void)GenerateImageView{
for (int ivalue = 0; ivalue < 100; ivalue++) {
imageView = [[UIImageView alloc] init];
//Give tag to the image view
imageView.tag = ivalue;
[imageView setBackgroundColor:[UIColor whiteColor]];
CGFloat xOrigin =ivalue *ascrollView.frame.size.width+50;
imageView.frame=CGRectMake(xOrigin40,imgYpos,ascrollView.frame.size.width-20, scrollViewHight);
//set imageview into the scroll view
[ascrollView addSubview:imageView];
}
}
Then how can I set images into the imageview?
UIImageView *imageView = [ascrollView viewWithTag:some_tag];
if ([imageView isKindOfClass:[UIImageView Class]])
imageView.image = your_UIImage_object;
u can not access the directly image view.And also make sure ur tag not start with 0.bcs 0 is a by default main view tag
imageView = (UIImageView *)[ascrollView viewWithTag:some_tag];
imageView.image = your_UIImage_object;
You could use the code Avt suggested, but instead of reinventing the wheel, I would suggest to look into
AFNetworking
an open-source networking lib. It comes with an extension to the UIImageView which allows you to load the images asynchronously out-of-the-box. There are many other useful features too.
After importing the extension you could then use:
[imageView setImageWithURL:[NSURL URLWithString:#"yourImageURL"]];
the image gets loaded asynchronously and automaticly set when it's done loading.

What method do I use when wanting to display multiple images and respond to user interaction?

Alright, so I have 5 custom images that I want in my game.
So each variable for example will have a value set with it, image 1 = 1, image 2 = 2, etc. I want the user to be able to press one of these images and when they do, it will change from say image 5 to image 4.
Do I need to put these images in an array/dictionary/etc? I honestly have no idea how to go about it so dont know what to search for on google.
Any help or advice is appreciated.
You should use imageViews and add a gesture recognizer to each imageView, and then give each imageView tags in order to organize them. You can set tags in storyboard by pressing the imageView and then entering the tag under the shield. Each imageView should have a distinct tag. I'm giving a programatic example below for clarity, though.
UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(wasTapped:)];
tap.delegate = self;
imageView.tag = 1;
[imageView addGestureRecognizer:tap];
When an imageView is tapped the selector will be called and you can change the imageView like so.
-(void) wasTapped:(UIGestureRecognizer *) recognizer
{
UIImageView * imageView = (UIImageView*) recognizer.view;
if (imageView.tag == 1){
// change image to something else
UIImage * newImage = [UIImage imageNamed:#"newImage"];
imageView.image = newImage;
}
}
You may have to call [imageView setNeedsDisplay] to make the new image appear. You also will have to devise some system to organize the imageViews. You may also have to set imageView.userInteractionEnabled to YES.

How to set the imageView property in a UITableCellView to show only a background color?

I have a custom class inheriting from UITableViewCell class that shows either an image (left to the title) or a generic dark-colored square if the image is not available). The following code shows a dark square on a light-colored cell background:
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(11, 6, 40, 40)];
[imageView setBackgroundColor:kBackgroundGreyColour];
[cell.contentView addSubview:imageView];
However, instead of creating a custom subview in each table cell I would rather like to use the existing imageView property of the generic UITableViewCell class and modify it somehow to show the square as the code above does. This is what I am trying at this moment:
UIImageView* iv = [[UIImageView alloc] initWithFrame:CGRectMake(11, 6, 40, 40)];
[iv setBackgroundColor:[UIColor redColor]];
self.imageView.hidden = NO;
self.imageView.opaque = iv.opaque;
self.imageView.alpha = iv.alpha;
self.imageView.image = iv.image;
[self bringSubviewToFront:self.imageView];
[self.imageView setBackgroundColor:[UIColor redColor]];
I added all those lines to set as many of the existing UIImageView properties to the same values as the created UIImageView instance in the first code snippet, and yet the second code snippet doesn't show any dark square. It just doesn't show anything at all and the cell looks like there is just the light background and no image view visible. But I see that the imageView property is not nil so executing all those lines of code in the second snippet should show something?
However, as soon as I assign a new image to the imageView property (e.g. self.imageView.image = [[UIImage alloc] init...], the square shows the assigned image without problems.
Edit: Just a note that in the second case I am setting the frame of the imageView in layoutSubview function, e.g.:
-(void)layoutSubviews
{
[super layoutSubviews];
self.imageView.frame = CGRectMake(11, 6, 40, 40);
}
So my questions are:
1. Which properties of the existing imageView property I would need to set and to what values so that the code will show a square filled with a specific color (like the first snippet of code does)?
Is there a way of creating the UIImage programatically so that it shows only a background color without any image associated with it (and which I could use to set the imageView.image property to show that color).
Is it possible to replace the existing imageView property in a UITableViewCell class with a custom view without adding a custom subview (like the first code snippet did), so that I can show a placeholder UIView with a background color when the image is not available?
The reason why your code doesn't work, is as you guessed; Because when you set the background colour of an imageview, it doesn't create anything on the image property.
And, you've figured out that you can't directly set the imageview property of the cell either.
I'd say your best bet, is the former option; To create a UIImage programmatically.
Although, I'd highly suggest simply creating one in your favourite image editing software then including it in the bundle. It makes for easy replacement later, for when you may get a better image, and next to no code and effort required to replace.
But if you still wish to do it all programmatically, it's not as simple as you'd hope.
CGRect rect = CGRectMake(11, 6, 40, 40);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [kBackgroundGreyColour CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.imageview.image = image;
Should do the trick.
This defines the image size, creates a graphics context (think of it as a canvas), picks your grey colour to use, paints the canvas with it, then scans it into your computer into the small little size you wanted.
The little green imp does it all behind the screen (Sorry, too much Terry Pratchett).

Resources