I make a news feed where posts of users are displayed. In the posts can be from 1 to 10 pictures. And there can be no one at all. The task is to display these pictures in one or two rows (depending on the number). The conditions are such that if the pictures are not more than three, then they are displayed in one row. If more, then in the first row only two pictures, and in the second the rest. And in each row, the pictures should be the same in height, and the row itself should be the entire width of the screen. An example of how it will look below.

enter image description here

How do I do this? Do I need to somehow create an imageView from the code and take it into dimensions and set all the necessary parameters? Or is it possible to implement in the StoryBoard?

In android, I made this application and there I did this: I made two horizontal rows in the UI editor with ImageView. In the first row were 3 imageView, and in the second 8. All were deactivated (GONE), i.e. completely disabled and had a size of zero so to speak. When I had to, I included the right amount (for example, two in the first row and the rest in the second) and considered dimensions based on the width of the screen by my formula so that the sum of the width of the pictures was equal to the width of the screen and the height was the same based on the aspect ratio of each picture.

What method would you recommend for the implementation of this task under iOS? And explain the desired so that it is clear to a person who not so long ago began to learn swift.

Also ready to hear other options for a compact display of a group of pictures (for example, as in VKontakte)

    2 answers 2

    I advise you to use a UICollectionView for this. Here is a lesson on Swift. UICollectionView allows you to create a dynamic number of cells (pictures) without having to create many different UIImageView in the UI and then hide them.

    • Thank you so much. I will try. Can you tell me if I upload images to imageView directly from the url, this will not lead to a lack of memory? I upload pictures like this: var imgURL: NSURL = NSURL (string: " somewebsite.ru/image.jpg" )! var imgData: NSData = NSData (contentsOfURL: imgURL)! myLovelyImage.image = UIImage (data: imgData) - cheerful_weasel
    • It depends on many factors, of course, but it’s better to make a cache, for example, so that when scrolling you don’t download pictures every time and don’t waste traffic - Vitali Eller
    • thanks for the help! - cheerful_weasel

    You can also add dynamically. A simple example for your question:

     let imgCounter = 7 //количСство ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ let diffTypeCount = 3 //с ΠΊΠ°ΠΊΠΎΠ³ΠΎ количСства Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° 2 ряда let imagesInFirstRow = 2//количСство ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ряда Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС if imgCounter <= diffTypeCount { for i in 0..<imgCounter { let imgToDisplay = UIImage(named: "AM") //Π’Π°ΡˆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ let imgView = UIImageView(frame: CGRectMake(0 + CGFloat(i)*self.view.bounds.width/CGFloat(imgCounter), 0, self.view.bounds.width/CGFloat(imgCounter), self.view.bounds.width/CGFloat(imgCounter))) //Π€Ρ€Π΅ΠΉΠΌ ΡΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ Π½ΡƒΠΆΠ΄Ρ‹ imgView.image = imgToDisplay self.view.addSubview(imgView) } } else { for i in 0..<imagesInFirstRow { let imgToDisplay = UIImage(named: "AM") //Π’Π°ΡˆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ let imgView = UIImageView(frame: CGRectMake(0 + CGFloat(i)*self.view.bounds.width/CGFloat(imagesInFirstRow), 0, self.view.bounds.width/CGFloat(imagesInFirstRow), self.view.bounds.width/CGFloat(imagesInFirstRow))) //Π€Ρ€Π΅ΠΉΠΌ ΡΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ Π½ΡƒΠΆΠ΄Ρ‹ imgView.image = imgToDisplay self.view.addSubview(imgView) } for i in imagesInFirstRow..<imgCounter { let imgToDisplay = UIImage(named: "AM") //Π’Π°ΡˆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ let imgView = UIImageView(frame: CGRectMake(0 + CGFloat(i - imagesInFirstRow) * self.view.bounds.width/CGFloat(imgCounter - imagesInFirstRow), 0 + self.view.bounds.width/CGFloat(imagesInFirstRow), self.view.bounds.width/CGFloat(imgCounter - imagesInFirstRow), self.view.bounds.width/CGFloat(imgCounter - imagesInFirstRow))) //Π€Ρ€Π΅ΠΉΠΌ ΡΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ Π½ΡƒΠΆΠ΄Ρ‹ imgView.image = imgToDisplay self.view.addSubview(imgView) } }