Question

我有一个图像视图“ V”和一个图像“ I”。我的任务是将“ V”放置在“ I”的右上角。就像下面的“半缝合”图像一样，该图像需要放置在主图像上。

我有一个“ ProductDetail”类，该类实现了“ UIPageViewController”以显示滑动图像。在“ UIPageViewController”类中，主图像的视图为“ contentImageView”，在ViewDidLoad（）中，我将contentImageView的图像设置为

contentImageView!.hnk_setImageFromURL( imageURL)

我尝试过NSLayoutConstraint(item: 'V', attribute: .trailing, relatedBy: .equal, toItem: 'I', attribute: .trailing, multiplier: 1, constant: 0)

但这对我不起作用。给我的“ V”图像视图（小图像）施加约束的正确方法是在“我”较大图像的右上角。

当前，我可以在较大imageView的右上角设置“ V”（较小图像），但我希望在较大的Image而不是较大的Image View上设置它。

Answer 1

执行此操作的几种方法---这是一种方法...

修改：略微修改了原始代码。它使用UIImageView扩展名，当图像视图设置为Aspect-Fit

时，该扩展名返回图像的实际帧。

假设您拥有一个用于保存“项目”图像的图像视图，我将其称为combinedImageView，它是正方形（比率1:1）。

您可能希望使用“覆盖层”的百分比/大小来获得所需的大小。

注意：您可以单击以下图像查看它们的实际大小。

extension UIImageView {
    var contentClippingRect: CGRect {
        guard let image = image else { return bounds }
        guard contentMode == .scaleAspectFit else { return bounds }
        guard image.size.width > 0 && image.size.height > 0 else { return bounds }

        let scale: CGFloat
        if image.size.width > image.size.height {
            scale = bounds.width / image.size.width
        } else {
            scale = bounds.height / image.size.height
        }

        let size = CGSize(width: image.size.width * scale, height: image.size.height * scale)
        let x = (bounds.width - size.width) / 2.0
        let y = (bounds.height - size.height) / 2.0

        return CGRect(x: x, y: y, width: size.width, height: size.height)
    }
}

class RedBandViewController: UIViewController {

    @IBOutlet var combinedImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // make sure imageView is set to Aspect-Fit
        combinedImageView.contentMode = .scaleAspectFit

        // make sure images are valid
        if let mainImage = UIImage(named: "ItemA"),
            let overlayImage = UIImage(named: "SemiStitched") {

            // set the "main" image
            combinedImageView.image = mainImage

            // instantiate new imageView
            let overlayImageView = UIImageView(image: overlayImage)

            // we'll use auto-layout
            overlayImageView.translatesAutoresizingMaskIntoConstraints = false

            // add the overlay imageView to the "combined" imageView
            combinedImageView.addSubview(overlayImageView)

            // get the frame of the aspect-fit image content
            let fitRect = combinedImageView.contentClippingRect

            NSLayoutConstraint.activate([

                // anchor overlayImageView to top / trailing
                overlayImageView.topAnchor.constraint(equalTo: combinedImageView.topAnchor, constant: fitRect.origin.y),
                overlayImageView.trailingAnchor.constraint(equalTo: combinedImageView.trailingAnchor, constant: (fitRect.origin.x + fitRect.size.width) - combinedImageView.frame.width),

                // constrain overlayImageView to 1/4 (25%) of the combinedImageView width
                // this will keep the "red banner" at a consistent size, regardless of image
                overlayImageView.widthAnchor.constraint(equalTo: combinedImageView.widthAnchor, multiplier: 0.25),

                // or, constrain overlayImageView to 1/4 (25%) of the width of the Apect-Fit image,
                // this will keep the "red banner" at a consistent *percentage* width of the scaled image 
                //overlayImageView.widthAnchor.constraint(equalToConstant: fitRect.size.width * 0.25),

                // and equal height to its own width
                overlayImageView.heightAnchor.constraint(equalTo: overlayImageView.widthAnchor, multiplier: 1.0),

                ])

        }
    }
}

SemiStitched.png（白色区域为Alpha）：

ItemA.png-400 x 400处的正方形图像：

ItemB.png-比229 x 345处的宽度高：

ItemC.png-比600 x 462处的高度宽：

结果：

将ImageView放在iOS中的另一张图像上

1 个答案: