-1

I have a matrix of integers with values 1 or 0. I want do display an element on the view for positions in matrix that have values 1 using UIImage view. I am working in Xcode 8 and Swift 3. I did this with HTML (using radio buttons) but in Swift I really have no idea.

I want something like this:

How I want to display my Matrix

Rob
  • 415,655
  • 72
  • 787
  • 1,044
Djina Glusac
  • 1
  • 1
  • Isn't this what you're looking for? https://stackoverflow.com/questions/30958427/pixel-array-to-uiimage-in-swift – Ole EH Dufour May 13 '18 at 14:36
  • No, this is one UI image and I need to build UImage for every element. Thank you – Djina Glusac May 13 '18 at 15:02
  • You’d go ahead and layout your grid of `UIImageView` views. Then where your matrix has `1`, set that image view’s `image` property to the circle image, otherwise set it to `nil`. Is your question how to create the circle image? How to layout the `UIImageView` in a grid? Etc. What precisely is the question? Right now, this question feels too broad... – Rob May 13 '18 at 15:19
  • Thank you for information, my question now is... I can choose the size of the grid and based on that number create a grid and UImage-s I am not sure how to do that. I am really sorry but I am new at working with XCode and Swift. – Djina Glusac May 13 '18 at 15:46
  • Yep. The simple approach is the nested stack view approach outlined by Bence, below. If the grid could be exceedingly large (e.g. a grid of 10,000 imageviews, 100 across and 100 down) where you can't reasonably have that many views in your view hierarchy without adverse memory impact, then a collection view might make more sense. But if you're talking about something small (e.g. 4 x 4), then don't complicate it and just use the nested stack view approach. – Rob May 13 '18 at 23:03
  • Did you see my sample code? – Bence Pattogato May 14 '18 at 09:34
  • @BencePattogato I did thank you I just stared working with Swift I need a little bit time understand this. I will take this and make it happened. This is a part of my theses so I need to understand every line of the code thats why I need to understand the code before using it. Thank you again very much you saved my life. – Djina Glusac May 14 '18 at 23:57

1 Answers1

0

You can store the data like this:

let data: [Int: [Int]]

Then you can iterate on it, checking if they are 0s or 1s and depending on the result you can build the View something like this:

  1. Create 1 horizontal stack view
  2. Create a number of vertical stack views equal to the columns
  3. While enumerating on the data, for each vertical stack view add an empty view if data == 0 or an image view if data == 1 with a fixed size
  4. When one "column" is ready add it to the horizontal stack view
  5. Show the horizontal stack view on the screen

If you play a little with stackviews, it will be an easy task :)

Example code DO REFACTOR!!

class MatrixView: UIView {
    private let data: [[Int]]

    init(frame: CGRect, data: [[Int]]) {
        self.data = data
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        backgroundColor = .yellow
        layoutMatrix()
    }

    private func layoutMatrix() {
        let dataLenght = data.count
        let dataHeight  = data[0].count
        let horizontalStackView = UIStackView(frame: bounds)
        horizontalStackView.axis = .horizontal

        let imageViewWidth = frame.width / CGFloat(dataHeight)
        let imageViewHeight = frame.height / CGFloat(dataLenght)
        let imageViewRect = CGRect(x: 0, y: 0, width: imageViewWidth, height: imageViewHeight)

        for i in 0..<dataLenght {
            let verticalStackView = UIStackView()
            verticalStackView.axis = .vertical
            verticalStackView.widthAnchor.constraint(equalToConstant: imageViewWidth).isActive = true
            verticalStackView.heightAnchor.constraint(equalToConstant: frame.height).isActive = true
            for j in 0..<dataHeight {
                let viewToInsert: UIView
                if data[i][j] == 1 {
                    let image = UIImageView(image: #imageLiteral(resourceName: "icon.png"))
                    image.widthAnchor.constraint(equalToConstant: imageViewWidth).isActive = true
                    image.heightAnchor.constraint(equalToConstant: imageViewHeight).isActive = true
                    viewToInsert = image
                } else {
                    let empty = UIView(frame: imageViewRect)
                    empty.backgroundColor = .white
                    empty.widthAnchor.constraint(equalToConstant: imageViewWidth).isActive = true
                    empty.heightAnchor.constraint(equalToConstant: imageViewHeight).isActive = true
                    viewToInsert = empty
                }
                verticalStackView.addArrangedSubview(viewToInsert)
            }
            horizontalStackView.addArrangedSubview(verticalStackView)
        }

        addSubview(horizontalStackView)
    }
}
Bence Pattogato
  • 3,752
  • 22
  • 30