UIScrollView paging layout on iPad and iPhone - ios

I am making an universal demo xcode project which is a UIScrollView contains two pages, scroll left and right to go back and forth.
My questions is iPad and iPhone's layout is not the same.
I created 3 view controllers in storyboard as below:
ViewController has the UIScrollView.
AViewController contains an UILabel in the center("Good morning...").
BViewController contains an UILabel in the center("Good night...").
The constraints of the UILabels are:
Here is the code of ViewController:
class ViewController: UIViewController {
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
let story = UIStoryboard(name: "Main", bundle: nil)
let vc1 = story.instantiateViewController(withIdentifier: "AViewController")
let vc2 = story.instantiateViewController(withIdentifier: "BViewController")
vc1.view.backgroundColor = UIColor.green
vc2.view.backgroundColor = UIColor.red
addContentView([vc1, vc2])
scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width * 2, height: scrollView.frame.height)
}
func addContentView(_ viewControllers: [UIViewController]) {
viewControllers.enumerated().forEach {
addChildViewController($1)
$1.view.frame = CGRect(x: UIScreen.main.bounds.width * CGFloat($0), y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
scrollView.addSubview($1.view)
didMove(toParentViewController: $1)
}
}
}
If I choose View as iPhone 8 then the layout works correct in iPhone 8 like this: (Swipe then from green to red)
But for iPad:
The labels are not centered!!.
If I choose View as iPad ... ,then for iPhone it doesn't layout correct.
Here is the view hierarchy, it's obvious the layout is correct but for some reason the green view is larger than screen size and covered by the red one.
Thanks for any help.
The code is here: https://github.com/williamhqs/TestLayout

The embedded view controller views have translatesAutoresizingMaskIntoConstraints = true by default which introduces bogus constraints:
Setting it to false will not let you just set the frame manually, so you will have to write the full layout. It's slightly more verbose, but autolayout will work for the embedded view controllers and you get rotation support as well:
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
let story = UIStoryboard(name: "Main", bundle: nil)
let vc1 = story.instantiateViewController(withIdentifier: "AViewController")
let vc2 = story.instantiateViewController(withIdentifier: "BViewController")
vc1.view.backgroundColor = UIColor.green
vc2.view.backgroundColor = UIColor.red
addContentView([vc1, vc2])
}
func addContentView(_ viewControllers: [UIViewController]) {
var previousController: UIViewController? = nil
viewControllers.forEach {
addChildViewController($0)
$0.view.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview($0.view)
$0.view.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
$0.view.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
if let trailing = previousController?.view.trailingAnchor {
$0.view.leadingAnchor.constraint(equalTo: trailing).isActive = true
} else {
$0.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
}
$0.view.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
$0.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
didMove(toParentViewController: self)
previousController = $0
}
previousController?.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
}
Scroll view works as expected for all devices, regardless of the Xcode View as setting:

Related

How to change label text of a label in a popover view controller when pressing a button in the main view?

I'm relatively new to Swift. I have a main view controller, ViewControllerMain, and a popover view controller, PopUpVC, which only has a label. I have a function, infoClicked that displays the popover with another function (showPopover) when the info button is clicked. When I click the button, I want to change the label text of the popover. However, with the current code, the label always displays "Default".
Here is my code:
class ViewControllerMain: UIViewController, UIPopoverPresentationControllerDelegate, GetTimesUsed {
let tipController: PopUpVC = PopUpVC().self
#IBAction func infoClicked(_ sender: UIButton) {
tipController.tipText = "Success"
showPopover()
}
func showPopover() {
let myViewController = storyboard?.instantiateViewController(withIdentifier: "popupController")
myViewController?.preferredContentSize = CGSize(width: 350, height: 200)
myViewController?.modalPresentationStyle = .popover
let popOver = myViewController?.popoverPresentationController
popOver?.delegate = self
UIView.animate(withDuration: 1, animations: {
self.GifView.alpha = 0.7
})
DispatchQueue.main.asyncAfter(deadline: .now() + 0.45) {
UIView.animate(withDuration: 0.5, animations: {
self.present(myViewController!, animated: true, completion: nil)
})
}
popOver?.permittedArrowDirections = .down
popOver?.sourceView = self.view
var passthroughViews: [AnyObject]?
passthroughViews = [infoButton]
myViewController?.popoverPresentationController?.passthroughViews = (NSMutableArray(array: passthroughViews!) as! [UIView])
popOver?.sourceRect = infoButton.frame
}
}
class PopUpVC: UIViewController {
#IBOutlet weak var tip: UILabel!
var tipText: String = "Default"
override func viewDidLoad() {
super.viewDidLoad()
tip.text = tipText
// Do any additional setup after loading the view.
}
}
Thank you for your help.
As mentioned in comments, you seem to be instantiating the popup controller 2 times, so try it like this in your showPopOver code:
let myViewController = storyboard?.instantiateViewController(withIdentifier: "popupController") as! PopUpVC
myViewController.preferredContentSize = CGSize(width: 350, height: 200)
myViewController.modalPresentationStyle = .popover
myViewController.tipText = '' //set to what ever

