How to display multiple UIImageViews

问题

I have 5 images I would like to display on the view randomly. My image names are as follows: image-0, image-1, image-2, image-3, image-4.

What I need is I want to display each image, but the problem is when I write the code to display a second, it stacks on top of the first image. Here is my code to display one of my images:

    - (void)viewDidLoad
{
int xValue = arc4random() % 320;
int yValue = arc4random() % 480;
image.center = CGPointMake(xValue, yValue);


{UIImageView *imgFive = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image-5.png"]];
[self.view addSubview:imgFive];
    imgFive.center = CGPointMake(xValue, yValue);}

But if I add the same code but instead of "image-5.png" I use the other file names to try and display them, they stack on top of eachother. My images are circles, each varying size. So when I try and display all 5 I can see my circles have stacked on top of eachother from smallest to largest.

What do I need to do to separate these images from eachother? Do I need to put these images in an array and then loop through the array to display them how I would like?

Any help is appreciated, I am very new to coding so a simple explanation would be helpful in explaining why your code works.

Thanks again!

回答1:

Considering your requirement, and the general structure names provided to your images, i guess you need to just loop your logic .

for(int i=0;i<5;i++) {

    float xpos = arc4random() %320 ;
    float ypos = arc4random() %480 ;

    UIImage *image = 
     [UIImage imageNamed:[NSString stringWithFormat:@"image-%d.png",i]] ;

    UIImageView *imageView = 
     [[UIImageView alloc]initWithImage:image];

    imageView.center=CGPointMake(xpos, ypos);
    [self.view addSubview:imageView];          
}

回答2:

If you don't change the xValue and yValue of each UIImageView, their centers will be aligned and will appear stacked on top of each other.

回答3:

Your images are stacking because when you add an image via the method addSubview, it will stay until you remove the image with the method call removeFromSuperview. However, let's make this process a bit more robust.

First, in your Storyboard file, drag a UIImageView to your view. Set it's dimensions to your likieng. Then pressing on the Assistant Editor (the little tuxedo icon in the upper right hand side), it should open the corresponding .h file of the view controller you are editing. Take the UIImageView you have on your view, hold CTRL and drag over to your .h file

, give it a name like imageToDisplay

When you let go you should see code appear in your .h file that reads: @property (weak, nonatamoic) IBOutlet UIImageView *imageToDisplay;

Add one more property, this time a NSArray, and this time you don't need Storyboard:

@property (strong, nonatomic) NSArray *imageArray;

Now back in you .m file, in your viewDidLoad method, let's make an array of UIImages:

UIImage *image1 = [UIImage imageNamed:@"image-1.png"];
UIImage *image2 = [UIImage imageNamed:@"image-2.png"];
UIImage *image3 = [UIImage imageNamed:@"image-3.png"];
UIImage *image4 = [UIImage imageNamed:@"image-4.png"];
UIImage *image5 = [UIImage imageNamed:@"image-5.png"];

_imageArray = @[image1, image2, image3, image4, image5];

Now that we have our 5 images in our array, we can now pick a random image from the array and assign it to our UIImageView property which is wired up to our view. Also, let's make our _imageToDisplay alpha property equal 0.0 so that we can have more digretion with what image is displayed, and how it is displayed:

//Still in viewDidLoad
_imageToDisplay.alpha = 0.0;

We can also do fun things like animations and other things as such. Let's make a method to make this easy:

-(void)displayImageRandomlyOnView {

//First, let's pick a random image to display. We will do this by generating a random number based from the count of our imageArray

NSUInteger randomIndex = arc4random_uniform([_imageArray count]);

//Now let's pick the random image with the objectAtIndex method for NSArray's. We will assign this image to our _imageToDisplay's .image property.

_imageToDisplay.image = [_imageArray objectAtIndex:randomIndex];

//Now using your original code, we can randomly define the frame of our _imageToDisplay
int xValue = arc4random() % 320;
int yValue = arc4random() % 480;

_imageToDisplay.frame = CGRectMake(xValue, yValue, CGRectGetWidth(_imageToDisplay.frame), CGRectGetHeight(_imageToDisplay.frame));

//Now if you remember, our imageToDisplay 's value is still 0.0, so let's animate it to show our randomly chosen image and location.

    [UIView animateWithDuration:1.0 animations:^ {
        _imageToDisplay.alpha = 1.0;
    }];
}

This is how the code should appear in your .h file:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIImageView *imageToDisplay;
@property (strong, nonatomic) NSArray *imageArray;
@end

This is how all the code should appear in your .m file:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIImage *image1 = [UIImage imageNamed:@"image-1.png"];
    UIImage *image2 = [UIImage imageNamed:@"image-2.png"];
    UIImage *image3 = [UIImage imageNamed:@"image-3.png"];
    UIImage *image4 = [UIImage imageNamed:@"image-4.png"];
    UIImage *image5 = [UIImage imageNamed:@"image-5.png"];

    _imageArray = @[image1, image2, image3, image4, image5];
    _imageToDisplay.alpha = 0.0;
}

