AllPO AllPO - 6 months ago 67
Swift Question

How to make Images clickable in a UIPageViewController?

i am creating a uipage controller which it swipes 4 pages , in each page it has an image from the array i created , now i want to make each image from the swipe view clickable and head it through a new page , that i don't know how !! each image from the swipe view leads to a new page which has 10 levels (buttons), each image has its own 10 levels.

This is my code in ViewController:

private var pageViewController: UIPageViewController?

private let contentImages = ["Pack_1.png",
"Pack_2.png",
"Pack_3.png",
"nature_pic_4.png"];

override func viewDidLoad() {
super.viewDidLoad()
createPageViewController()
setupPageControl()
}

private func createPageViewController() {

let pageController = self.storyboard!.instantiateViewControllerWithIdentifier("PageController") as! UIPageViewController
pageController.dataSource = self

if contentImages.count > 0 {
let firstController = getItemController(0)!
let startingViewControllers: NSArray = [firstController]
pageController.setViewControllers(startingViewControllers as? [UIViewController], direction: UIPageViewControllerNavigationDirection.Forward, animated: false, completion: nil)
}

pageViewController = pageController
addChildViewController(pageViewController!)
self.view.addSubview(pageViewController!.view)
pageViewController!.didMoveToParentViewController(self)
}

private func setupPageControl() {
let appearance = UIPageControl.appearance()
appearance.pageIndicatorTintColor = UIColor.grayColor()
appearance.currentPageIndicatorTintColor = UIColor.whiteColor()
appearance.backgroundColor = UIColor.darkGrayColor()
}


func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {

let itemController = viewController as! PageItemController

if itemController.itemIndex > 0 {
return getItemController(itemController.itemIndex-1)
}

return nil
}

func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {

let itemController = viewController as! PageItemController

if itemController.itemIndex+1 < contentImages.count {
return getItemController(itemController.itemIndex+1)
}

return nil
}

private func getItemController(itemIndex: Int) -> PageItemController? {

if itemIndex < contentImages.count {
let pageItemController = self.storyboard!.instantiateViewControllerWithIdentifier("ItemController") as! PageItemController
pageItemController.itemIndex = itemIndex
pageItemController.imageName = contentImages[itemIndex]
return pageItemController
}

return nil
}
}


and this code is in my pageItemController:

var itemIndex: Int = 0
var imageName: String = "" {

didSet {

if let imageView = contentImageView {
imageView.image = UIImage(named: imageName)
}

}
}

@IBOutlet var contentImageView: UIImageView?

override func viewDidLoad() {
super.viewDidLoad()
contentImageView!.image = UIImage(named: imageName)
self.view.backgroundColor = UIColor (red: 100, green: 100, blue: 100, alpha: 0)

}
}

Answer

As per this version of the quesion:

"I'm creating a UIPageControllerView that shows 4 images. is there any way to make this images clickable? each image should present a dedicate page. this is my code in viewController:"


SOLUTION:

Use UIGestureRecognizer.

1) Click on your Main.Storyboard.

2) Select UIGestureRecognizer.

enter image description here

3) Drag it on your Image of choice.

enter image description here

3.5) Use Cmd+Alt+Enter to open the Assistant Editor

4) Create an IBAction by Ctrl-dragging from your UITapGestureRecogniser to the Assistant Editor.

enter image description here

5) Put the code you want to perform in your IBAction.

@IBAction func presentDedicatedPage(sender: AnyObject) {

//code here, for example:

let itemController = viewController as! PageItemController

switch itemController.itemIndex {

    case 0:
    // present these 10 levels
    break

    case 1:
    //present these other 10 levels
    break

    case 2:
    //present these other 10 levels
    break

    case 3:
    //present these other 10 levels
    break

}
Comments