0

I have been given the task of creating a dynamic "ticket" in Swift. I am passed the ticket number, amount, etc from our servers API, and I am to generate the barcode, along with all labels associated with this ticket. I am able to generate all the necessary data without any issues.

The problem

The issue arises with laying it out. I need to have a thumbnail view for this ticket, along with a fullscreen view. This seems to be best done by converting the view into an image (right?) as it allows for features like zooming, having the thumbnail view etc. The main cause of the issue is the ticket labels and barcode need to be laid out vertically, or basically in landscape mode.

What I've tried

UIGraphicsBeginImageContext

I have created the image manually with UIGraphicsBeginImageContext() and associated APIs. This allows me to flip each view and convert it to an image. However, this method forces me to manually create a frame for each view and loses all accuracy and does not seem like the right way to do it when I have to add 10-15labels to a blank image.

AutoLayout

Next I tried laying everything out in a UIView with autolayout and applying a CGAffineTransform to each view and then converting the whole view to an image. This seems to work with the exception that I lose precision and can't line up views correctly. CGAffineTransform throws off constraints completely and I have to experiment with constraint constants until I get the view looking somewhat right and even then that doesn't translate all that well to all device sizes.

Landscape Mode

Lastly, I tried laying out the views normally, and forcing the view into landscape mode. Aside from the number of issues that arose because my app only supports portrait mode, I got it to work when the view is presented, but I have no idea how to get the thumbnail view which is supposed to show before the ticket view is presented to be in landscape mode. If I try doing so the thumbnail comes out in portrait mode and not landscape.

Do you guys have any ideas on a better way to accomplish this or should I stick to one of the methods that I've tried and try to work out all the bugs? I can provide code as needed but there's a lot that goes into it so I didn't want to just throw all the code in here if it wasn't necessary.

The following is an example of what I need to create except I need to add additional labels on there such as issue date, expiration date, etc:

enter image description here

Any help would be appreciated!

Community
  • 1
  • 1
Reza Takhti
  • 80
  • 5
  • I would look into nested `UIStackView`s. – koen Feb 21 '20 at 20:04
  • Also, please limit your post to one question. Your title is different from what you describe in the text. See also [ask], and if possible provide a [example] of what you have already tried. – koen Feb 21 '20 at 20:05
  • Converting to image doesn't seem to be an optimal strategy in your case. You can rotate like this https://stackoverflow.com/a/56355145/5329717 and resize/rescale the view(s) with custom frames , transforms etc. By converting to raster images you most likely will end up butchering the fonts. You have lots of means to do it programmatically in UIKit. – Kamil.S Feb 21 '20 at 21:33

1 Answers1

1

You asked:

What is the best way to rotate a view in swift and convert it to an image?

If you want to create a rotated snapshot of a view, apply a rotate and a translateBy to the context:

func clockwiseSnapshot(of subview: UIView) -> UIImage {
    var rect = subview.bounds
    swap(&rect.size.width, &rect.size.height)
    return UIGraphicsImageRenderer(bounds: rect).image { context in
        context.cgContext.rotate(by: .pi / 2)
        context.cgContext.translateBy(x: 0, y: -rect.width)
        subview.drawHierarchy(in: subview.bounds, afterScreenUpdates: true)
    }
}

Or

func counterClockwiseSnapshot(of subview: UIView) -> UIImage {
    var rect = subview.bounds
    swap(&rect.size.width, &rect.size.height)
    return UIGraphicsImageRenderer(bounds: rect).image { context in
        context.cgContext.rotate(by: -.pi / 2)
        context.cgContext.translateBy(x: -rect.height, y: 0)
        subview.drawHierarchy(in: subview.bounds, afterScreenUpdates: true)
    }
}

Obviously, if you want the Data associated with the image, instead, use pngData or jpegData instead:

func clockwiseSnapshotData(of subview: UIView) -> Data {
    var rect = subview.bounds
    swap(&rect.size.width, &rect.size.height)
    return UIGraphicsImageRenderer(bounds: rect).pngData { context in
        context.cgContext.rotate(by: .pi / 2)
        context.cgContext.translateBy(x: 0, y: -rect.width)
        subview.drawHierarchy(in: subview.bounds, afterScreenUpdates: true)
    }
}

Or

func counterClockwiseSnapshotData(of subview: UIView) -> Data {
    var rect = subview.bounds
    swap(&rect.size.width, &rect.size.height)
    return UIGraphicsImageRenderer(bounds: rect).pngData { context in
        context.cgContext.rotate(by: -.pi / 2)
        context.cgContext.translateBy(x: -rect.height, y: 0)
        subview.drawHierarchy(in: subview.bounds, afterScreenUpdates: true)
    }
}

If you don’t really need the image, but just want to rotate it in the UI, then apply a transform to the view that contains all of these subviews:

someView.transform = .init(rotationAngle: .pi / 2)
Rob
  • 415,655
  • 72
  • 787
  • 1,044