I have a UIViewController that acts as a Container View Controller. It has a UIScrollView that has the same width as the screen, but it's height is smaller than the height of the screen.
The UIScrollView contains the views of two other UIViewControllers and those views can be horizontally scrolled through.
I set my contentSize like this:
scrollView.contentSize.width = self.view.bounds.width * 2
This works and allows me to scroll through my UIViewController views horizontally.
The following is how I add the UIViewController views to my scrollView:
private func addPanel(viewController: UIViewController, panel: Panel) {
let xOffset: CGFloat!
switch panel {
case .left:
xOffset = 0.0
case .right:
xOffset = self.view.bounds.width
}
let panelView = UIView(frame: CGRect(x: xOffset, y: 0, width: self.view.bounds.width, height: self.scrollView.bounds.height))
scrollView.addSubview(panelView)
let panelViewController: UIViewController! = viewController
var viewBounds = view.bounds
viewBounds.height = panelView.bounds.height
panelViewController.view.frame = view.bounds
panelView.addSubview(panelViewController.view)
addChildViewController(panelViewController)
panelViewController.didMove(toParentViewController: self)
}
For some reason, the UIViewController views don't resize to fit the height of the UIScrollView.
Should I be doing it constraint based? How would I do this. I've been struggling with this for a few days and am at a loss.
Essentially, the UIViewController views will just like like full screen views offset and so you can't see the bottom of the views because the bottom of the screen cuts them off.
I'm just taking a guess without knowing all the code, but one reason could be if you're adding the child view controllers before the scrollview has been layouted.
After you add and set the child views sizes, the scrollview adjusts its size to the phone size but you never update the child views.
My suggestion here would be to add the child view controllers to the scrollview, but move the frame setting code into a layouting method where you know your views have the correct(visible) frames/bounds.
Given you are writing this in a view controller, one method could be -viewDidLayoutSubviews
Hope this makes sense, feel free to ask more questions if it doesn't.
Related
I have a trouble with loading view controller from xib
I have a xib file which contains a view controller and a subview inside it as the image below. Notice that I'm using iPhone 11 Pro Max in xib (which have screen width = 414)
The subview has 8 leading and trailing to its parent.
The problem is when i run the app on iPhone 12 Pro Max (which have screen width = 428), I check values of screen size and the subview size and it returns strange values. Here is my code:
public override func viewDidLoad() {
super.viewDidLoad()
print(view.frame) // (0.0, 0.0, 414.0, 896.0)
print(collageView.frame) // (8.0, 210.0, 398.0, 398.0)
}
public override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
print(view.frame) // (0.0, 0.0, 428.0, 926.0) updated
print(collageView.frame) // (8.0, 210.0, 398.0, 398.0) ??
let width = collageView.frame.width
let height = collageView.frame.height
let frames = self.frames?(CGSize(width: width, height: height)) ?? []
for i in 0..<frames.count {
let componentView = CropComponentView(frame: frames[i])
componentView.image = images[i]
collageView.addSubview(componentView)
}
}
My questions are:
How can we get the properly screen size inside viewDidLoad ? why the subview's frame doesn't update like screen size does ?
How can we get the properly screen size inside viewDidLoad ?
The sort answer is you can not get the final view(of the viewController) size in the viewDidLoad() because the view is just loaded from the xib and has the placeholder frames that was set in the xib. It needs to be added to the view hierarchy(e.g. to a parent view / window) in order for then the layout rules to be applied. The view will be added right after the view has been loaded.
The width/height that will be available for your controller is decided by the container controller(if any) and the device orientation and status bar state. For example if your controller is added in a tabbarcontroller it will have less vertical space if the tabbar is showing. If the statusbar is displayed and you have an incoming phone call the size of the status bar will change leaving less vertical space. If you display you controller in a SplitViewController container then it will have less width etc.
If you make the assumption that it will take the whole screen size you can calculate the frame in the viewDidLoad():
override func viewDidLoad() {
//...
var screenSize = UIScreen.main.bounds
var collageViewFrame: CGSize = self.collageView.frame.sizeThatFits(screenSize)
}
why the subview's frame doesn't update like screen size does ?
From the documentation for -viewDidLayoutSubviews :
However, this method being called does not indicate that the
individual layouts of the view's subviews have been adjusted.
If you need the correct frame you need to call layoutIfNeeded method in that subview.
Se also this answer.
I am trying to position UITableView to the left side of the app, whole height but taking just 1 / 3 of the available width with the code like this:
class ViewController: UIViewController {
var tableController: UITableViewController?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
tableController = UITableViewController();
addChildViewController(tableController!)
self.view.addSubview(tableController!.view)
tableController!.didMove(toParentViewController: self)
}
override func viewDidLayoutSubviews() {
tableController!.view.backgroundColor = UIColor.red
tableController!.view.frame = CGRect(
x: 0,
y: 0,
width: view.bounds.width / 3,
height: view.bounds.height);
//tableController!.view.frame = view.bounds
}
}
And it looks like this:
And I don't get why the lines are not correctly aligned horizontally and it looks like being cut on the right.
If I give the view controller full width / height by uncommenting the last line, it looks better:
Question 1
Are you properly constraining the TableView in the parent view? You can set proportional constraints. Please see this post on the topic: AutoLayout to keep view sizes proportional
Side Note
For iOS 11, constraining views to layout guides will trigger warnings in your IDE. Consider embedding UI components inside another view that takes up the entire width of the parent view using Auto-resizing Masks. See the topic here: Xcode Auto Layout Resizing Issue
I have been trying this for quite sometime now and went through a lot of posts on SO and some video tutorials. What I want to create is a horizontal scroll view with some buttons in it, like this:
My view hierarchy is as follows:
View Controller
View
Scroll View
View
Buttons
I have set top, leading, trailing, bottom constraints to the scroll view. I have set it's width equal to it's superview, and have set it's height to 200. So far so good, for the view inside the scroll view, I have set it's constraints leading, trailing, top and bottom to zero with respect to it's superview i.e. scroll view. I have made it's width equals to the View controllers view, since that was the solution here on SO to the ambiguous width issue. It solved the issue. Now I added all the buttons and set up their constraints to their parent view. Now when I run the app, a screen like the above added screenshot appears, however I cant scroll to the last element.Any help is greatly appretiated.
It's so simple.
Take a scrollView(Draw top left bottom right and hight constraint)
Take a UIView which will act like as a container View.(Draw top left bottom right constraint with scrollView).
Make your View Controller 1000px so that you can make your scrollView bigger and easy to watch.later on you can minimize it.
Now keep your button inside of it. keep in mind that, Every button will have top leading width , height and trailing if necessary. Width & height is important for scrollView because how big it will be depends on it.
Pictures worth a thousand word.
here is my hierarchy
And here is the Storyboard layout design.White background is basically containerView.
And here is the output.I have given some color for better understanding.
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var btnBack: UIButton!
#IBOutlet weak var btnForward: UIButton!
let headerView = UIView()
headerView.backgroundColor = UIColor.white
for i in 0..<selectedRestaurant.multipleImages.count {
let url = selectedRestaurant.multipleImages[i]
let imgView = UIImageView()
imgView.frame = CGRect(x: CGFloat(i) * self.view.frame.size.width, y: 0, width: self.view.frame.size.width, height: scrollView.frame.size.height)
let task = URLSession.shared.dataTask(with: URL(string: url as! String)!, completionHandler: { (data, response, error) in
if error == nil {
if data != nil {
imgView.contentMode = UIViewContentMode.scaleAspectFill
imgView.image = UIImage(data: data!)
}
}
})
scrollView.addSubview(imgView)
scrollView.contentSize = CGSize(width: self.view.frame.size.width * CGFloat(selectedRestaurant.multipleImages.count), height: scrollView.frame.size.height)
write code in btn back clicked <<<<
let index = Int(scrollView.contentOffset.x/self.view.frame.size.width) - 1
print("\(index)")
if index >= 0 {
scrollView.setContentOffset(CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0), animated: true)
}
write code in btn next clicked >>>>>
let index = Int(scrollView.contentOffset.x/self.view.frame.size.width) + 1
print("\(index)")
if index < (selectedRestaurant.multipleImages.count) {
scrollView.setContentOffset(CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0), animated: true)
}
For swift 5.1
firstly put scrollView give constraint to superView. Make them all what you desire.
Then put view on scroll view like I showed in pic. Give constraint shown below then to avoid error follow 3. step.
https://i.stack.imgur.com/MwzVN.png
Push control button and drag to the view then select Equal Height.
https://i.stack.imgur.com/91yzl.png
I give name to view over scrollview which name is ContentView . Be sure view size form is freeform and make width 1200 same as ContentView.
https://i.stack.imgur.com/jqo0v.png
https://i.stack.imgur.com/ntW4p.png
5)Then put TableView over the ContentView and give all the constraint zero.
https://i.stack.imgur.com/JPbXH.png
This is my TableviewCell
https://i.stack.imgur.com/4Fxwk.png
And this one is the result.
https://i.stack.imgur.com/zxBAT.gif
I have to view: view_1 and view_2 . view_1 height is proportional to the main view controller height and I am adding view_2 programmatically as a subview of view_1 with a proportional height.
Problem
when the device size changes say from iPhone 6 to iPhone 5, the view_1 adjust correctly but its height I am passing to a function to draw its subview view_2 is still what was set in interface builder and so it is out of bounds in iPhone 4 moving from iPhone 6
Thus I want to know how can I get the correct size of a view that what resize automatically to fit the current device?
The size of the view isn't established until Auto Layout runs. Your first opportunity to get the correct size is in viewDidLayoutSubviews:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// access view size here
}
Here's a complete example that adds a second view as a subview of the first view. The red view was added in the Storyboard; it is centered horizontally and vertically and it's height/width is 50% of its superview.
The yellow view is added programmatically. It's frame is computed from the frame of the red view to be 50% of the width of the red view.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var view1: UIView!
var view2: UIView?
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if view2 == nil {
view2 = UIView()
view2?.backgroundColor = .yellowColor()
view1.addSubview(view2!)
}
let width = view1.frame.size.width
let height = view1.frame.size.height
let frame = CGRect(x: width * 0.25, y: height * 0.25, width: width * 0.5, height: height * 0.5)
view2?.frame = frame
}
}
Not that viewDidLayoutSubviews gets called multiple times, so you must take care not to add view2 every time it is called. That is why the code checks to see if view2 has been added.
Try this,you can find the screen size of device.
let screenSize: CGRect = UIScreen.mainScreen().bounds
let screenWidth = screenSize.width
let screenHeight = screenSize.height
Try to do this in Viewdidload
First you need to set view one frame
view_1.frame = CGRectMake(0 , 0, self.view.frame.width, self.view.frame.height)
then set frame of view_2
view_2.frame = CGRectMake(0 , 0, view_1.frame.width, view_1.frame.height)
I made more than one view without taking new Controller class , I used UIgestureRecognizer but it not look better.
I want to swipe same like ios device, when we start to swipe from left side corner.
You can implement this with scrollview.
Steps:
1)First place a scrollview that fills the full screen.
2)Next create a container view which is as big as to hold your two views.
let containerSize = CGSize(width: 640.0, height: 640.0)
containerView = UIView(frame: CGRect(origin: CGPoint(x: 0, y: 0),size:containerSize))
scrollView.addSubview(containerView)
3) Now you create your view 1 , view2 and add them to container view.
4) Set the scrollview content size to container size
scrollView.contentSize = containerSize;
5) Then set the scrollview delegate method
func viewForZoomingInScrollView(scrollView: UIScrollView!) -> UIView!{
return containerView
}