Best way to position UIToolbar programmatically (with or without UIToolbarDelegate)?

I'm implementing in Playgound a segmented control underneath the navigation bar.
This seems to be a classic problem, which has been asked:
UISegmentedControl below UINavigationbar in iOS 7
Add segmented control to navigation bar and keep title with buttons
In the doc of UIBarPositioningDelegate, it says,
The UINavigationBarDelegate, UISearchBarDelegate, and
UIToolbarDelegate protocols extend this protocol to allow for the
positioning of those bars on the screen.
And In the doc of UIBarPosition:
case top
Specifies that the bar is at the top of its containing view.
In the doc of UIToolbar.delegate:
You may not set the delegate when the toolbar is managed by a
navigation controller. The default value is nil.
My current solution is as below (the commented-out code are kept for reference and convenience):
import UIKit
import PlaygroundSupport
class ViewController : UIViewController, UIToolbarDelegate
{
let toolbar : UIToolbar = {
let ret = UIToolbar()
let segmented = UISegmentedControl(items: ["Good", "Bad"])
let barItem = UIBarButtonItem(customView: segmented)
ret.setItems([barItem], animated: false)
return ret
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(toolbar)
// toolbar.delegate = self
}
override func viewDidLayoutSubviews() {
toolbar.frame = CGRect(
x: 0,
y: navigationController?.navigationBar.frame.height ?? 0,
width: navigationController?.navigationBar.frame.width ?? 0,
height: 44
)
}
func position(for bar: UIBarPositioning) -> UIBarPosition {
return .topAttached
}
}
//class Toolbar : UIToolbar {
// override var barPosition: UIBarPosition {
// return .topAttached
// }
//}
let vc = ViewController()
vc.title = "Try"
vc.view.backgroundColor = .red
// Another way to add toolbar...
// let segmented = UISegmentedControl(items: ["Good", "Bad"])
// let barItem = UIBarButtonItem(customView: segmented)
// vc.toolbarItems = [barItem]
// Navigation Controller
let navVC = UINavigationController(navigationBarClass: UINavigationBar.self, toolbarClass: UIToolbar.self)
navVC.pushViewController(vc, animated: true)
navVC.preferredContentSize = CGSize(width: 375, height: 640)
// navVC.isToolbarHidden = false
// Page setup
PlaygroundPage.current.liveView = navVC
PlaygroundPage.current.needsIndefiniteExecution = true
As you can see, this doesn't use a UIToolbarDelegate.
How does a UIToolbarDelegate (providing the position(for:)) come into play in this situation? Since we can always position ourselves (either manually or using Auto Layout), what's the use case of a UIToolbarDelegate?
#Leo Natan's answer in the first question link above mentioned the UIToolbarDelegate, but it seems the toolbar is placed in Interface Builder.
Moreover, if we don't use UIToolbarDelegate here, why don't we just use a plain UIView instead of a UIToolbar?
Try this
UIView *containerVw = [[UIView alloc] initWithFrame:CGRectMake(0, 64, 320, 60)];
containerVw.backgroundColor = UIColorFromRGB(0xffffff);
[self.view addSubview:containerVw];
UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 124, 320, 1)];
bottomView.backgroundColor = [UIColor grayColor];
[self.view addSubview:bottomView];
UISegmentedControl *sg = [[UISegmentedControl alloc] initWithItems:#[#"Good", #"Bad"]];
sg.frame = CGRectMake(10, 10, 300, 40);
[view addSubview:sg];
for (UIView *view in self.navigationController.navigationBar.subviews) {
for (UIView *subView in view.subviews) {
[subView isKindOfClass:[UIImageView class]];
subView.hidden = YES;
}
}
By setting the toolbar's delegate and by having the delegate method return .top, you get the normal shadow at the bottom of the toolbar. If you also adjust the toolbars frame one point higher, it will cover the navbar's shadow and the final result will be what appears to be a taller navbar with a segmented control added.
class ViewController : UIViewController, UIToolbarDelegate
{
lazy var toolbar: UIToolbar = {
let ret = UIToolbar()
ret.delegate = self
let segmented = UISegmentedControl(items: ["Good", "Bad"])
let barItem = UIBarButtonItem(customView: segmented)
ret.setItems([barItem], animated: false)
return ret
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(toolbar)
toolbar.delegate = self
}
override func viewDidLayoutSubviews() {
toolbar.frame = CGRect(
x: 0,
y: navigationController?.navigationBar.frame.height - 1 ?? 0,
width: navigationController?.navigationBar.frame.width ?? 0,
height: toolbar.frame.height
)
}
func position(for bar: UIBarPositioning) -> UIBarPosition {
return .top
}
}
How does a UIToolbarDelegate (providing the position(for:)) come into play in this situation? Since we can always position ourselves (either manually or using Auto Layout), what's the use case of a UIToolbarDelegate?
I sincerely do not know how the UIToolbarDelegate comes into play, if you change the UINavigationController.toolbar it will crashes with "You cannot set UIToolbar delegate managed by the UINavigationController manually", moreover the same will happen if you try to change the toolbar's constraint or its translatesAutoresizingMaskIntoConstraints property.
Moreover, if we don't use UIToolbarDelegate here, why don't we just use a plain UIView instead of a UIToolbar?
It seems to be a reasonable question. I guess the answer for this is that you have a UIView subclass which already has the behaviour of UIToolbar, so why would we create another class-like UIToolbar, unless you just want some view below the navigation bar.
There are 2 options that I'm aware of.
1) Related to Move UINavigationController's toolbar to the top to lie underneath navigation bar
The first approach might help when you have to show the toolbar in other ViewControllers that are managed by your NavigationController.
You can subclass UINavigationController and change the Y-axis position of the toolbar when the value is set.
import UIKit
private var context = 0
class NavigationController: UINavigationController {
private var inToolbarFrameChange = false
var observerBag: [NSKeyValueObservation] = []
override func awakeFromNib() {
super.awakeFromNib()
self.inToolbarFrameChange = false
}
override func viewDidLoad() {
super.viewDidLoad()
observerBag.append(
toolbar.observe(\.center, options: .new) { toolbar, _ in
if !self.inToolbarFrameChange {
self.inToolbarFrameChange = true
toolbar.frame = CGRect(
x: 0,
y: self.navigationBar.frame.height + UIApplication.shared.statusBarFrame.height,
width: toolbar.frame.width,
height: toolbar.frame.height
)
self.inToolbarFrameChange = false
}
}
)
}
override func setToolbarHidden(_ hidden: Bool, animated: Bool) {
super.setToolbarHidden(hidden, animated: false)
var rectTB = self.toolbar.frame
rectTB = .zero
}
}
2) You can create your own UIToolbar and add it to view of the UIViewController. Then, you add the constraints to the leading, trailing and the top of the safe area.
import UIKit
final class ViewController: UIViewController {
private let toolbar = UIToolbar()
private let segmentedControl: UISegmentedControl = {
let control = UISegmentedControl(items: ["Op 1", "Op 2"])
control.isEnabled = false
return control
}()
override func loadView() {
super.loadView()
setupToolbar()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.navigationBar.hideBorderLine()
}
private func setupToolbar() {
let barItem = UIBarButtonItem(customView: segmentedControl)
toolbar.setItems([barItem], animated: false)
toolbar.isTranslucent = false
toolbar.isOpaque = false
view.addSubview(toolbar)
toolbar.translatesAutoresizingMaskIntoConstraints = false
toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
toolbar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
}
}
private extension UINavigationBar {
func showBorderLine() {
findBorderLine().isHidden = false
}
func hideBorderLine() {
findBorderLine().isHidden = true
}
private func findBorderLine() -> UIImageView! {
return self.subviews
.flatMap { $0.subviews }
.compactMap { $0 as? UIImageView }
.filter { $0.bounds.size.width == self.bounds.size.width }
.filter { $0.bounds.size.height <= 2 }
.first
}
}

