I am having an UIButton at my UIScrollView and when i zoom my scroll view the button position is not fix...is there any way to make it fix at one location?
Place/set your button over scroll view (not inside scroll view) as shown here in this snapshot. And also set button constraints (position) with respect to super view of your scrollview.
Here is ref. snapshot of hierarchy of position of each view over each-other.
Since iOS 11, UIScrollView has an instance property called frameLayoutGuide. frameLayoutGuide has the following declaration:
var frameLayoutGuide: UILayoutGuide { get }
The layout guide based on the untransformed frame rectangle of the scroll view.
Use this layout guide when you want to create Auto Layout constraints that explicitly involve the frame rectangle of the scroll view itself, as opposed to its content rectangle.
The following Swift 5.1 / iOS 13 UIViewController implementation shows how to use frameLayoutGuide in order to center a UIButton inside a UIScrollView.
import UIKit
class ViewController: UIViewController {
let scrollView = UIScrollView()
let button = UIButton(type: .system)
let imageView = UIImageView(image: UIImage(named: "LargeImage"))
override func viewDidLoad() {
super.viewDidLoad()
// Set scrollView constraints
scrollView.contentInsetAdjustmentBehavior = .never
view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
// Set imageView constraints
scrollView.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
imageView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
imageView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
imageView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
imageView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor)
])
// Set button constraints (centered)
button.setTitle("Button", for: .normal)
scrollView.addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
button.centerXAnchor.constraint(equalTo: scrollView.frameLayoutGuide.centerXAnchor),
button.centerYAnchor.constraint(equalTo: scrollView.frameLayoutGuide.centerYAnchor)
])
}
}
If you want your button to stay at a fixed size and position when you modify your scrollview, the best way would be to not have it be in the scrollview at all. Add the button to the parent view of the scrollview, then it won't be affected by any changes to the scrollview and can be overlaid on top of it.
You should position your button outside the scroll view and anchor it to the bottom of the page. This way the content in your scroll view will change but your button will remain statically fixed on the view.
Related
I have a MainViewController with some elements inside. I want the whole view to be vertically scrollable.
I made this BaseScrollableViewController class:
class BaseScrollableViewController: UIViewController, UIScrollViewDelegate {
lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.delegate = self
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.showsHorizontalScrollIndicator = false
scrollView.showsVerticalScrollIndicator = false
return scrollView
}()
lazy var contentView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(scrollView)
scrollView.addSubview(contentView)
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
])
}
}
Then I made the MainViewController a subclass of this BaseScrollableViewController. Inside, I use contentView to add all the subviews.
Now it scrolls vertically. However, when I scroll down to the bottom, here is what is shows:
Note that there is an empty space at the bottom.
I have tried the scrollView.contentInsetAdjustmentBehavior = .never, but then the scrollView becomes not scrollable.
So how can I fix this? Thanks!
For a scrollView to be scrollable, its subviews need to be bigger than the scrollView. By specifying the following constraint contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor) on the BaseScrollableViewController you are specifying that the contentView will have the same height of the scrollView, thus making the view not scrollable when setting scrollView.contentInsetAdjustmentBehavior = .never.
You can test this by adding a multiplier value on the contentView height constraint:
contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor, multiplier: 1.5)
And enabling
`scrollView.contentInsetAdjustmentBehavior = .never`
I have a custom view which contains a label, label can have multiple line text. So i have added that label inside a UIStackView, now my StackView height is increasing but the custom view height doesn't increases. I haven't added bottom constraint on my StackView. What should I do so that my CustomView height also increases with the StackView.
let myView = Bundle.main.loadNibNamed("TestView", owner: nil, options: nil)![0] as! TestView
myView.lbl.text = "sdvhjvhsdjkvhsjkdvhsjdvhsdjkvhsdjkvhsdjkvhsjdvhsjdvhsjdvhsjdvhsjdvhsjdvhsjdvhsdjvhsdjvhsdjvhsdjvhsdjvhsjdvhsdjvhsdjvhsjdvhsdjvhsjdvhsdjvhsdjvhsdjvhsjdv"
myView.lbl.sizeToFit()
myView.frame = CGRect(x: 10, y: 100, width: UIScreen.main.bounds.width, height: myView.frame.size.height)
myView.setNeedsLayout()
myView.layoutIfNeeded()
self.view.addSubview(myView)
I want to increase my custom view height as per my stackview height.
Please help.
Example of stackView constraints with its superview.
Also superview should not have constraints for its height.
You should set the top and bottom anchors of your custom view to be constrained to the top and bottom anchors of your stackview. As your stackView grows, it will push that bottom margin along. Here's a programmatic example:
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
private lazy var stackView = UIStackView()
private lazy var addLabelButton = UIButton(type: .system)
override func loadView() {
let view = UIView()
view.backgroundColor = .white
let stackViewContainer = UIView(frame: view.bounds)
stackViewContainer.backgroundColor = .yellow
stackViewContainer.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackViewContainer)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
addLabelButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(addLabelButton)
stackViewContainer.addSubview(stackView)
NSLayoutConstraint.activate([
// Container constrained to three edges of its superview (fourth edge will grow as the stackview grows
stackViewContainer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
stackViewContainer.trailingAnchor.constraint(equalTo: view.trailingAnchor),
stackViewContainer.topAnchor.constraint(equalTo: view.topAnchor),
// stackView constraints - stackView is constrained to the
// for corners of its contaier, with margins
{
// Stackview has a height of 0 when no arranged subviews have been added.
let heightConstraint = stackView.heightAnchor.constraint(equalToConstant: 0)
heightConstraint.priority = .defaultLow
return heightConstraint
}(),
stackView.topAnchor.constraint(equalTo: stackViewContainer.topAnchor, constant: 8),
stackView.leadingAnchor.constraint(equalTo: stackViewContainer.leadingAnchor, constant: 8),
stackView.trailingAnchor.constraint(equalTo: stackViewContainer.trailingAnchor, constant: -8),
stackView.bottomAnchor.constraint(equalTo: stackViewContainer.bottomAnchor, constant: -8),
// button constraints
addLabelButton.topAnchor.constraint(equalTo: stackViewContainer.bottomAnchor, constant: 8),
addLabelButton.centerXAnchor.constraint(equalTo: stackViewContainer.centerXAnchor)
])
addLabelButton.setTitle("New Label", for: .normal)
addLabelButton.addTarget(self, action: #selector(addLabel(sender:)), for: .touchUpInside)
self.view = view
}
private(set) var labelCount = 0
#objc func addLabel(sender: AnyObject?) {
let label = UILabel()
label.text = "Label #\(labelCount)"
labelCount += 1
stackView.addArrangedSubview(label)
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
Note that when the UIStackView is empty, its height is not well defined. That is why I set its heightAnchor constraint to 0 with a low priority.
First of all you should add bottom constraint on your UIStackView. This will help auto layout in determining the run time size of UIStackView.
Now create instance of your custom UIView but do not set it's frame and add it to UIStackView. Make sure you Custom UiView has all the constraints set for auto layout to determine it's run time frame.
This will increase height of both UIView and UIStackView based on content of UIView elements.
For more details you can follow my detailed answer on this at https://stackoverflow.com/a/57954517/3339966
I have properly set up an Viewcontroller containing an UIView with class "MGLMapView", what I am trying add an button to the Viewcontroller, but when I run the app the button does not show.
Same if I do an external Viewcontroller and overlay the MapViewController, it runs, but it does not show.
Why is that? have anybody had a similar problem? and how do I solve it?
Thanks in advance!
I don't know about the MGLMapView but it should adhere to same rules as any other UIView object.
This example is based on a MKMapView but it should be analog for MGMapView. Put this code in your VC and add setUpViews() to your viewDidLoad() method.
Note: this code should put the MKMapView at the bottom of the view stack and the map view should take up the entire view (except the top 64 pts--I assumed a UINavigationView might be in use--if not just change 64.0 to 0.0 in the constraints). Then it adds a UIButton on top of the MKMapView centered in the x direction with a width of 150 a height of 40 and 20 from the bottom of the view.
let map: MKMapView = {
let view = MKMapView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
let button: UIButton = {
let view = UIButton()
// Add or change attributes as you need
view.backgroundColor = UIColor.green
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
fileprivate func setUpViews(){
// Add the map first
self.view.addSubview(map)
// Add the button now it will be on top of the map view
self.view.addSubview(button)
map.delegate = self;
NSLayoutConstraint.activate([
map.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 64.0),
map.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
map.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
map.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
])
NSLayoutConstraint.activate([
button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0.0),
button.heightAnchor.constraint(equalToConstant: 40.0),
button.widthAnchor.constraint(equalToConstant: 150.0),
button.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20.0),
])
}
A lot of questions are available with this but I'm very bad with constraints. So I've added a UIScrollView and the UIView I want to show has height of 700 and this is fixed 700 no dynamic height. The constraints I've for UIScrollView are:
And for UIView the constraints are:
But it's not scrolling.
What I do when I need a scrollable view is what follows - just go over your constraints in storyboards and do the same there (especially pay attention to second step):
I add a scrollView to the hierarchy and use autolayout to properly layout it, e.g., if it is supposed to cover the whole view of the viewController:
scrollView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
scrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
scrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
])
Then you need to add a contentView to the scrollView and provide a proper layout constraints for it, so if you want vertically scrollable scrollView in the example I started above, you need following autolayout constraints:
contentView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
// horizontal anchors of contentView are constrained to scrollView superview
// to prevent it from scrolling horizontally
contentView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
contentView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
// but vertical anchors of contentView are constrained to
// scrollView to allow scrolling
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
])
Notice here that I constrained the leftAnchor and rightAnchor of the contentView to the self.view rather than to scrollView to make it of fixed width. However, top and bottom anchors are constrained to the scrollView, so they are expanded and scrollable when contentView needs more space.
Now you add to the contentView all the content that you want, and you lay it out using autolayout as if the contentView was a view with infinite height. Or you can just explicitly set its height to 700 as you want.
When you are giving AutoLayout to a scrollView, follow the below methods.
Treat ScrollView like any other view object and apply the constraints like you normally do:
Get a view inside the scrollView which would later contain all the views you would want inside the ScrollView. Apply the constraints like you would apply to a subview, like below:
Apart from the leading, trailing,top and bottom constraints, the width and height are additionally specified.
The width and height would define how much the ScrollView can scroll in the horizontal or vertical direction.
Instead of directly specifying the width and height, you might want to specify the height and width in relation with the other contents you might add inside this subview.
Tip : If you can draw a straight line from top to bottom, connecting the constraints of the Y axis constraints of the subviews, you will not get the ambiguos content error. Same is the case for width.
Programatically, you can follow the same approach:
let scrollView = UIScrollView()
self.view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
let safeArea = view.safeAreaLayoutGuide
scrollView.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 0).isActive = true
scrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
scrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
scrollView.backgroundColor = .gray
let scrollContentView = UIView()
scrollView.addSubview(scrollContentView)
scrollContentView.translatesAutoresizingMaskIntoConstraints = false
scrollContentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
scrollContentView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true
scrollContentView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
scrollContentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
scrollContentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
scrollContentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
scrollContentView.backgroundColor = .green
You can increase the heightAnchor or widthAnchor of the scrollContentView according to your requirement.
Give the height to the contentView inside the scrollview not only to the scrollview itself
I have a UIScrollView. It has a stack view. And this stack view contains 12 buttons. (Horizontal scroll view)
Stackview constraints :- top,leading,trailing,bottom to the scroll view and equal widths to the scroll view.
My problem is every time when I run, stack view width limits to the scroll view width and buttons are too small acording to the width of the stack view and my scroll view is not scrollable.
How to make this scrollable
Step-by-Step for setting this up in IB / Storyboards...
Add a view - height 50 leading/top/trailing - blue background
add a scrollview to that view - pin leading/top/trailing/bottom to 0 - set scrollview background to yellow so we can see where it is
add a button to the scroll view
duplicate it so you have 12 buttons
group them into a stack view, and set the stack view's constraints to 0 leading/top/trailing/bottom
and set the stack view's distribution to "equal spacing"
result running in simulator (with no code at all):
and the buttons scroll left and right... no code setting of .contentSize...
So you want this:
Here's how I did it in Xcode 8.3.3.
New Project > iOS > Single View Application.
Open Main.storyboard.
Drag a scroll view into the scene.
Pin top, leading, and trailing of the scroll view to 0. Set height to 30.
Drag a horizontal stack view into the scroll view.
Pin all four edges of the stack view to 0.
Set stack view spacing to 4.
Drag twelve buttons into the stack view.
Set target device to iPhone SE.
Build & run.
Resulting document outline:
If you make your Stackview width equal to the scrollview width, then that's all you'll get, and of course it won't scroll.
Don't give your Stackview a width constraint... let the buttons "fill it out".
Edit: Here is a simple example that you can run directly in a Playground page:
import UIKit
import PlaygroundSupport
class TestViewController : UIViewController {
let scrollView: UIScrollView = {
let v = UIScrollView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .cyan
return v
}()
let stackView : UIStackView = {
let v = UIStackView()
v.translatesAutoresizingMaskIntoConstraints = false
v.axis = .horizontal
v.distribution = .equalSpacing
v.spacing = 10.0
return v
}()
override func viewDidLoad() {
super.viewDidLoad()
// add the scroll view to self.view
self.view.addSubview(scrollView)
// constrain the scroll view to 8-pts on each side
scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true
scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true
// add the stack view to the scroll view
scrollView.addSubview(stackView)
// constrain the stackview view to 8-pts on each side
// this *also* controls the .contentSize of the scrollview
stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 8.0).isActive = true
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0).isActive = true
stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -8.0).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0).isActive = true
// add ten buttons to the stack view
for i in 1...10 {
let b = UIButton()
b.translatesAutoresizingMaskIntoConstraints = false
b.setTitle("Button \(i)", for: .normal)
b.backgroundColor = .blue
stackView.addArrangedSubview(b)
}
}
}
let vc = TestViewController()
vc.view.backgroundColor = .yellow
PlaygroundPage.current.liveView = vc