分割图像数组并将其排列在UIView

时间:2016-02-09 22:23:42

标签: arrays swift uiview

我正在尝试在UIView上的数组中动态排列图像数据集我想要每个角色4个,最大角色是12个,每个角色4个。这就是问题所在,我可以拆分数组并将图像均匀地放在每个人都应该的位置。例如:

12张图片

  ======|=====|======|======|
        |     |      |      |
        |     |      |      |
  ======|=====|======|======|
        |     |      |      |
        |     |      |      |
  ======|=====|======|======|
        |     |      |      |
        |     |      |      |
  |=====|=====|======|======|

我知道如何排列图像,但是然后拆分数组就是问题所在。如果我在阵列中有7个图像,顶部为4,底部为3或10,则为4,4,2。我不知道如何去做。这就是为什么我没有粘贴任何代码的原因。任何有关拆分和排列阵列的帮助都将受到赞赏。感谢

2 个答案:

答案 0 :(得分:1)

将值存储在单个数组中并将数组用作2D结构的数据源是相当常见的。您可以根据项目的索引以及结构的宽度和高度来获取X和Y位置。

// number of images across the view
let width = 4;

// number of images down the view
let height = 3;

// index of the image in the array
let index = 10;

// index of the space from the left
// starting with 0
let xLocation = index % width; // 2

// index of the space from the top
// starting with 0
let yLocation = index / width; // 2

将值作为元组返回的函数如下所示。您需要做的就是迭代您的数组,它将根据提供的信息返回项目的位置。

func getPosition(width:Int, index:Int) -> (Int,Int) {
  return (index % width, index / width);
}

编辑:代码澄清

答案 1 :(得分:0)

所以,这就是我所做的。我编写了一个扩展Array的函数来均匀地分割我的数组

 extension Array {
func splitBy(subSize: Int) -> [[Element]] {
    return 0.stride(to: self.count, by: subSize).map { startIndex in
        let endIndex = startIndex.advancedBy(subSize, limit: self.count)
        return Array(self[startIndex ..< endIndex])
    }
}
}

然后,我用这个

显示了一些图像
 private func setGridView(gridCell: ProfileGrid, indexPath: NSIndexPath) {//140813008
    let (location, photoCount, images) = dummyGrid[indexPath.row]
    gridCell.imageCount.text = photoCount
    gridCell.location.text = location
    if images.count > 0 && images.count <= 4 {
        for index in 0..<images.count {
            let dedicatedWidth = self.view.frame.size.width/4 - 8
            let imageView = UIImageView(frame: CGRect(x: (dedicatedWidth + 2) * CGFloat(index), y: 0, width: CGFloat(dedicatedWidth - 2), height: 80))
            imageView.image = UIImage(named: images[index])
            imageView.layer.cornerRadius = 5
            imageView.clipsToBounds = true
            gridCell.imageHolder.addSubview(imageView)
        }
    } else if images.count > 4 && images.count <= 8 {
        let split = images.splitBy(4)
        let firstSplit = split[0]
        let secondSplit = split[1]

        for index in 0..<firstSplit.count {
            let dedicatedWidth = self.view.frame.size.width/4 - 8
            let imageView = UIImageView(frame: CGRect(x: (dedicatedWidth + 2) * CGFloat(index), y: 0, width: CGFloat(dedicatedWidth - 2), height: 80))
            imageView.image = UIImage(named: firstSplit[index])
            imageView.layer.cornerRadius = 5
            imageView.clipsToBounds = true
            gridCell.imageHolder.addSubview(imageView)
        }

        for jDex in 0..<secondSplit.count {
            let dedicatedWidth = self.view.frame.size.width/4 - 8
            let imageView = UIImageView(frame: CGRect(x: (dedicatedWidth + 2) * CGFloat(jDex), y: 82, width: CGFloat(dedicatedWidth - 2), height: 80))
            imageView.image = UIImage(named: secondSplit[jDex])
            imageView.layer.cornerRadius = 5
            imageView.clipsToBounds = true
            gridCell.imageHolder.addSubview(imageView)
        }
    } else if images.count > 8 {
        let split = images.splitBy(4)
        let firstSplit = split[0]
        let secondSplit = split[1]
        let thirdSplit = split[2]

        for index in 0..<firstSplit.count {
            let dedicatedWidth = self.view.frame.size.width/4 - 8
            let imageView = UIImageView(frame: CGRect(x: (dedicatedWidth + 2) * CGFloat(index), y: 0, width: CGFloat(dedicatedWidth - 2), height: 80))
            imageView.image = UIImage(named: firstSplit[index])
            imageView.layer.cornerRadius = 5
            imageView.clipsToBounds = true
            gridCell.imageHolder.addSubview(imageView)
        }

        for jDex in 0..<secondSplit.count {
            let dedicatedWidth = self.view.frame.size.width/4 - 8
            let imageView = UIImageView(frame: CGRect(x: (dedicatedWidth + 2) * CGFloat(jDex), y: 82, width: CGFloat(dedicatedWidth - 2), height: 80))
            imageView.image = UIImage(named: secondSplit[jDex])
            imageView.layer.cornerRadius = 5
            imageView.clipsToBounds = true
            gridCell.imageHolder.addSubview(imageView)
        }

        for tDex in 0..<thirdSplit.count {
            let dedicatedWidth = self.view.frame.size.width/4 - 8
            let imageView = UIImageView(frame: CGRect(x: (dedicatedWidth + 2) * CGFloat(tDex), y: 164, width: CGFloat(dedicatedWidth - 2), height: 80))
            imageView.image = UIImage(named: thirdSplit[tDex])
            imageView.layer.cornerRadius = 5
            imageView.clipsToBounds = true
            gridCell.imageHolder.addSubview(imageView)
        }
    }
}

The Achievement

如果你做得更好,我不介意。我的代码太大了,有点不专业。想法