How to place UIView on top of other UIView?

Question

Right now I have a collectionView for which each cell contains a horizontal stackView. The stackView gets populated with a series of UIViews (rectangles), one for each day of a month - each cell corresponds to a month. I fill the stack views like so:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if collectionView == self.collectionView {
            ...
            return cell
        } else if collectionView == self.timeline {
            let index = indexPath.row
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "MMM"
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: timelineMonthCellReuseIdentifier, for: indexPath) as! SNTimelineMonthViewCell
            let firstPost = posts.first?.timeStamp
            let month = Calendar.current.date(byAdding: .month, value: index, to: firstPost!)
            print(dateFormatter.string(from: month!),dateFormatter.string(from: firstPost!),"month diff")
            for post in posts {
                print(post.timeStamp, "month diff")
            }
            cell.monthLabel.text = dateFormatter.string(from: month!)
            cell.monthLabel.textAlignment = .center

            if let start = month?.startOfMonth(), let end = month?.endOfMonth(), let stackView = cell.dayTicks {
                var date = start
                while date <= end {
                    let line = UIView()
                    if posts.contains(where: { Calendar.current.isDate(date, inSameDayAs: $0.timeStamp) }) {
                        line.backgroundColor = UIColor(red:0.15, green:0.67, blue:0.93, alpha:1.0)
                        let tapGuesture = UITapGestureRecognizer(target: self, action:  #selector (self.tapBar (_:)))
                        line.isUserInteractionEnabled = true
                        line.addGestureRecognizer(tapGuesture)
                        self.dayTicks[date] = line
                    } else {
                        line.backgroundColor = UIColor.clear
                    }
                    stackView.addArrangedSubview(line)
                    date = Calendar.current.date(byAdding: .day, value: 1, to: date)!
                }
            }
            return cell
        } else {
            preconditionFailure("Unknown collection view!")
        }
    }

Then, when the user stops scrolling a different collection view, I want to add a subview called arrowView ontop of the dayTick (see how self.dayTicks gets populated with the subviews of the stackView above).

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let currentIndex = self.collectionView.contentOffset.x / self.collectionView.frame.size.width
        let post = posts[Int(currentIndex)]
        for (_,tick) in self.dayTicks {
            tick.subviews.forEach({ $0.removeFromSuperview() })
        }
        let day = Calendar.current.startOfDay(for: post.timeStamp)
        let tick = self.dayTicks[day]
        let arrow = UIImage(named:"Tracer Pin")
        let arrowView = UIImageView(image: arrow)
//        arrowView.clipsToBounds = false
        print((tick?.frame.origin)!,"tick origin")
//        arrowView.frame.origin = (tick?.frame.origin)!
//        arrowView.frame.size.width = 100
//        arrowView.frame.size.height = 100
        tick?.addSubview(arrowView)

    }

This kind of works and it looks like this:

The red rectangle is added but it appears to the right of the dayTick, and it appears as a long thin rectangle. In actuality, the Tracer Pin image referenced looks like this:

Thats at least where the red color comes from but as you can see its stretching it weird and clipping everything thats not in a rectangular UIView space.

Now note that I commented out the 4 lines that set the size and origin of the arrowView as well as setting clipToBounds to false. When I uncomment these lines - the arrowView simply doesn't show up at all so I must be doing this wrong. What I want is to show something like this:

How can I put it directly on top like that?

Answer 1

I ended up using CALayer - thanks to @ouni's suggestion For some reason the CALayer seemed to draw directly on top of the view whereas a subview didn't. One key was unchecking the "Clip to bounds box on the collectionView cell itself (as opposed to the subview) - so that I could draw the flared base of the arrow outside of the collection view cell:

My code looks like this:

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        if scrollView == self.collectionView {
            print("is collection view")
            print(scrollView,"collection view")
            let currentIndex = self.collectionView.contentOffset.x / self.collectionView.frame.size.width
            let post = posts[Int(currentIndex)]
            for (_,tick) in self.dayTicks {
                tick.layer.sublayers = nil
            }
            let day = Calendar.current.startOfDay(for: post.timeStamp)
            let tick = self.dayTicks[day]
            let arrowLayer = CAShapeLayer()
            let path = UIBezierPath()
            let start_x = (tick?.bounds.origin.x)!
            let start_y = (tick?.bounds.minY)!
            let top_width = (tick?.bounds.width)!
            let tick_height = (tick?.bounds.height)!
            let tip_height = CGFloat(10)
            let tip_flare = CGFloat(10)
            path.move(to: CGPoint(x: start_x, y: start_y))
            path.addLine(to: CGPoint(x: start_x + top_width,y: start_y))
            path.addLine(to: CGPoint(x: start_x + top_width,y: start_y + tick_height))
            path.addLine(to: CGPoint(x: start_x + top_width + tip_flare,y: start_y+tick_height+tip_height))
            path.addLine(to: CGPoint(x: start_x - tip_flare,y: start_y + tick_height + tip_height))
            path.addLine(to: CGPoint(x: start_x,y: start_y+tick_height))
            path.close()
            arrowLayer.path = path.cgPath
            arrowLayer.fillColor = UIColor(red:0.99, green:0.13, blue:0.25, alpha:1.0).cgColor
            tick?.layer.addSublayer(arrowLayer)         
        } else {
            print(scrollView, "timeline collection view")
        }


    }

This draws the arrow on top of the subview beautifully.

Answer 2

Another perspective might be to do this with CALayer. Here are some clues (cut from another project) to help you discover a solution:

@IBInspectable open var slideIndicatorThickness: CGFloat = 5.0 {
    didSet {
        if slideIndicator != nil { slideIndicator.removeFromSuperlayer() }
        let slideLayer = CALayer()
        let theOrigin = CGPoint(x: bounds.origin.x, y: bounds.origin.y)
        let theSize = CGSize(width: CGFloat(3.0), height: CGFloat(10.0)
        slideLayer.frame = CGRect(origin: theOrigin, size: theSize)
        slideLayer.backgroundColor = UIColor.orange.cgColor
        slideIndicator = slideLayer
        layer.addSublayer(slideIndicator)
    }
}

fileprivate var slideIndicator: CALayer!

fileprivate func updateIndicator() {
    // ..
    // Somehow figure out new frame, based on stack view's frame.
    slideIndicator.frame.origin.x = newOrigin
}

You may have to implement this on a subclass of UIStackView, or your own custom view that is a wrapper around UIStackView.

Answer 3

It looks like you have a fixed height on the arrowView. Could it be that the red triangle portion is under another view?

Debug View Hierarchy

Click the debug view hierarchy which is the second from right icon - it looks like 3 rectangles. Check to see if the whole image is there.