Issue with subviews overlapping

Question

I'm trying to create a custom view which containes several images. I do that by adding them programmatically. The problem is that those subviews overlap each other and I can't find the way to change that. The only solution I can see is doing something like setting frames for each new image programmatically. I would be grateful if someone could tell me what is the best way to solve this issue.

for (id image in self.images) {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    [self.imageViews addObject:imageView];
    [self addSubview:imageView];
}

How you want to collect them?Like a few image in one image or do you wanna like something UICollectionView? — Gürhan KODALAK, Jun 09 '15 at 13:05
You need to [define a frame][1] for each UIImageView or use [constraints][2] to layout them. [1]: http://stackoverflow.com/questions/19442142/changing-the-position-of-uiview [2]: http://stackoverflow.com/questions/12826878/creating-layout-constraints-programmatically — Shai, Jun 09 '15 at 13:07
Yeah, as @grhnkdlk said U can show them as cells in UICollectionView. Maybe it is the best way to do this. It gives all the flexibility of layout and U can adjust margins, images count, handle swipes and so on. But if U need a simple way to add just a couple of images to the custom View, perhaps several images, that may exist or maybe not depending on some condition: 1) Set frames and maybe autosizing mask (but be ready for possible troubles with layout if orientation changes) 2) Or set the autolayout constraints and don't use frames at all — David, Jun 09 '15 at 13:14

score 3 · Answer 1 · answered Jun 09 '15 at 13:20

If you wanna make your customView like UICollectionView you need a UIScrollView and add your subviews in it. Everytime when you add a subview change frame location so it could be something like this:

int xPosition = 0;
int yPosition =0;
for (id image in self.images) {

    if (xPosition>self.view.frame.size.width) {
        //give size to every imageView and every time in loop change the location
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xPosition, yPosition, 50, 50)];
        imageView.image = image;
        yPosition = yPosition + 50;
        [self.view addSubView:imageView];
    }
    else {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xPosition, yPosition, 50, 50)];
        imageView.image = image;
        xPosition = xPosition + 50;
        [self.view addSubView:imageView];

    }


}

Thank you so much for this answer! – AOY Jun 09 '15 at 13:23 — AOY, Jun 09 '15 at 13:23

score 2 · Accepted Answer · edited Jun 09 '15 at 13:11

2

Without using Interface Builder your only real options are to change the frame or the center.

imageView.frame = CGRectMake(x coord, y coord, width, height);

This method lets you resize and move whereas changing the center lets you do just that, move the center of the view.

or

imageView.center = CGPointMake(x coord, y coord);

Or as recommended add constraints.

edited Jun 09 '15 at 13:11

Sandeep Agrawal

425
3
10

answered Jun 09 '15 at 13:07

Brandon Shega

769
4
17

Issue with subviews overlapping

2 Answers2