如何显示多个UIImageViews

时间:2013-10-15 23:52:10

标签: ios objective-c image uiimageview

我想在视图中随机显示5张图片。我的图像名称如下:image-0,image-1,image-2,image-3,image-4。

我需要的是我想要显示每个图像,但问题是当我编写代码以显示第二个图像时,它会堆叠在第一个图像的顶部。这是我的代码显示我的一个图像:

    - (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);}

但是,如果我添加相同的代码,而不是“image-5.png”,我使用其他文件名来尝试显示它们,它们堆叠在彼此之上。我的图像是圆圈,每个都有不同的大小。因此,当我尝试显示所有5个时,我可以看到我的圆圈从最小到最大堆叠在彼此的顶部。

我需要做些什么才能将这些图像彼此分开?我是否需要将这些图像放在一个数组中然后遍历数组以显示它我想要的方式?

感谢任何帮助,我对编码非常陌生,所以一个简单的解释将有助于解释代码的工作原理。

再次感谢!

6 个答案:

答案 0 :(得分:1)

考虑到您的要求以及为图像提供的一般结构名称,我想您需要循环逻辑。

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];          
}

答案 1 :(得分:0)

如果不更改每个UIImageView的xValue和yValue,它们的中心将对齐并显示为堆叠在彼此之上。

答案 2 :(得分:0)

您只在方法正文的开头指定xValueyValue一次,因此为所有圆圈指定相同的(x,y)坐标自然会使它们叠加在一起(当然在z轴上)。每次在任何一个圆圈上分配中心属性时,您需要为xValueyValue设置不同的值,是的,循环是一个很好的策略。

一个好的开始是使用for循环结构将int变量从0迭代到4,并在每次迭代中进行:

  1. xValueyValue
  2. 分配新的随机值
  3. 相应地为您的某个图片视图设置center属性
  4. 将其添加为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];
        }
    
    }
    

答案 3 :(得分:0)

您的图片正在堆叠,因为当您通过方法addSubview添加图片时,图片会一直停留,直到您使用方法调用removeFromSuperview删除图片。但是,让我们使这个过程更加健壮。

首先,在Storyboard文件中,将UIImageView拖到视图中。根据您的喜好设定尺寸。然后按下Assistant Editor(右上角的小燕尾服图标),它应该打开您正在编辑的视图控制器的相应.h文件。在您的视图中使用UIImageView,按住CTRL并拖动到.h文件enter image description here,为其命名为imageToDisplay

当你放手时,你会看到.h文件中出现的代码如下: @property (weak, nonatamoic) IBOutlet UIImageView *imageToDisplay; enter image description here

再添加一个属性,这次是NSArray,这次你不需要Storyboard:

@property (strong, nonatomic) NSArray *imageArray;

现在回到.m文件中,在viewDidLoad方法中,让我们制作一个UIImage的数组:

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];

现在我们在数组中有5个图像,现在我们可以从数组中选择一个随机图像并将其分配给我们的UIImageView属性,该属性连接到我们的视图。 另外,让我们的_imageToDisplay alpha属性等于0.0,这样我们可以更多地了解显示的图像及其显示方式:

//Still in viewDidLoad
_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;
    }];
}

这就是代码在.h文件中的显示方式:

#import <UIKit/UIKit.h>

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

这就是所有代码应该出现在.m文件中的方式:

- (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;
    }];
}

现在,每次运行此方法时,都会显示随机选择的图像以及随机位置。我会使用您的随机值来确保图像将保持在您的视图范围内。

此外,作为挑战,请尝试将此方法与您视图中的UIButton相关联,并在每次按下按钮时将其设为-(void)displayImageRandomlyOnView,并调用此方法改变你的形象。

如果您需要进一步澄清,请与我们联系!

答案 4 :(得分:0)

要专门回答您的问题(尽管其他答案确实为您提供了许多更好的方法来组织代码):

- (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];
}

每次创建新图像时,都需要确保为xValue和yValue生成新值。

答案 5 :(得分:0)

 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];