Align multiple views vertically - ios

I've to make something that looks like these:
I have a NSArray of walking and car objects.
Car class has a NSString property which contains these numbers.
How can I do this ? Thanks.

You could create UIImageViews and UILabels programatically and line them up in a cell/view whatever.

You could create a UIView as a container, with an UIImageView on the left and a UITextView on the right. This would be the template for the car object. Your walking object would just need a simple UIImageView. Then calculate the point you want the first UIImage to start at and add the next container at the end of the previous element. you could also create a template of your arrow, this way you just would need to connect the elements like you want. It should look like this
CGFloat fHeightImage = 20.0f;
UIView *view =
[[UIView alloc] initWithFrame:CGRectMake(0, 0,
[UIScreen mainScreen].bounds.size.width,
fHeightImage)];
UIImageView *imageViewCar =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 0,
fHeightImage,
fHeightImage)];
[imageViewCar setImage:[UIImage imageNamed:#"walking"]];
[view addSubview:imageViewCar];
UIImageView *imageViewArrow =
[[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(imageViewCar.frame),
CGRectGetHeight(imageViewCar.frame),
fHeightImage,
fHeightImage)];
[imageViewArrow setImage:[UIImage imageNamed:#"arrow"]];
[view addSubview:imageViewArrow];

Related

Create multiple UIImageViews programmatically

I want to create multiple UIImageViews programmatically with different tags and add them as subview of my main view.
I have a property of my UIImageView in header:
#property (strong, nonatomic) UIImageView *grassImage;
then i'm trying to create multiple views:
for (int i=0;i<13;i++){
grassImage = [[UIImageView alloc] init];
int randNum = arc4random() % 320; //create random number for x position.
[grassImage setFrame:CGRectMake(randNum, 200.0, 50.0, 25.0)];
[grassImage setTag:i+100];
[grassImage setImage:[UIImage imageNamed:#"grass"]];
[self.view addSubview:grassImage];
}
But when I'm trying to access this image views using tag, I'm getting only last tag - 112.
My question - how I can access this views correctly, using their tag?
Similar questions:
Add a multiple buttons to a view programmatically, call the same method, determine which button it was
You are only getting the last one because you are recreating the same view all the time.
Get rid of that variable, and add your views like this:
for (int i=0;i<13;i++){
UIImageView *grassImage = [[UIImageView alloc] init];
int randNum = arc4random() % 320; //create random number for x position.
[grassImage setFrame:CGRectMake(randNum, 200.0, 50.0, 25.0)];
[grassImage setTag:i+100];
[grassImage setImage:[UIImage imageNamed:#"grass"]];
[self.view addSubview:grassImage];
}
And to get the views:
UIImageView *imgView = [self.view viewWithTag:110];
Since you are re-creating the same image again and again, if you access grassImage it will give you the last imageview you created. Instead you can get the imageview like this.
for (UIImageView *imgView in self.view.subviews) {
if ([imgView isKindOfClass:[UIImageView class]]) {
NSLog(#"imageview with tag %d found", imgView.tag);
}
}
Use this code for getting subview with a particular tag,
UIImageView *imgViewRef = (UIImageView *)[self.view viewWithTag:TAG_NUMBER];

Adding a UIImageView as a subview of UILabel, image not appearing

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.

How to change the image within a UIImageView inside an iOS app?

I have a UIImageView object that I instantiate and turn into a property inside my iOS app. I initialize the attributes for this UIImageView object inside my viewDidLoad method, however, I need to change the image that is contained inside the UIImageView object later on in another method. When I do this, I for some reason am simply superimposing the new image over top of the old one. What I would like to do is simply resize the frame, and replace the old image with the new one.
Here is the relevant code:
Inside my viewDidLoad method:
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 250, 300, 200)];
imageView.image = [UIImage imageNamed:#"firstImage.png"];
[self.view addSubview:imageView];
and inside my method where I wish to make the changes:
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 250, 200, 300)];
imageView.image = [UIImage imageNamed:#"secondImage.png"];
[self.view addSubview:imageView];
Please bear in mind that I don't want to just change the image, but also the frame size to accommodate the new image. Can anyone see what I am doing wrong?
You are creating another instance of imageview. You need to access the same object and change frame and image there.
Try this,
Create imageView as property in the class as,
In .h file,
#property(nonatomic, retain) UIImageView *imageView;
Then in viewDidLoad,
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 250, 300, 200)];
self.imageView.image = [UIImage imageNamed:#"firstImage.png"];
[self.view addSubview:imageView];
The in second method, just change the frame and image as shown below,
self.imageView.frame = CGRectMake(10, 250, 200, 300);
self.imageView.image = [UIImage imageNamed:#"secondImage.png"];
As per you code, you were creating separate instances for imageViews and adding as subviews which will cause it to superimpose on another one. Instead you need to create a single instance as shown above and modify its frame and image properties whenever required.

UIImageView shows outside its parents frame

I'm developing a iOs app for iPad and I'm implementing a UIImageView inside a UIView. The problem is that if the position of the image view has a position out of the UIView that it is inside, you can see it. The code:
UIView *vistafunda = [[UIView alloc] initWithFrame:CGRectMake(512/2, 48, 525, 651)];
[self.view addSubview:vistafunda];
vistafunda.backgroundColor = [UIColor darkGrayColor];
UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"hola.png"]];
img.center = CGPointMake(12, 200);
[vistafunda addSubview:img];
I would like that the image view was always under the view, so if the image is outside the view you could not see it.
Thanks!
Just make the containing view clip it's children
vistafunda.clipsToBounds = YES;

Place an UIImageView behind the tableView in a UITableViewController Subclass

I am trying to place a UIImageView behind a the tableView in a view controller that is a subclass of UITableViewController. I have gotten the following code to sort of work, but the image scrolls with the rows in the table.
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
[backgroundView setImage:[UIImage imageNamed:#"woodbackground1"]];
[self.view addSubview:backgroundView];
[self.view sendSubviewToBack:backgroundView];
[self.tableView setBackgroundColor:[UIColor clearColor]];
I tried the suggestions in this post
Add UIView behind UITableView in UITableViewController code but they produce the same result, am image that across with the table.
Is there a way to place the image view behind the tableview so that the image does not move with the table?
Thanks,
Dan
Why not use
self.tableView.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background"]];

Resources