How i can zoom array of images? Now i can zoom image as a .gif
My code:
class ScrollImageViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var scrollImage: UIScrollView!
private var imageView: UIImageView!
var imagesArray = [String]()
override func viewDidLoad() {
super.viewDidLoad()
self.scrollImage.minimumZoomScale = 1.0
self.scrollImage.maximumZoomScale = 5.0
for i in 0..<imagesArray.count {
imageView = UIImageView()
imageView.sd_setImage(with: URL(string: imagesArray[i]))
imageView.contentMode = .scaleAspectFit
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: self.scrollImage.frame.width, height: self.scrollImage.frame.height)
scrollImage.contentSize.width = scrollImage.frame.width * CGFloat(i + 1)
scrollImage.addSubview(imageView)
}
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}
}
I tried lesson from raywenderlich, but they did not help me :(
I want to get result like a AirBnB or example:
Scrolling once and zoom in, zoom out, scrolling twice - zoom in, zoom out and so on
You can check below framework
https://github.com/zvonicek/ImageSlideshow
It has a FullScreenSlideshowViewControllerclass which can be used for your purpose, also it can be customised.
Related
I'm having a relatively simple UIViewController with a UIScrollView that's taking relatively half the screen and a UIImageView placed inside the UIScrollView that's the exact same size as the UIScrollView.
On top of the UIImageView there's a UIPageControl. The point is have a horizontal scrolling and present an image like a slider based on the amount of images in an array. The problem is that the scroll view is not scrolling and I don't know why.
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var pageControl: UIPageControl!
let imagelist = ["3.jpg", "1.jpg", "2.png", "4.png", "5.png"]
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
configurePageControl()
for i in stride(from: 0, to: imagelist.count, by: 1) {
var frame = CGRect.zero
frame.origin.x = self.scrollView.frame.size.width * CGFloat(i)
frame.origin.y = 0
frame.size = self.scrollView.frame.size
scrollView.isPagingEnabled = true
scrollView.isScrollEnabled = true
let myImage:UIImage = UIImage(named: imagelist[i])!
let bgColorFromImage = myImage.averageColor
imageView.image = myImage
imageView.contentMode = UIViewContentMode.scaleAspectFit
imageView.frame = frame
scrollView.backgroundColor = bgColorFromImage
scrollView.addSubview(imageView)
}
self.scrollView.contentSize = CGSize(width: self.scrollView.frame.size.width * CGFloat(imagelist.count), height: self.scrollView.frame.size.height)
pageControl.addTarget(self, action: #selector(changePage), for: UIControlEvents.valueChanged)
}
func configurePageControl() {
self.pageControl.numberOfPages = imagelist.count
self.pageControl.currentPage = 0
self.pageControl.tintColor = UIColor.red
self.pageControl.pageIndicatorTintColor = UIColor.black
self.pageControl.currentPageIndicatorTintColor = UIColor.green
self.imageView.addSubview(pageControl)
}
#objc func changePage() {
let x = CGFloat(pageControl.currentPage) * scrollView.frame.size.width
scrollView.setContentOffset(CGPoint(x: x,y :0), animated: true)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
pageControl.currentPage = Int(pageNumber)
}
This is what the UIStoryboard looks like:
Inside the for loop you use the same object of imageView , you only set the frame and the image
imageView.frame = frame
imageView.image = myImage
but you have to create a new instance of the UIImageView
//
Suppose you have a scrollView in IB with top , leading and trailing constraints to the superView , and a height of say 200 , you can add imageViews dynamically like this
class ViewController: UIViewController {
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
for i in 0..<10 {
let f = CGRect(x: CGFloat(i) * scrollView.frame.width, y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
let imgV = UIImageView(frame: f)
imgV.image = UIImage(named: "re-fuel.png")
scrollView.addSubview(imgV)
}
scrollView.contentSize = CGSize(width: CGFloat(10) * scrollView.frame.width, height: scrollView.frame.height)
}
}
Result
The problem is that the scroll view itself is positioned with autolayout. Once you do that, you cannot set the contentSize to make the scroll view scrollable. You must use internal constraints to configure the content size.
I've been struggling with this for quite some time now. I'd like to make image cropper similar to the one included in iOS itself when you select your wallpaper. Basically I want the area that user selects cropped from the image with zoom and aspect ratio of the screen (so the user can use the image as a wallpaper later on). Like this:
https://gfycat.com/TornMaleAlligatorsnappingturtle
I've managed to create the interface with UIScrollView and UIImageView:
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
var scrollView: UIScrollView!
var imageView: UIImageView!
var croppedImage: UIImage?
#IBOutlet weak var cropButton: UIButton! {
didSet{
cropButton.backgroundColor = UIColor.gray
}
}
override func viewDidLoad() {
super.viewDidLoad()
let image = UIImage(named: "mountains")!
imageView = UIImageView(image: image)
imageView.frame = CGRect(origin: CGPoint(x: 0, y: 0), size:image.size)
imageView.contentMode = .scaleAspectFill
scrollView = UIScrollView(frame: view.bounds)
scrollView.backgroundColor = UIColor.black
scrollView.contentSize = imageView.bounds.size
scrollView.delegate = self
setZoomScale()
//centerScrollViewContents()
scrollView.addSubview(imageView)
view.addSubview(scrollView)
view.bringSubview(toFront: cropButton)
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}
#IBAction func crop(_ sender: UIButton) {
let rect = CGRect(x: ?, y: ?, width: ?, height: ?)
let croppedCGImage = imageView.image?.cgImage?.cropping(to: rect)
self.croppedImage = UIImage(cgImage: croppedCGImage!)
}
func setZoomScale() {
let imageViewSize = imageView.bounds.size
let scrollViewSize = scrollView.bounds.size
//let widthScale = scrollViewSize.width / imageViewSize.width
let heightScale = scrollViewSize.height / imageViewSize.height
scrollView.minimumZoomScale = heightScale //min(widthScale, heightScale)
scrollView.maximumZoomScale = 3
scrollView.zoomScale = heightScale
print(heightScale)
}
}.
I can zoom and pan around the image no problem. The problem is I don't know how to create the CGRect rectangle that represents the area that is displayed to the user, which is also the area I want to crop from the original image. Any ideas that will put me out of my misery are greatly appreciated!
snapshotImageFromMyView is the output image
self.btn.isHidden = true
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
UIGraphicsBeginImageContextWithOptions(self.YourView.bounds.size, self.YourView.isOpaque, 0.0)
self.YourView.drawHierarchy(in: self.YourView.bounds, afterScreenUpdates: false)
let snapshotImageFromMyView = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}
I have a ScrollView with an ImageView inside.
Here a user can select a point on the image and it will print out the coordinates.
I'm also trying to add an image ("pin") to the tapped coordinate but am unsure how to...
// MARK: - Outlets
#IBOutlet weak var containerView: UIView!
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var sharkImage: UIImageView!
// MARK: - View Did Load
override func viewDidLoad() {
super.viewDidLoad()
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 6.0
scrollView.delegate = self
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(tapAction))
self.sharkImage.isUserInteractionEnabled = true
self.sharkImage.addGestureRecognizer(tapGestureRecognizer)
}
// MARK: - Scroll View
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return sharkImage
}
// MARK: - Functions
func tapAction(sender: UITapGestureRecognizer) {
// Get points for the UIImageView
let touchPoint = sender.location(in: self.sharkImage)
print(touchPoint)
// Get points from the image itself
let z1 = touchPoint.x * (sharkImage.image?.size.width)! / sharkImage.frame.width
let z2 = touchPoint.y * (sharkImage.image?.size.height)! / sharkImage.frame.height
print("Touched point (\(z1), \(z2)")
}
In your tapAction:
let pin = UIImageView(frame: CGRect(x: touchPoint.x - 20, y: touchPoint.y - 20, width: 40, height: 40))
pin.image = UIImage(named: "pin")
sharkImage.addSubview(pin)
So what I´m doing is adding a new UIImageView with the x and y from touchPoint.x and touchPoint.y into your current sharkImage.
How should I use UIpageControl from UIScrollView? I am stuck, help me out.
Here is my code please help;
class home: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var mainScrollView: UIScrollView!
#IBOutlet weak var pagecontrol: UIPageControl!
var imageArray = [UIImage]()
var pageControl : UIPageControl!
override func viewDidLoad() {
super.viewDidLoad()
mainScrollView.delegate = self
imageArray = [#imageLiteral(resourceName: "sliderImage"), #imageLiteral(resourceName: "clothing"), #imageLiteral(resourceName: "sports")]
for i in 0..<imageArray.count{
let imageView = UIImageView()
imageView.image = imageArray[i]
imageView .contentMode = .scaleToFill
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height)
mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1)
mainScrollView.addSubview(imageView)
}
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
Check out this answer
Things have been pretty much the same over these years:
Set your UIScrollView delegate to your view controller (which you did);
Add code for scrollViewDidScroll delegate method:
func scrollViewDidScroll(_ scrollView: UIScrollView)
{
self.pageControl.currentPage = Int(floorf(Float(scrollView.contentOffset.x / scrollView.width)))
}
Add the same in scrollViewDidEndDecelerating method:
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView)
{
self.pageControl.currentPage = Int(floorf(Float(scrollView.contentOffset.x / scrollView.width)))
}
Although, it depends on your needs - try how it works with and without each of them.
I have created and initialized a scrollview that pulls from an array of images. So a user swipes past a photo, then another, and I need to delete the image based on the location of the current image I have created a for loop that deletes the image i-- in the array, but this crashes because I can't delete the i. Is there a way I can accomplish this? Thank you: here is my code
class ViewController: UIViewController {
var imageArray = [UIImage]()
#IBOutlet weak var mainScrollView: UIScrollView!
func scrollViewDidScroll(_ scrollView: UIScrollView) {
for i in 0..<imageArray.count {
if i >= 3 {
imageArray.remove(at: i - 2)
}
}
}
override func viewDidLoad() {
super.viewDidLoad()
mainScrollView.frame = view.frame
imageArray = [#imageLiteral(resourceName: "dubai6"), #imageLiteral(resourceName: "dubai2"), #imageLiteral(resourceName: "dubai7"), #imageLiteral(resourceName: "dubai4"), #imageLiteral(resourceName: "dubai3"), #imageLiteral(resourceName: "dubai5"), #imageLiteral(resourceName: "DigitalDrawingPreview"), #imageLiteral(resourceName: "denarus"), #imageLiteral(resourceName: "dubai1")]
for i in 0..<imageArray.count {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.image = imageArray[i]
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: self.view.frame.width, height: self.mainScrollView.frame.height)
mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1)
mainScrollView.addSubview(imageView)
}
Rather than using a UIScrollView, I would recommend using a UITableView or UICollectionView. It is very easy to manage the data model and then call table.reloadData().
You would track the scroll position with the ScrollViewDelegate method scrollViewDidScroll(_ scrollView) and force a reload once you've scrolled far enough.