Move image to other view with double tap

I am new to Swift and I am looking for a way to move my image to other view controller with double tap.
I made my image into scroll view, so I can slide to view it.
Here is my code.
class Quotes: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var scroll: UIScrollView!
let imageview = ["quotes1","quotes2","quotes3","quotes4"]
var imagine = UIImageView()
override func viewDidLoad() {
let tap = UITapGestureRecognizer(target: self, action: #selector(doubletap))
tap.numberOfTapsRequired = 2
view.addGestureRecognizer(tap)
self.navigationController?.setNavigationBarHidden(true, animated: true)
quotesimageload()
}
func quotesimageload() {
for index in 0 ... imageview.count - 1
{
imagine = UIImageView (frame:CGRect(x: self.scroll.frame.width * CGFloat(index), y: 0 , width: self.scroll.frame.width, height: self.scroll.frame.height))
imagine.image = UIImage(named : imageview[index])
imagine.tag = index
imagine.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.scroll.addSubview(imagine)
}
self.scroll.contentSize = CGSize(width: self.scroll.frame.width * CGFloat(imageview.count), height: self.scroll.frame.height)
}
func doubletap(){
let view = self.storyboard?.instantiateViewController(withIdentifier: "pinch")
self.navigationController?.pushViewController(view!, animated: true)
}
}
You don't exactly move the image to another view controller - you pass a copy of it to the target VC.
Set up a "var" UIImage in the secondVC (let's say you called it image) and before you push that VC into view, populate it from the first VC.
One more word of caution - naming a UIViewController as "view" can be very confusing, as many would think it's a UIView. So assuming you rename that to be pinchViewController, the full syntax would be:
Second VC:
var image:UIView!
First VC:
func doubletap(){
let pinchViewController = self.storyboard?.instantiateViewController(withIdentifier: "pinch")
pinchViewController.image = imagine.image
self.navigationController?.pushViewController(view!, animated: true)
}
And if you have things properly coded and/or wired up in IB, you should have you UIImageView in the second VC displaying the image.

ScrollView paging

I want to create the slide to unlock animation like it is there on the iPhone lock screen. I want the user to swipe right so that another view comes to the front. How should I make this? I have tried this, and here is my code:-
import UIKit
class PageViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setUpScrollView()
}
func setUpScrollView () {
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let aViewController = storyboard.instantiateViewControllerWithIdentifier("Hello") as! HelloViewController;
let bViewController = storyboard.instantiateViewControllerWithIdentifier("Home") as! HomeViewController;
let viewControllers = [bViewController, aViewController]
scrollView.pagingEnabled = true
scrollView.contentSize.height = 600
var contentSizeWidth = CGFloat(2) * self.view.frame.width
scrollView.contentSize.width = contentSizeWidth
scrollView.showsHorizontalScrollIndicator = false
scrollView.showsVerticalScrollIndicator = false
scrollView.scrollsToTop = false
scrollView.delegate = self
// add all views to scrollView
for (index, vc) in enumerate(viewControllers) {
var frame = self.view.frame
frame.origin.x = frame.width * CGFloat(index)
frame.origin.y = 0
vc.view.frame = frame
self.addChildViewController(vc)
self.scrollView.addSubview(vc.view)
vc.didMoveToParentViewController(self)
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
The problem that I face is, that the view on the left is cropped somehow. To make you visualise this, the view with the slide to unlock label appears when the iOS simulator boots up. But when I swipe right, the scrollView works perfectly, just the second view is cropped (it is on the extreme left, occupying less than half of the screen that it should ideally fully occupy. Please help me out here. Thanks in advance.

UIPageviewController inside a UIScrollView

I want to code a reader in swift.
I use a pageViewController for this. To enable ZoomIN/ZoomOut in use a UIscrollView, my idea is to put inside this scrollView the pageViewController.
Effectively, it works. But my problem is only in the position on screen, the pageview controller is cropped.
My code:
class RootViewController: UIViewController,
UIPageViewControllerDelegate,
UIPageViewControllerDataSource,
UIScrollViewDelegate
{
#IBOutlet weak var scrollView: UIScrollView!
var isLandscape:Bool = Bool()
var pageData:[String] = []
var pageViewController:UIPageViewController = UIPageViewController()
//MARK: ViewDid/Should methods
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
loadData() // Load the images URL
// Set up the pageViewController
pageViewController = UIPageViewController(transitionStyle: UIPageViewControllerTransitionStyle.PageCurl, navigationOrientation: UIPageViewControllerNavigationOrientation.Horizontal, options: nil)
pageViewController.delegate = self
pageViewController.dataSource = self
var startingViewController:DataViewController = self.viewControllerAtIndex(0) as DataViewController
var viewControllers = [startingViewController] as NSArray
pageViewController.setViewControllers(viewControllers, direction: UIPageViewControllerNavigationDirection.Forward, animated: false, completion: nil)
self.addChildViewController(pageViewController)
self.contentView.addSubview(pageViewController.view)
// Set the page view controller's bounds using an inset rect so that self's view is visible around the edges of the pages.
var pageViewRect:CGRect = self.view.bounds
pageViewRect = CGRectInset(pageViewRect, 10.0, 20.0)
self.view.frame = pageViewRect
self.pageViewController.didMoveToParentViewController(self)
scrollView.minimumZoomScale = 1
scrollView.maximumZoomScale = 2.5
scrollView.zoomScale = 1
scrollView.setZoomScale(1.0, animated:false)
}
}
func viewForZoomingInScrollView(scrollView:UIScrollView) -> UIView {
// Return the view that you want to zoom
return pageViewController.view
}
Screenshot:
Can somebody can help me to fix this.
Thanks.

Resources