-(void)displayImageRandomlyOnView {

    //First, let's pick a random image to display. We will do this by generating a random number based from the count of our imageArray

    NSUInteger randomIndex = arc4random_uniform([_imageArray count]);

    //Now let's pick the random image with the objectAtIndex method for NSArray's. We will assign this image to our _imageToDisplay's .image property.

    _imageToDisplay.image = [_imageArray objectAtIndex:randomIndex];

    //Now using your original code, we can randomly define the frame of our _imageToDisplay
    int xValue = arc4random() % 320;
    int yValue = arc4random() % 480;

    _imageToDisplay.frame = CGRectMake(xValue, yValue, CGRectGetWidth(_imageToDisplay.frame), CGRectGetHeight(_imageToDisplay.frame));

    //Now if you remember, our imageToDisplay 's value is still 0.0, so let's animate it to show our randomly chosen image and location.

    [UIView animateWithDuration:1.0 animations:^ {
        _imageToDisplay.alpha = 1.0;
    }];
}

Now every time you run this method, you will have a randomly selected image be displayed, along with a random position. I would play with your random values to make sure that the image will stay in bounds of your view.

In addition, as a challenge, try to hook up this method to a UIButton in your view, and make it that every time you press the button, the method we made -(void)displayImageRandomlyOnView gets called and changes your image.

Let me know if you need any more clarification!

回答4:

You assign the xValue and yValue only once at the start of the method body, so assigning the same (x,y) coordinates to all circles will naturally make them stack on top of one another (on the z axis of course). You need to have different values for xValue and yValue each time you assign the center property on any one circle and, yes, looping is a good strategy for that.

A good start would be to use a for loop construct to iterate an int variable from 0 to 4, and in each iteration:

assigning new random values to both xValue and yValue
setting the center property accordingly of one of your imageviews accordingly

adding it as a subview of self.view

- (void) viewDidLoad {

    int xValue, yValue;
    NSString *imageName;
    UIImageView *image;
    for (int i=0; i<5; i++) {
        imageName = [NSString stringWithFormat:@"image-%d.png", i];
        image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
        xValue = arc4random() % 320;
        yValue = arc4random() % 480;
        image.center = CGPointMake(xValue, yValue);
        [self.view addSubview:image];
    }

}

回答5:

To specifically answer what you are asking (although the other answers do give you a lot of better ways to organize your code):

- (void)viewDidLoad {
float xValue = arc4random() % 320;
float yValue = arc4random() % 480;

UIImageView *imgOne = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image-1.png"]];
imgOne.center = CGPointMake(xValue, yValue);
[self.view addSubview:imgOne];

// re-randomize the location
xValue = arc4random() % 320;
yValue = arc4random() % 480;

UIImageView *imgTwo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image-2.png"]];
imgTwo.center = CGPointMake(xValue, yValue);
[self.view addSubview:imgTwo];
}

You need to make sure you generate new values for xValue and yValue each time you create a new image.

回答6:

 NSDictionary *picturesDictionary = [NSDictionary dictionaryWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"PhotesArray" ofType:@"plist"]];
NSArray *imageNames = [picturesDictionary objectForKey:@"Photos"];
NSMutableArray *images = [[NSMutableArray alloc] init];
for (int i=0; i<[imageNames count]; i++) {
    [images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
//Normal animation
self.dataImageView.animationImages = images;
self.dataImageView.animationDuration = 5.0;
[self.dataImageView startAnimating];

来源：https://stackoverflow.com/questions/19393085/how-to-display-multiple-uiimageviews

标签

ios

objective-c

image

uiimageview