I want to allow users to scroll left or right but only one screen far.
//
// MainViewController.swift
// Calendar
//
// Created by Andy on 7/22/17.
// Copyright © 2017 Andy. All rights reserved.
//
import UIKit
class MainViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var ScrollView: UIScrollView!{
didSet{
ScrollView.delegate = self
ScrollView.contentSize = CGSize(width: ScrollView.frame.width * 3, height: ScrollView.frame.height)
}
}
#IBOutlet weak var center: UIView!
#IBOutlet weak var left: UIView!
#IBOutlet weak var right: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if let destination = segue.destination as? ReusableViewController {
if let identifier = segue.identifier{
destination.currentYearOffSet = 0
destination.currentMonthOffSet = 0
switch identifier {
case "center":
destination.position = .center
case "left":
destination.position = .left
case "right":
destination.position = .right
default:
fatalError("Unexpected Segue Identifier")
}
}
}
}
}
This Controller does nothing more than getting the scroll work. And inside the scrollview there are three containerViews managed by other controllers. But that simply does not work.
I have done the following to solve the problem but in vain: 1. Check the content size of scrollView. 2. Hook up the controller and the three containerViews. 3. Set the scrollView delegate but I haven't implemented any method.(Maybe that's the cause but I don't know what to implement)
Plus, do I need to hook up those three containerViews when the controller does nothing about them?
EDIT: I removed: 1. contentSize 2. UIScrollViewDelegate 3. outlets of the three containerViews. This does make my code a lot more nicer, but scrollView still cannot scroll.
EDIT2: I add a view which is exactly the size I want scrollView.contentSize to be as the scrollView's immediate subview. And it seem that the content height is solved because it's only saying that the content width is ambiguous. It want to to add leading and trailing constraints to the view I added but I want it to just center horizontally in the scrollView. Now I need to set the leading and trailing constraints to let autoLayout know the contentWidth. How can I set the leading and trailing offSet based on the width of its superview or I'm supposed to do something else to solve this problem?
You do not need to set like this:-
#IBOutlet weak var ScrollView: UIScrollView!{
didSet{
ScrollView.delegate = self
ScrollView.contentSize = CGSize(width: ScrollView.frame.width * 3, height: ScrollView.frame.height)
}
}
Just having outlet #IBOutlet weak var ScrollView: UIScrollView! and pinning proper constraint(leading, trailing, top, bottom, equal Width(should be equal to or greater than to), equal height (should be equal to or greater than to).
For Horizontal scroll
If you wanted to scrolling horizontally then also pinned width constraint, this is required to avoid auto layout error but inside placeholder checked Remove at build time.
For Vertical scroll
If you wanted to scrolling vertically then also pinned height constraint, this is required to avoid auto layout error
but inside placeholder checked Remove at build time.
Note:- You can use either both or any one based on your requirement.
Related
I notice that, if I perform add/ expand animation within an UIScrollView, it will cause unwanted scrolling behavior, when the UIScrollView fill with enough content to become scroll-able.
As you can see in the following animation, initially, the add/ expand animation works just fine.
When we have added enough item till the UIScrollView scrollable, whenever a new item is added, and UIScrollView will first perform scroll down, and then scroll up again!
My expectation is that, the UIScrollView should remain static, when add/ expand animation is performed.
Here's the code which performs add/ expand animation.
Add/ expand animation
#IBAction func add(_ sender: Any) {
let customView = CustomView.instanceFromNib()
customView.hide()
stackView.addArrangedSubview(customView)
// Clear off horizontal swipe in animation caused by addArrangedSubview
stackView.superview?.layoutIfNeeded()
customView.show()
// Perform expand animation.
UIView.animate(withDuration: 1) {
self.stackView.superview?.layoutIfNeeded()
}
}
Here's the constraint setup of the UIScrollView & added custom view item
Constraint setup
Custom view
class CustomView: UIView {
private var zeroHeightConstraint: NSLayoutConstraint!
#IBOutlet weak var borderView: UIView!
#IBOutlet weak var stackView: UIStackView!
override func awakeFromNib() {
super.awakeFromNib()
borderView.layer.cornerRadius = stackView.frame.height / 2
borderView.layer.masksToBounds = true
borderView.layer.borderWidth = 1
zeroHeightConstraint = self.safeAreaLayoutGuide.heightAnchor.constraint(equalToConstant: 0)
zeroHeightConstraint.isActive = false
}
func hide() {
zeroHeightConstraint.isActive = true
}
func show() {
zeroHeightConstraint.isActive = false
}
}
Here's the complete source code
https://github.com/yccheok/add-expand-animation-in-scroll-view
Do you have any idea why such problem occur, and we can fix such? Thanks.
Because of the way stack views arrange their subviews, animation can be problematic.
One approach that you may find works better is to embed the stack view in a "container" view.
That way, you can use the .isHidden property when adding an arranged subview, and allow the animation to update the "container" view:
The "add view" function now becomes (I added a Bool so we can skip the animation on the initial add in viewDidLoad()):
func addCustomView(_ animated: Bool) {
let customView = CustomView.instanceFromNib()
stackView.addArrangedSubview(customView)
customView.isHidden = true
if animated {
DispatchQueue.main.async {
UIView.animate(withDuration: 1) {
customView.isHidden = false
}
}
} else {
customView.isHidden = false
}
}
And we can get rid of all of the hide() / show() and zeroHeightConstraint in the custom view class:
class CustomView: UIView {
#IBOutlet weak var borderView: UIView!
#IBOutlet weak var stackView: UIStackView!
override func awakeFromNib() {
super.awakeFromNib()
borderView.layer.masksToBounds = true
borderView.layer.borderWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
borderView.layer.cornerRadius = borderView.bounds.height * 0.5
}
}
Since it's a bit difficult to clearly show everything here, I forked your project with the changes: https://github.com/DonMag/add-expand-animation-in-scroll-view
Edit
Another "quirk" of animating a stack view shows up when adding the first arranged subview (also, when removing the last one).
One way to get around that is to add an empty view as the first subview.
So, for this example, in viewDidLoad() before adding an instance of CustomView:
let v = UIView()
stackView.addArrangedSubview(v)
This will make the first arranged subview a zero-height view (so it won't be visible).
Then, if you're implementing removing custom views, just make sure you don't remove that first, empty view.
If your stack view has .spacing = 0 noting else is needed.
If your stack view has a non-zero spacing, add another line:
let v = UIView()
stackView.addArrangedSubview(v)
stackView.setCustomSpacing(0, after: v)
I did a little research on this and the consensus was to update the isHidden and alpha properties when inserting a view with animations.
In CustomView:
func hide() {
alpha = 0.0
isHidden = true
zeroHeightConstraint.isActive = true
}
func show() {
alpha = 1.0
isHidden = false
zeroHeightConstraint.isActive = false
}
In your view controller:
#IBAction func add(_ sender: Any) {
let customView = CustomView.instanceFromNib()
customView.hide()
stackView.addArrangedSubview(customView)
self.stackView.layoutIfNeeded()
UIView.animate(withDuration: 00.5) {
customView.show()
self.stackView.layoutIfNeeded()
}
}
Also, the constraints in your storyboard aren't totally correct. You are seeing a red constraint error because autolayout doesn't know the height of your stackView. You can give it a fake height and make sure that "Remove at build time" is checked.
Also, get rid of your scrollView contentView height constraint defined as View.height >= Frame Layout Guide.height. Autolayout doesn't need to know the height, it just needs to know how subviews inside of the contentView stack up to define its vertical content size.
Everything else looks pretty good.
In my case, I have to add UIView in top of the Tableview but it should be inside Tableview because of scrolling. Here, I drag and dropped UIView on topside tableview. Now, some scenario I need to increase and reduce height of the UIView. I tried to add constraints but its not available. How to achieve this by codebase?
Tableview with UIView Storyboard Hierarchy
Storyboard Design
Disabled Constraints For UIView
Constraints is not working with table header view. you can set table header using custom view and update its frame
Set a custom view
Set table header and update it's frame
class ViewController: UIViewController {
#IBOutlet var tableView: UITableView!
#IBOutlet var tableHeader: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
loadHeader()
}
func loadHeader() {
tableHeader.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 300)
tableView.tableHeaderView = tableHeader
}
}
I'm trying to cope with iPhone X with inputAccessoryView. I've added a view to my ViewController like so:
CustomView
I've defined an outlet and attached to it. Returned the same view as inputAccessoryView like so:
class ViewController: UIViewController {
#IBOutlet weak var textFieldContainer: UIView!
override var inputAccessoryView: UIView? {
return textFieldContainer
}
override var canBecomeFirstResponder: Bool {
return true
}
override func viewDidLoad() {
super.viewDidLoad()
textFieldContainer.autoresizesSubviews = true
}
}
I've made sure to add constraints relative to safe area. Here are my constraints:
Constraints
Adjusted autoResizingMask in SB like so:
AutoResizingMask
However, it's still not working. Here's the output:
Output
What did I miss?
Unlike for table view cells, there is no support for dynamic height calculation in input accessory views, as far as I know.
You could use a fixed height for the accessory view.
But I assume, that you want just to change either top, bottom, or height constraint in interface builder and the change is reflected after the next build.
What you could do is, to use a custom view class where you connect your top, bottom and height constraints.
Then override intrinsicContentSize and return the sum of the three constraint constants.
class TextFieldContainer: UIView {
#IBOutlet weak var topConstraint: NSLayoutConstraint!
#IBOutlet weak var bottomConstraint: NSLayoutConstraint!
#IBOutlet weak var heightConstraint: NSLayoutConstraint!
override var intrinsicContentSize: CGSize {
let contentHeight =
self.topConstraint.constant
+ self.heightConstraint.constant
+ self.bottomConstraint.constant
return CGSize(width: UIScreen.main.bounds.width, height: contentHeight)
}
}
Your layout hierarchy could be simplified and look like this:
The autoresizing mask could look like this:
The final result would behave like the following then:
You're giving textfield height and also bottom constraint, try to remove bottom constraint for textfield
I need to update constraints (height of my CollectionView) when request is done and I have images from server, so height of View also will change.
Result screen
what I need screen
My code:
DispatchQueue.main.async {
self.cvActivity.alpha = 0
self.collectionView.reloadData()
self.collectionView.heightAnchor.constraint(equalToConstant: self.cellWidth * 2).isActive = true
self.collectionView.setNeedsUpdateConstraints()
self.collectionView.setNeedsLayout()
self.view.layoutIfNeeded()
}
Well, basic idea by #J. Doe is correct, here some code explanation (for simplicity i used UIView, not UICollectionView):
import UIKit
class ViewController: UIViewController {
#IBOutlet var heightConstraint: NSLayoutConstraint! // link the height constraint to your collectionView
private var height: CGFloat = 100 // you should keep constraint height for different view states somewhere
override func updateViewConstraints() {
heightConstraint.constant = height // set the correct height
super.updateViewConstraints()
}
// update height by button press with animation
#IBAction func increaseHight(_ sender: UIButton) {
height *= 2
UIView.animate(withDuration: 0.3) {
self.view.setNeedsUpdateConstraints()
self.view.layoutIfNeeded() // if you call `layoutIfNeeded` on your collectionView, animation doesn't work
}
}
}
Result:
Define a height for your collectionView, create an outlet from that constraint and increase the constant of that constraint and call layoutifneeded in an animation block
You need to make object of your Height constraint from storyboard
#IBOutlet weak var YourHeightConstraintName: NSLayoutConstraint!
YourConstraintName.constant = valueYouWantToGive
---------OR--------
collectionViewOutlet.view.frame = CGRect(x:
collectionViewOutlet.frame.origin.x , y:
collectionViewOutlet.frame.origin.y, width:
collectionViewOutlet.frame.width, height:
yourheightValue)
I want to add a few view in scrollview. But I dont want to this view programmatically. I want to create with storyboard. This view include an image. I added scrollview and added to view. But in scrollview I just showing my last view. I want to 2 view and 2 image like my view. How can i fix this?
This is my code:
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var mainScrollView: UIScrollView!
var imageArray = [UIImage]()
#IBOutlet weak var myView: UIView!
#IBOutlet weak var imgv: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imageArray = ["image","image2"]
for i in 0..<imageArray.count{
mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1)
myView.layer.frame.size.width = myView.frame.width * CGFloat(i + 1)
imgv.image = imageArray[i]
mainScrollView.addSubview(myView)
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
This is storyboard and controller looks like
You are having an issue with constraints from what I see and that is why you might not see every element that you put on your storyboard. You need to correct those errors for everything to show up correctly in your scrollview. Keep in mind, you need to tell the scrollview what its height and width should be in the storyboard. They need to be defined in some way. This is a common mistake when working with scrollviews.
You can put a view in your scrollview and define its height and width property. You can set its width to be equal to the screen's width and you can set a constant for your height.