I can't believe something this easy when I did not use auto-layout is this hard with auto-layout. I put everything in a contentView so that it's a simultaneous zoom for both views (ImageView and UIView). The UIView for drawing should be the same size as the UIImageView and not bigger. I have this hierarchy at the moment.
UIScrollView
- ContentView
-- UIView (For drawing eg, drawView)
-- UIImage (For showing a background image to draw on)
The drawView is a view on top of the imageView, the problem now is as following:
Users can draw out of bounds of the UIImageView. This should only be possible drawing on the imageView.
Drawings are under the UIImageView, while the drawView is on top.
Code:
var afbeelding: UIImage?
#IBOutlet var imageView: UIImageView!
#IBOutlet var drawView: DrawingCanvas!
#IBOutlet var contentView: UIView!
var dag: Dag?
#IBOutlet var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
drawView.dag = dag
if let afbeelding = afbeelding {
imageView.image = afbeelding
}
scrollView.panGestureRecognizer.minimumNumberOfTouches = 2
scrollView.panGestureRecognizer.maximumNumberOfTouches = 2
scrollView.minimumZoomScale = 0.2;
scrollView.zoomScale = 1.0;
scrollView.maximumZoomScale = 5.0
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return contentView
}
Images:
Could anyone steer me in the right direction?
I'm not very familiar with Interface Builder but for your layer order problem I'd try swapping them; perhaps the order in which they're shown is the order in which they're added.
As for drawing outside the bounds, you'd need to look at the documentation for DrawingCanvas but perhaps its clipsToBounds property will work?
Users can draw out of bounds of the UIImageView. This should only be possible drawing on the imageView.
It seems like your image view has its contentMode set to .scaleAspectFit, but has all 4 sides pinned to the superview. This means that the image view spans the entire contentView, but the image itself is smaller.
I think the easiest way around this is to get the frame of the actual image using AVMakeRect(aspectRatio:insideRect:), then adjusting drawView's frame.
let rect = AVMakeRect(aspectRatio: image.size, insideRect: imageView.frame)
/**
Instead of constraining `drawView`'s edges, use x, y, width, and height.
This makes setting them easier.
You'll need to connect your constraints via an #IBOutlet (see https://stackoverflow.com/a/40584432/14351818)
*/
drawViewLeftConstraint.constant = rect.origin.x
drawViewTopConstraint.constant = rect.origin.y
drawViewWidthConstraint.constant = rect.width
drawViewHeightConstraint.constant = rect.height
Drawings are under the UIImageView, while the drawView is on top.
Actually, the image view is on top. The order is lowest -> highest, so just switch them.
Related
I am building an application where I want to display a floor plan where the image is 2952x3600, larger than the size of my view controller. I want the user to be able to pan the image and zoom in and out, similar to how a map behaves in Mapview.
I was able to obtain the desired result programmatically with the below code. However, I want to be able to add buttons to the image and it will be easier to do in the storyboard. How can I accomplish the same result in the Storyboard?
class ViewController: UIViewController, UIScrollViewDelegate {
var scrollView: UIScrollView!
var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imageView = UIImageView(image: UIImage(named: "TorontoPATHNetworkMap_v.2018.08.pdf"))
scrollView = UIScrollView(frame: view.bounds)
scrollView.contentSize = imageView.bounds.size
scrollView.addSubview(imageView)
scrollView.delegate = self
scrollView.minimumZoomScale = 0.3
scrollView.maximumZoomScale = 5
view.addSubview(scrollView)
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}
}
If you want to add other UI elements (buttons, labels, subviews, etc) and have them scale and move when the scroll view content is zoomed, you have a couple options:
1) Add your buttons in code as subviews of the image view. They will move / size along with the image view.
2) If you'd find it easier to layout your buttons visually, you can do your layout in Storyboard / Interface Builder. In IB, though, you cannot add subviews to a UIImageView, so you will need to embed the image view and buttons in a "container" UIView. Then in your controller class return that container view from viewForZooming
Edit
Here's an example of setting up the views in Storyboard / IB: https://github.com/DonMag/PDFImagePanZoom
I would like to have a horizontal scroll layout which displays images. It works fine if setup 0, 0, 0 and 0 the constraints of the UIScrollView. The problem is exactly when I change the constraints to make margins surrounded the UIScrollView. This is what happens:
First image in the UIScrollView
Second image in the UIScrollView
Third image in the UIScrollView
As you can see, each time you scroll, more off-center the current page is.
I have tried to subtract trailing and leading constrains constants to the width of the scrollLayout, play with frames and bouds but without success.
If I run this example in a smaller display like iphone 5S, the problem is more pointed.
class ViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var pageController: UIPageControl!
#IBOutlet weak var scrollView: UIScrollView!
let imagesArray = ["b_1", "b_2", "b_3", "b_4", "b_5"]
override func viewDidLoad() {
super.viewDidLoad()
self.scrollView.isPagingEnabled = true
self.pageController.numberOfPages = imagesArray.count
self.pageController.pageIndicatorTintColor = UIColor.blue
self.pageController.currentPageIndicatorTintColor = UIColor.gray
for i in 0...imagesArray.count - 1{
let imageView = UIImageView()
imageView.contentMode = .scaleToFill
imageView.image = UIImage(named: self.imagesArray[i])
let xPos = CGFloat(i)*self.view.bounds.size.width
imageView.frame = CGRect(x: xPos, y: 0, width: view.frame.size.width, height: self.scrollView.frame.size.height )
self.scrollView.contentSize.width = view.frame.size.width*CGFloat(i+1)
self.scrollView.addSubview(imageView)
}
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let page = scrollView.contentOffset.x/scrollView.frame.width
self.pageController.currentPage = Int(page)
}
}
So, I would like to know how to always obtain the current image centered.
Thank you
EDITED with Rajesh results and view debug:
I would recommend using a UICollectionView in place of a UIScrollView - otherwise you will be building a lot of the basics from scratch. You can use a collection view that centers the images, make sure paging is enabled and you should get the interface you're looking for. Make sure to adopt / conform to the UICollectionViewDelegate & UICollectionViewDelegateFlowLayout protocols with your view controller & set those delegates on your collection view. Hope that helps! Best of luck.
I am trying to establish a shadow on all four sides of my UIView in my ViewController — which works perfectly fine until I add constraints to the UIView via Xcode. How can I make the shadow of the UIView display on all four sides with set constraints for all sides?
Essentially, what I've discovered is that whenever I apply constraints via Xcode to the UIView that I have set the shadow around, the shadow does not appear under all four sides of the UIView. Instead, it floats to the left, leaving the right and bottom sides completely without shadowing. This can be seen in the screenshots beneath.
https://imgur.com/a/bZgYPH8
class RegistrationViewController: UIViewController {
#IBOutlet weak var signUpView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
signUpView.clipsToBounds = true
signUpView.layer.cornerRadius = 20;
signUpView.layer.shadowPath = UIBezierPath(roundedRect: signUpView.bounds, cornerRadius: signUpView.layer.cornerRadius).cgPath
signUpView.layer.shouldRasterize = true
signUpView.layer.shadowColor = UIColor.black.cgColor
signUpView.layer.shadowOffset = .zero
signUpView.layer.shadowOpacity = 1
signUpView.layer.shadowRadius = 20
signUpView.layer.masksToBounds = false
// Do any additional setup after loading the view.
}
}
Why is this happening and how can I add constraints while keeping the desired result?
In viewDidLoad, your constraints have not taken affect yet. So when you create your UIBezierPath, the bounds are not updated to the auto-layout constraints. The bounds that are used are probably the ones in your .xib file.
Move your shadowMakingPath into viewDidLayoutSubviews
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubivews()
signUpView.layer.shadowPath = UIBezierPath(roundedRect: signUpView.bounds, cornerRadius: signUpView.layer.cornerRadius).cgPath
signUpView.layer.shouldRasterize = true
signUpView.layer.shadowColor = UIColor.black.cgColor
signUpView.layer.shadowOffset = .zero
signUpView.layer.shadowOpacity = 1
signUpView.layer.shadowRadius = 20
signUpView.layer.masksToBounds = false
}
More information .. Objective-C/Swift (iOS) When are the auto-constraints applied in the View/ViewController work flow?
I am trying to have a UIImageView (centered horizontally in the viewController) with a UISwitch inside of it.
When the UIswitch is turned to the ON position - a second UIImageView should appear to the left of the original UIImageView, while the constraints should make it so that both UIImageViews are centered horizontally.
thanks in advance
There are many ways to do this, but the easiest is to simply use a centered horizontal UIStackView that contains only a single imageView. When the switch is flipped add the second imageView to the stackView by calling insertArrangedSubview(:at:) and the stackView will take care of maintaining the centering and any requested spacing. Similarly when the switch is off just call removeArrangedSubview(:) and everything goes back into place.
If you are not on iOS 9 and don't have UIStackView you can just drag an IBOutlet to the view that you want to move's centerX constraint and add to its .constant property and animate layoutIfNeeded to have it slide to the right.
class ViewController: UIViewController{
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var imageViewCenterXConstraint: NSLayoutConstraint!
let padding = CGFloat(10)
#IBAction func tapButton(_ sender: Any) {
imageViewCenterXConstraint.constant = imageView.frame.size.width / 2 + padding
UIView.animate(withDuration: 0.25) { self.view.layoutIfNeeded()}
}
}
I'm trying to make a line graph drawn using a CGRect scrollable by the user. I've set its container view to be scrollable (i want a horizontal scroll so the line can extend past the screen), but it doesn't appear to be having any effect. Here's the code in my actual view controller:
#IBOutlet weak var containerView: UIScrollView!
#IBOutlet weak var graphView: GraphView!
override func viewDidLoad() {
super.viewDidLoad()
logWeightButton.enabled = false
logWeightField.delegate = self
logWeightField.keyboardType = .NumberPad
self.view.addSubview(containerView)
containerView.addSubview(graphView)
containerView.contentSize = graphView.rectDisplay.size
pageLoad()
}
and here's the code declaring the CGRect(within a UIView class)
override func drawRect(rect: CGRect) {
if dataPoints.count == 0 {
return
} else {
self.drawLine(dataPoints, rect: rect, xCoordinates: nil, color: UIColor.blackColor())
if xCoordinates.count != 0 {
self.drawLine(actualPoints, rect: rect, xCoordinates: xCoordinates, color: UIColor.redColor())
}
rectDisplay = rect
}
}
Figured out that I needed to turn off auto-layout in the storyboard file inspector - if it's not disabled, it can overwrite scroll views.
I also made sure to enable scroll with
containerView.scrollEnabled = true
and set the containerView frame to
self.view.frame
I don't have enough reputation to post an image, so here it is:
http://i.stack.imgur.com/ZOBJp.png
The graph now scrolls, but my whole display is a mess (I believe because of setting the container frame to the size of the view), so the cycle continues.
FINAL UPDATE:
Learned that the frame of the scroll view has to be smaller than its content for it to scroll (which is why setting it to the view frame worked - the width of the view was less than the width of the line graph), so I set my frame to
containerView.frame = CGRect(x: 43.0, y: 147.0, width: 300.0, height: 117.0)
And everything works now. Hope this is helpful for someone else!