I have a scrollview with paging. In this scroll view i load dynamically xibs. But the height of the xib should be the same as the scroll view. My problem is that the height of the xib is not loaded properly:
If I load a the xib file (which is almost fullscreen except on each border a constraint of 10) it isn't loaded properly because the height is too big.
So I have to make the constraint of bottom so that it fits into my scrollview:
Anyone got a solution?
Try to experiment with the code below. This general approach works for my project. Your problem is ambiguous definition for height property. Pay attention to find unnecessary constraints in your .xib.
#IBOutlet weak var yourCustomScrollView: UIScrollView!
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Firstly, define scrollview's position and size
yourCustomScrollView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
// Load .xib with custom class from main bundle.
guard let xib = Bundle.main.loadNibNamed("YourXibName", owner: self, options: nil)?.first as? YourCustomXibClass else {
fatalError("YourXibName is not found. 👎🏻")
}
self.yourCustomScrollView.addSubView(xib)
// Define .xib's position and size
xib.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
yourCustomScrollView.contentSize = CGSize(width: self.view.frame.width, height: xib.frame.height)
}
Related
I am trying to expand my view when tableViewCells are added to the tableview to scroll the whole view rather than the table, but my implementation of increasing the size of the tableView and the ScrollView isn't quite working, I'm not sure if it has something to do with the code or the constraints set. What sort of constraints would I have to set in story board to make this work?
This is what I've tried and it isn't expanding the scroll view:
#IBAction func addExercisePressed(_ sender: Any) {
test.append("nice")
tableView.isScrollEnabled = false
tableView.frame = CGRect(x: tableView.frame.origin.x, y: tableView.frame.origin.y, width: self.view.frame.size.width, height: CGFloat(tableView.visibleCells.count * 120))
scrollView.contentSize = CGSize(width: self.view.frame.size.width, height: tableView.frame.size.height)
tableView.reloadData()
}
tableView.visibleCells.count isn't the same as number of cells at some time , also you need to use auto-layout constraints by giving the table in IB a default height and hooking it as an IBOutlet then inside viewDidLayoutSubviews/viewDidAppear do
self.tableHeight.constant = numOcells * 120
self.view.layoutIfNeeded()
I want to try add a view form on scroll view but view don't fully added on scroll view's frame, my code is:
import UIKit
class AddIncomeVC: UIViewController {
#IBOutlet var scrollView: UIScrollView!
#IBOutlet var views: UIView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.contentSize = views.frame.size
scrollView.addSubview(views)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
views.frame = CGRect(x: 0, y: 0, width: scrollView.frame.size.width, height: scrollView.frame.size.height)
}
}
Thanks,
Edit line
views.frame = CGRect(x: 0, y: 0, width: scrollView.frame.size.width, height: scrollView.frame.size.height)
to
views.frame = CGRect(x: 0, y: 0, width: scrollView.contentSize.width, height: scrollView.contentSize.height)
I get solved my issue with this code:
import UIKit
class AddIncomeVC: UIViewController {
#IBOutlet var scrollView: UIScrollView!
#IBOutlet var views: UIView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.contentSize = views.frame.size
scrollView.addSubview(views)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
views.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
}
}
Thanks all for giving valuable time for my question.
The problem is: At view did load, your constraints are not updated to the new display sizes.
I believe that your problem occurs because you are running the app using a simulator with different size from your storyboard... a bigger size (storyboard using iPhone SE and running at iphone 6 simulator, for example).
At View did Load, your view already exists, its true... but its constraints still have iphone SE sizes.
So, at view did load you are setting the content size (that you want with an iphone6 screen size) equal to storyboard view size (that still an iphone SE screen size).
Your solution works well. After the iOS layout all subviews, the constraints are updated to the new screen sizes, maintaining its proportions.
At viewDidLayoutSubviews the "view" already have the correct constraint values... So, the view has iphone6 screen sizes, and you could set the frame with the right
I have a paging scrollview with two views, and the first one is to fill the UIScrollview and the second to stay in the middle. I don't know what's going wrong, but it wouldn't fill on iPhone6 but, it fits fine on iPhone5. Below is my code:
View Hierarchy
UIView
--StackView (Properties -- Axis(Vertical) Alignment(Fill) Distribution(Fill) Spacing(0))
--UIView (Fixed height. 60)
--UIView (Main Views Holder)
--ScrollView(Content Size: Screen Width * 2, Height: Height left between it margin to the MainView and BottomView) and I notice, that the scrollview keeps remaining size 433 on both iPhone5 and 6. And when I check my storyboard, that's the exact same height there
--UIView(Height: 102, Width: Screen Width)BottomView
#IBOutlet weak var scrollView: UIScrollView!
var rectanglePhot: UIView!
var squarePhoto: UIView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.contentSize = CGSize(width: self.view.frame.size.width * 2, height: scrollView.frame.size.height)
scrollView.autoresizingMask = .FlexibleWidth
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.backgroundColor = UIColor.greenColor()
iniiCameraView()
}
func iniiCameraView() {
rectanglePhot = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.scrollView.frame.size.height)) <-- This is the problematic one
//rectanglePhot = UIView()
let specifyY = self.scrollView.frame.size.height - self.view.frame.size.width
squarePhoto = UIView(frame: CGRect(x: self.view.frame.size.width, y: specifyY, width: self.view.frame.size.width, height: self.view.frame.size.width))
scrollView.addSubview(rectanglePhot)
scrollView.addSubview(squarePhoto)
rectanglePhot.backgroundColor = UIColor.blueColor()
squarePhoto.backgroundColor = UIColor.brownColor()
print("Rect Height ", rectanglePhot.frame.size.height)
print("Scroll Height ", scrollView.frame.size.height)
print("Specify Y ", specifyY)
}
And the image Image Added to Scrollview a index[0]
Add the code in viewdidappear. The autolayout will be applied after viewdidload
Replace
UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.scrollView.frame.size.height))
With :
UIView(frame: CGRect(x: 0, y: 0, width: self.scrollView.bounds.size.width, height: self.scrollView.bounds.size.height))
With this the UIView will take the exact size of you scrollview
if you don't want to use autolayout: add subviews in viewDidLoad, that is fine but you also need to adjust their frames in viewDidLayoutSubviews method of UIViewController since your scrollView will have a different frame after autolayout passes.
if you are ok with using autolayout: don't rely on scrollView for sizing your subviews, relate size of your subviews to the size of self.view
I am trying to make a scrollview with 3 pictures on a sign up/join page for a small app I trying to make. I was using this code below:
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
var signInButton: UIButton!
var joinButton: UIButton!
var pageControl: UIPageControl!
#IBOutlet weak var scrollView: UIScrollView!
var colors:[UIColor] = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor(), UIColor.yellowColor()]
var frame = CGRectMake(0, 0, 0, 0)
override func viewDidLoad() {
super.viewDidLoad()
signInButton = UIButton(frame: CGRectMake(1/3.0 * self.view.bounds.size.width, 5/6.0 * self.view.bounds.size.height, 23, 60))
joinButton = UIButton(frame: CGRectMake(2/3.0 * self.view.bounds.size.width, 5/6.0 * self.view.bounds.size.height, 23, 60))
pageControl = UIPageControl(frame: CGRectMake(1/2.0 * self.view.bounds.size.width, 70/100.0 * self.view.bounds.size.height, 23, 60))
self.view.addSubview(signInButton)
self.view.addSubview(joinButton)
self.view.addSubview(pageControl)
signInButton.addTarget(self, action: "signInButtonClicked:", forControlEvents: .TouchUpInside)
joinButton.addTarget(self, action: "joinButtonClicked:", forControlEvents: .TouchUpInside)
pageControl.addTarget(self, action: Selector("changePage:"), forControlEvents: UIControlEvents.ValueChanged)
configurePageControl()
scrollView.delegate = self
for index in 0...3 {
frame.size = scrollView.frame.size
frame.origin.x = scrollView.frame.size.width * CGFloat(index)
scrollView.pagingEnabled = true
let view: UIView = UIView(frame: frame)
view.backgroundColor = colors[index]
scrollView.addSubview(view)
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * 4, self.scrollView.frame.size.height)
}
func configurePageControl() {
self.pageControl.numberOfPages = colors.count
self.pageControl.currentPage = 0
self.pageControl.tintColor = UIColor.redColor()
self.pageControl.pageIndicatorTintColor = UIColor.blackColor()
self.pageControl.currentPageIndicatorTintColor = UIColor.greenColor()
}
I put a scrollview on my view controller (using the size class width: Any and height: Any) and pinned all four sides of the scrollview to the view controller. For some reason each of the views I add to the scrollview are not exactly the same width as the iPhone.
For example when, I tried running it on an iPhone 6 the first view extends past the width of the iPhone. And that happens to the second and third view. I want the first view to be the exact width of the iPhone and the second view to be exactly to the right of the first view and so on. There seems to be some overlapping with the first view going past the width of the iPhone.
Could this be because I am using the size class (width: any and height: any) and I should disable size classes and add a scrollview for each iPhone width?
Can someone help me identify the problem here.
Add:
scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()
at the beginning of the viewDidLoad() method.
Always call these two methods before accessing a view's frame when using Auto Layout, otherwise you'll probably get an incorrect size.
The problem is that when viewDidLoad() is called, your view still has a width of 600 (due to your storyboard view controller size of 600x600).
Your constraints dictate that the scroll view should be the same width as the device, but these constraints are only applied after viewDidLoad() finishes, when Auto Layout's next scheduled pass is calculated.
Adding the code above forces Auto Layout to perform a pass, thus giving you the correct frame sizes for subsequent use in your size calculations.
Put your scroll view in , set your constraint. Then grab a UIView, put it IN the scroll view, set it as equal width, equal height, and center it (use CTRL + drag to the scroll view, you'll get a small pop up menu)
Then put your content in the UIView you just created... Bam ! also I personally rename my UIView to ContentView, just for sake
Here's a screen to help :
Now I myself am still having issue with the height, I usually simply use a fixed height for the content view because if I don't it doesn't scroll....
I have tried embedding it, but my stack view is dynamic and my app is also changing orientations time to time. I have segment control at the end of the view.
I have also tried googling it but had no luck. thanks in advance.
So far I have done:
In view did load:
mainStackView.axis = UILayoutConstraintAxis.Vertical
mainStackView.spacing = 3
scrollView.frame = self.view.bounds
scrollView.addSubview(mainStackView)
view.addSubview(scrollView)
In view did layout:
override func viewDidLayoutSubviews()
{
super.viewDidLayoutSubviews()
let top = topLayoutGuide.length
let bottom = bottomLayoutGuide.length
self.mainStackView.frame = CGRect(x: 0, y: top, width: view.frame.width, height: view.frame.height - top - bottom).insetBy(dx: 10, dy: 10)
dispatch_async(dispatch_get_main_queue())
{
self.scrollView.frame = self.view.bounds
self.scrollView.contentSize = CGSize(width: self.view.bounds.width, height: self.segmentedControl.frame.origin.y + self.segmentedControl.frame.height + 50)
}
print(scrollView.contentSize)
}
You need to set the height constraint of segment control.
For Example:
segmentedControl.heightAnchor.constraintEqualToConstant(50).active = true
More over, you can Add Empty bottom view to avoid stack view's must fill mechanism. This will show you desired view output.
var bottomView = UIView(frame: CGRectZero)
stackView.addArrangedSubview(bottomView)