I want to set four views in the UIStackView with the horizontal　direction. The four views next to each without space.
My code:
let arrangeStackView = UIStackView()
let followUpActionView = UIView()
let developCurriculumView = UIView()
let moreMoreView = UIView()
let takeCareSalonView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(arrangeStackView)
developCurriculumView.translatesAutoresizingMaskIntoConstraints = false;
followUpActionView.translatesAutoresizingMaskIntoConstraints = false;
takeCareSalonView.translatesAutoresizingMaskIntoConstraints = false;
moreMoreView.translatesAutoresizingMaskIntoConstraints = false;
developCurriculumView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
followUpActionView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
takeCareSalonView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
moreMoreView.backgroundColor = UIColor(red: CGFloat(arc4random()%256)/255.0, green: CGFloat(arc4random()%256)/255.0, blue: CGFloat(arc4random()%256)/255.0, alpha: 1)
arrangeStackView.axis = .horizontal
arrangeStackView.distribution = .fillEqually
arrangeStackView.spacing = 10
arrangeStackView.alignment = .fill
arrangeStackView.translatesAutoresizingMaskIntoConstraints = false
arrangeStackView.addSubview(followUpActionView)
arrangeStackView.addSubview(developCurriculumView)
arrangeStackView.addSubview(moreMoreView)
arrangeStackView.addSubview(takeCareSalonView)
arrangeStackView.snp.makeConstraints { (make) in
make.center.equalToSuperview()
make.height.equalTo(95)
make.width.equalToSuperview()
}
let yaIconWith = self.view.frame.width * 0.25
followUpActionView.snp.makeConstraints{(make) -> Void in
make.height.equalToSuperview()
make.width.equalTo(yaIconWith)
}
takeCareSalonView.snp.makeConstraints{(make) -> Void in
make.height.equalToSuperview()
make.width.equalTo(yaIconWith)
}
moreMoreView.snp.makeConstraints{(make) -> Void in
make.height.equalToSuperview()
make.width.equalTo(yaIconWith)
}
developCurriculumView.snp.makeConstraints{(make) -> Void in
make.height.equalToSuperview()
make.width.equalTo(yaIconWith)
}
Now, I look the result as below.
Why the four views locate the top-left on the screen?
You added each of the views as a subview to the stack view, instead of adding each view as an arranged subview. While they sound similar, only the arranged subviews are laid out according to the stack view's properties.
So you will change these lines:
arrangeStackView.addSubview(followUpActionView)
arrangeStackView.addSubview(developCurriculumView)
arrangeStackView.addSubview(moreMoreView)
arrangeStackView.addSubview(takeCareSalonView)
To this:
arrangeStackView.addArrangedSubview(followUpActionView)
arrangeStackView.addArrangedSubview(developCurriculumView)
arrangeStackView.addArrangedSubview(moreMoreView)
arrangeStackView.addArrangedSubview(takeCareSalonView)
And if you need special arrangement or if you need to add the views at different times in certain places, insertArrangedSubview(_:at:) is an alternative to addArrangedSubview(_:)
A UIStackView only distributes its arrangedSubViews not its regular subViews. Use addArrangedSubview instead of addSubView.
Related
Im trying to achieve as in these images below
On User edit
here is my code
#IBOutlet weak var commentTxtField: MDCMultilineTextField! // Connected to storyboard
commentTxtField.textView?.delegate = self
commentTxtField.textView?.frame = CGRect(x: (commentTxtField.textView?.frame.origin.x)!, y: (commentTxtField.textView?.frame.origin.y)!, width: (commentTxtField.textView?.frame.width)!, height: CGFloat(GenUtils.shared.getHeightForPercent(percent: 11.99)))
commentTxtField.expandsOnOverflow = false
commentTextFieldController = MDCTextInputControllerOutlinedTextArea(textInput: commentTxtField)
commentTextFieldController?.placeholderText = "Comment"
commentTextFieldController?.isFloatingEnabled = true
commentTextFieldController!.characterCountMax = UInt(maxCharactersCount)
commentTextFieldController?.characterCountViewMode = UITextField.ViewMode.never
commentTextFieldController?.activeColor = UIColor.white.withAlphaComponent(0.6)
commentTextFieldController?.normalColor = UIColor.white.withAlphaComponent(0.2)
// emailTextFieldController?.borderFillColor = UIColor.white
commentTextFieldController?.floatingPlaceholderActiveColor = UIColor(red: 249/255, green: 249/255, blue: 249/255, alpha: 0.54)
commentTextFieldController?.inlinePlaceholderColor = UIColor.white
commentTextFieldController?.floatingPlaceholderNormalColor = UIColor(red: 249/255, green: 249/255, blue: 249/255, alpha: 0.54)
commentTxtField.textColor = UIColor.white
commentTextFieldController?.inlinePlaceholderFont = UIFont(name:"Avenir-Medium",size:16)
tried to set the textviewframe, but not reflecting on screen. And also not able to get floating placeholder on border line align. What am i missing?
use **MDCTextField** as below:
class SomeVC: UIViewController, UITextFieldDelegate {
var textFieldControllerFloating = MDCTextInputControllerUnderline()
override func viewDidLoad() {
let textFieldFloating = MDCTextField()
self.view.addSubview(textFieldFloating)
//place textfield where you want
textFieldFloating.placeholder = "Some cool animating placeholder"
textFieldFloating.delegate = self
// This will animate the textfield's place holder
textFieldControllerFloating = MDCTextInputControllerUnderline(textInput: textFieldFloating)
}
}
also if you want an outlined textfield you to use "Outlined" text field
https://material.io/develop/ios/components/textfields/
If I use the code sample below in a playground everything looks good until I try to set the text property for one of the labels. I've pinned it down to being able to change the value before adding the stack view to the UIView. But if I change the label's text value after adding the stack view to the parent view then the two labels end up overlapping (see images at bottom).
This is a basic test harness highlighting the problem, the real code will set the value at run time, potentially after the view has loaded, and the actual control is more complex than this. I know it's something to do with auto-layout / constraints but I'm pretty sure I've followed the example code I was looking at properly but I can't see the difference between their example and mine.
import UIKit
import PlaygroundSupport
#IBDesignable
public final class TestHarness : UIView {
fileprivate let nameLabel: UILabel = {
let label = UILabel()
//label.font = UIFont.systemFont( ofSize: 20, weight: UIFont.Weight.medium)
label.textAlignment = .center
label.textColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
label.text = "Person's Name"
label.adjustsFontSizeToFitWidth = true
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
fileprivate let jobTitleLabel: UILabel = {
let label = UILabel()
//label.font = UIFont.systemFont( ofSize: 20, weight: UIFont.Weight.medium)
label.textAlignment = .center
label.textColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
label.text = "Job Title"
label.adjustsFontSizeToFitWidth = true
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
fileprivate lazy var stackView: UIStackView = {
let stackView = UIStackView()
stackView.axis = .vertical
//stackView.distribution = .fill
stackView.alignment = .center
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.addArrangedSubview(self.nameLabel)
stackView.addArrangedSubview(self.jobTitleLabel)
return stackView
}()
public required init?(coder: NSCoder) {
super.init(coder: coder)
initPhase2()
}
public override init(frame: CGRect) {
super.init(frame: frame)
initPhase2()
}
private func initPhase2() {
layer.cornerRadius = 10
layer.borderWidth = 2
self.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
jobTitleLabel.backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)
// self.jobTitleLabel.text = "Developer" // <<-- Can set here no problem
self.addSubview(stackView)
// self.jobTitleLabel.text = "Developer" // << -- If I set this here, job title and name overlap
NSLayoutConstraint.activate([
{
let constraint = stackView.topAnchor.constraint(greaterThanOrEqualTo: layoutMarginsGuide.topAnchor, constant: 8)
constraint.priority = UILayoutPriority(750)
return constraint
}(),
stackView.leftAnchor.constraint(equalTo: layoutMarginsGuide.leftAnchor, constant: 8),
stackView.rightAnchor.constraint(equalTo: layoutMarginsGuide.rightAnchor, constant: -8),
{
let constraint = stackView.bottomAnchor.constraint(lessThanOrEqualTo: layoutMarginsGuide.bottomAnchor, constant: -8)
constraint.priority = UILayoutPriority(750)
return constraint
}(),
stackView.centerYAnchor.constraint(equalTo: layoutMarginsGuide.centerYAnchor)
])
}
#IBInspectable
public var Name: String? {
get{
return self.nameLabel.text
}
set{
self.nameLabel.text = newValue
}
}
#IBInspectable
public var JobTitle: String? {
get{
return self.jobTitleLabel.text
}
set{
self.jobTitleLabel.text = newValue
}
}
}
let dimensions = (width: 200, height: 300)
let control = TestHarness(frame: CGRect(x: dimensions.width / 2, y: dimensions.height / 2, width: dimensions.width, height: dimensions.height))
// control.JobTitle = "Developer" // << -- If I set this here, job title and name overlap
let view = UIView(frame: control.frame.insetBy(dx: -100, dy: -100))
view.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
view.addSubview(control)
PlaygroundPage.current.liveView = view
This is how it should look, and does look if I change the label's text before adding the stack view as a child of the parent view.
This is how it looks if I change the label's text after adding the stack view to the parent view. The job title overlaps with the name label.
Your code looks good, maybe there is a problem with Playground's render loop,
I created an Xcode project and used your code and it worked great in the simulator with no overlap:
import UIKit
override func viewDidLoad() {
super.viewDidLoad()
let dimensions = (width: 200, height: 300)
let control = TestHarness(frame: CGRect(x: dimensions.width / 2, y: dimensions.height / 2, width: dimensions.width, height: dimensions.height))
control.JobTitle = "Developer b2.0" // << -- No overlap in simulator
let contentView = UIView(frame: control.frame.insetBy(dx: -100, dy: -100))
contentView.backgroundColor = #colorLiteral(red: 0.3098039329, green: 0.01568627544, blue: 0.1294117719, alpha: 1)
contentView.addSubview(control)
view.addSubview(contentView)
}
I have created a small demo playground to get this working before adding the view to my app.
I have a scroll view that is going to contain a number of buttons to scroll through horizontally. I know that these buttons need to go into a container view within the scroll view and have created this as well. I was initially using autolayout constraints to create all of this, but have now tried using constants to ensure the content view is bigger than the scroll view. However, the buttons still will not scroll... have I missed something? Do scroll views not work with auto layout?
I am doing this all programmatically as well on my iPad so solutions with interface builder are unfortunately not an option...
Here is the full code:
import UIKit
import PlaygroundSupport
class FilterViewController: UIViewController {
var filterView: UIView!
var scrollView: UIScrollView!
var containerView: UIView!
override func loadView() {
filterView = UIView()
view = filterView
view.backgroundColor = #colorLiteral(red: 0.909803926944733, green: 0.47843137383461, blue: 0.643137276172638, alpha: 1.0)
scrollView = UIScrollView()
scrollView.backgroundColor = #colorLiteral(red: 0.474509805440903, green: 0.839215695858002, blue: 0.976470589637756, alpha: 1.0)
view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.topAnchor.constraint(equalTo:view.topAnchor, constant:40).isActive = true
scrollView.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo:view.widthAnchor).isActive = true
scrollView.heightAnchor.constraint(equalToConstant: 200).isActive = true
scrollView.isScrollEnabled = true
containerView = UIView()
containerView.backgroundColor = #colorLiteral(red: 0.176470592617989, green: 0.498039215803146, blue: 0.756862759590149, alpha: 1.0)
scrollView.addSubview(containerView)
containerView.frame = CGRect(x: 0, y: 0, width: 1080, height: 200)
}
class Buttons{
let button = UIButton()
init (titleText : String){
button.backgroundColor = #colorLiteral(red: 0.976470589637756, green: 0.850980401039124, blue: 0.549019634723663, alpha: 1.0)
button.setTitle(titleText, for: .normal)
button.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
}
}
override func viewDidLoad() {
super.viewDidLoad()
let b1 = Buttons(titleText: "one")
let b2 = Buttons(titleText: "two")
let b3 = Buttons(titleText: "three")
let b4 = Buttons(titleText: "four")
let b5 = Buttons(titleText: "five")
let buttonArray = [b1,b2,b3,b4,b5]
var startPoint : CGFloat = 0.0
for btn in buttonArray {
let theBtn = btn.button
containerView.addSubview(theBtn)
theBtn.frame = CGRect(x: startPoint, y: 0, width: 200, height: 200)
startPoint += 220
}
}
}
let filterViewController = FilterViewController()
PlaygroundPage.current.liveView = filterViewController
Thank you vacawama!
Here is the full (working now) mini project with all of the auto layout constraints:
import UIKit
import PlaygroundSupport
class FilterViewController: UIViewController {
var filterView: UIView!
var scrollView: UIScrollView!
var containerView: UIView!
override func loadView() {
filterView = UIView()
view = filterView
view.backgroundColor = #colorLiteral(red: 0.909803926944733, green: 0.47843137383461, blue: 0.643137276172638, alpha: 1.0)
scrollView = UIScrollView()
scrollView.backgroundColor = #colorLiteral(red: 0.474509805440903, green: 0.839215695858002, blue: 0.976470589637756, alpha: 1.0)
view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.topAnchor.constraint(equalTo:view.topAnchor, constant:40).isActive = true
scrollView.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo:view.widthAnchor).isActive = true
scrollView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.25).isActive = true
scrollView.isScrollEnabled = true
containerView = UIView()
containerView.backgroundColor = #colorLiteral(red: 0.176470592617989, green: 0.498039215803146, blue: 0.756862759590149, alpha: 1.0)
scrollView.addSubview(containerView)
containerView.translatesAutoresizingMaskIntoConstraints = false
containerView.topAnchor.constraint(equalTo:scrollView.topAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo:scrollView.leadingAnchor).isActive = true
containerView.trailingAnchor.constraint(equalTo:scrollView.trailingAnchor).isActive = true
containerView.bottomAnchor.constraint(equalTo:scrollView.bottomAnchor).isActive = true
containerView.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
}
class Buttons{
let button = UIButton()
init (titleText : String){
button.backgroundColor = #colorLiteral(red: 0.976470589637756, green: 0.850980401039124, blue: 0.549019634723663, alpha: 1.0)
button.setTitle(titleText, for: .normal)
//button.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
}
}
override func viewDidLoad() {
super.viewDidLoad()
let b1 = Buttons(titleText: "one")
let b2 = Buttons(titleText: "two")
let b3 = Buttons(titleText: "three")
let b4 = Buttons(titleText: "four")
let b5 = Buttons(titleText: "five")
let buttonArray = [b1,b2,b3,b4,b5]
var startPoint = containerView.leadingAnchor
for btn in buttonArray {
let theBtn = btn.button
containerView.addSubview(theBtn)
theBtn.translatesAutoresizingMaskIntoConstraints = false
theBtn.leadingAnchor.constraint(equalTo:startPoint, constant:20).isActive = true
theBtn.topAnchor.constraint(equalTo:containerView.topAnchor).isActive = true
theBtn.bottomAnchor.constraint(equalTo:containerView.bottomAnchor).isActive = true
theBtn.widthAnchor.constraint(equalTo: theBtn.heightAnchor).isActive = true
startPoint = theBtn.trailingAnchor
containerView.widthAnchor.constraint(equalTo: theBtn.widthAnchor, multiplier:CGFloat(buttonArray.count), constant: CGFloat(buttonArray.count * 20)).isActive = true
}
}
}
let filterViewController = FilterViewController()
PlaygroundPage.current.liveView = filterViewController
You can do this with Auto Layout. The secret is to constrain the edges of the containerView to the edges of the scrollView. It's not intuitive, but constraining the edges of the containerView doesn't set the size, it just makes sure that the content size of the scrollView grows as the containerView grows. By setting constraints for the width of the containerView to a constant that is a larger number than the width of the scrollView, the content will scroll horizontally.
Note: When configuring a scrollView this way, you do not set the contentSize of the scrollView. The contentSize will be computed for you by Auto Layout and it will be equal to the size of the containerView. It is important to make sure that the size of the containerView is fully specified by the constraints.
Here's what I changed to make it work:
containerView = UIView()
containerView.backgroundColor = #colorLiteral(red: 0.176470592617989, green: 0.498039215803146, blue: 0.756862759590149, alpha: 1.0)
scrollView.addSubview(containerView)
//containerView.frame = CGRect(x: 0, y: 0, width: 1080, height: 200)
containerView.translatesAutoresizingMaskIntoConstraints = false
containerView.topAnchor.constraint(equalTo:scrollView.topAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo:scrollView.leadingAnchor).isActive = true
containerView.trailingAnchor.constraint(equalTo:scrollView.trailingAnchor).isActive = true
containerView.bottomAnchor.constraint(equalTo:scrollView.bottomAnchor).isActive = true
containerView.heightAnchor.constraint(equalToConstant: 200).isActive = true
containerView.widthAnchor.constraint(equalToConstant: 1080).isActive = true
Why isn't my content scrolling?
For it to scroll, the containerView must be larger than the scrollView. Your error is that you have set the constraints such that the containerView is the same width and height as the scrollView, and that is why your content isn't scrolling.
If you want it to scroll horizontally, the width of the containerView must be larger than the scrollView's width. You can do this in one of two ways:
Specify an explicit constant width for the containerView that is larger than the scrollView's width.
OR
Chain the subviews of the containerView from left to right with the left most being constained to the leading edge of the containerView. Fully specify the widths of the subviews, and place distance contraints between the subviews. The rightmost subview must have an offset from the trailing edge of the containerView. By doing this, Auto Layout can compute the width of the containerView and set the contentSize of the scrollView.
Mini project: update
This is a version of your mini project which uses a chain of constrained views to define the containerView's width. The key is the final constraint after the for loop in viewDidLoad() which connects the last button's trailingAnchor (aka startPoint) to the containerView's trailingAnchor. This completes the chain of contraints and buttons which connect the leading edge of the containerView with the trailing edge of containerView. With this, Auto Layout is able to compute the width of the containerView and establish the contentSize of the scrollView.
import UIKit
import PlaygroundSupport
class FilterViewController: UIViewController {
var filterView: UIView!
var scrollView: UIScrollView!
var containerView: UIView!
override func loadView() {
filterView = UIView()
view = filterView
view.backgroundColor = #colorLiteral(red: 0.909803926944733, green: 0.47843137383461, blue: 0.643137276172638, alpha: 1.0)
scrollView = UIScrollView()
scrollView.backgroundColor = #colorLiteral(red: 0.474509805440903, green: 0.839215695858002, blue: 0.976470589637756, alpha: 1.0)
view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 40).isActive = true
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
scrollView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.25).isActive = true
scrollView.isScrollEnabled = true
containerView = UIView()
containerView.backgroundColor = #colorLiteral(red: 0.176470592617989, green: 0.498039215803146, blue: 0.756862759590149, alpha: 1.0)
scrollView.addSubview(containerView)
containerView.translatesAutoresizingMaskIntoConstraints = false
// This is key: connect all four edges of the containerView to
// to the edges of the scrollView
containerView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
// Making containerView and scrollView the same height means the
// content will not scroll vertically
containerView.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
}
class Buttons {
let button = UIButton()
init(titleText: String) {
button.backgroundColor = #colorLiteral(red: 0.976470589637756, green: 0.850980401039124, blue: 0.549019634723663, alpha: 1.0)
button.setTitle(titleText, for: .normal)
}
}
override func viewDidLoad() {
super.viewDidLoad()
let b1 = Buttons(titleText: "one")
let b2 = Buttons(titleText: "two")
let b3 = Buttons(titleText: "three")
let b4 = Buttons(titleText: "four")
let b5 = Buttons(titleText: "five")
let buttonArray = [b1, b2, b3, b4, b5]
var startPoint = containerView.leadingAnchor
for btn in buttonArray {
let theBtn = btn.button
containerView.addSubview(theBtn)
theBtn.translatesAutoresizingMaskIntoConstraints = false
theBtn.leadingAnchor.constraint(equalTo: startPoint, constant: 20).isActive = true
theBtn.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
theBtn.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
theBtn.widthAnchor.constraint(equalTo: theBtn.heightAnchor).isActive = true
startPoint = theBtn.trailingAnchor
}
// Complete the chain of constraints
containerView.trailingAnchor.constraint(equalTo: startPoint, constant: 20).isActive = true
}
}
let filterViewController = FilterViewController()
PlaygroundPage.current.liveView = filterViewController
I've created a stack view programmatically and I added a view which I've created programmatically too to it. But when I try to add a second view it doesn't work.
Here's my code:
#IBOutlet weak var codingScrollView: UIView!
let codeStackView = UIStackView()
var codeViews = [CodeView]()
let codeView1 = CodeView(name: "Lennart", date: "13/05/2002", code: "Just some code")
let codeView2 = CodeView(name: "Nina", date: "01/07/1999", code: "Also some code")
The codingScrollView is the contentview I've added to a UIScrollView.
The codeStackView is the one I've described before
The codeViews array is being used to add the views to the stackview.
Here's the viewDidLoad method:
codeViews.append(codeView1)
codeViews.append(codeView2)
codingScrollView.addSubview(codeStackView)
codingScrollView.backgroundColor = UIColor(red: 226/255, green: 226/255, blue: 226/255, alpha: 1)
codeStackView.centerXAnchor.constraint(equalTo: codingScrollView.centerXAnchor)
codeStackView.centerYAnchor.constraint(equalTo: codingScrollView.centerYAnchor)
codeStackView.translatesAutoresizingMaskIntoConstraints = false
codeStackView.spacing = 10
codeStackView.axis = .horizontal
codeStackView.alignment = .center
for i in 0...codeViews.count - 1 {
codeStackView.addSubview(codeViews[i])
codeStackView.addArrangedSubview(codeViews[i])
}
But if I run the app it won't show the second view, it only shows one of them.
Thank you very much, I really appreciate any kind of help
Try adding the codeView{1,2} to the stack view first then add the codeStackView to the codingScrollView.
Also, be sure to set codeStackView.translatesAutoresizingMaskIntoConstraints = false before doing any constraints.
codeViews.append(codeView1)
codeViews.append(codeView2)
for i in 0...codeViews.count - 1 {
codeStackView.addSubview(codeViews[i])
codeStackView.addArrangedSubview(codeViews[i])
}
codeStackView.translatesAutoresizingMaskIntoConstraints = false
codeStackView.centerXAnchor.constraint(equalTo: codingScrollView.centerXAnchor)
codeStackView.centerYAnchor.constraint(equalTo: codingScrollView.centerYAnchor)
codeStackView.spacing = 10
codeStackView.axis = .horizontal
codeStackView.alignment = .center
codingScrollView.addSubview(codeStackView)
codingScrollView.backgroundColor = UIColor(red: 226/255, green: 226/255, blue: 226/255, alpha: 1)
I've got a MainViewController where I'm loading a slideout-menu. The MainViewController contains a static TopView and a ContentView where different child controllers or views are loaded, depending on which menu entry was selected.
There is a button inside one of the children is loaded, but it is not working.
When I start the app with the ViewController including the button, set to "is initial View Controller", everything works properly.
When starting the app with the MainViewController as initial View Controller with a loaded child, the button is not working (it is loaded in the view, but not reacting).
Any suggestions how I can make this work?
MainViewController loading of Child View
class MainViewController: UIViewController, SideBarDelegate {
var contentView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
....
contentView.backgroundColor = UIColor(red: 70/255, green: 174/255, blue: 253/255, alpha: 1)
contentView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(contentView)
contentView.topAnchor.constraint(equalTo: statusBarView.bottomAnchor).isActive = true
contentView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
contentView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
contentView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
contentView.layoutIfNeeded()
}
func sideBarDidSelectButtonAtIndex(_ index: Int) {
...
if index == 0{
statusBarLabel.text = "First"
let controller:FirstViewController = storyboard!.instantiateViewController(withIdentifier: "First") as! FirstViewController
controller.view.frame = ContentView.bounds
controller.willMove(toParentViewController: self)
contentView.addSubview(controller.view)
controller.didMove(toParentViewController: self)
print("touched index 0")
} else if index == 1{
// index is 1
}
}
FirstViewController
class FirstViewController: UIViewController, UIScrollViewDelegate {
let addButton = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1)
addButton.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 60)
addButton.clipsToBounds = true
addButton.setTitleColor(UIColor.white, for: .normal)
addButton.backgroundColor = UIColor(red: 102/255, green: 204/255, blue: 255/255, alpha: 1)
addButton.setTitle("add feed", for: .normal)
addButton.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: UIFontWeightRegular)
self.view.addSubview(AddButton)
addButton.layoutIfNeeded()
addButton.addTarget(self, action: #selector(touchUpAddButton), for: UIControlEvents.touchUpInside)
addButton.addTarget(self, action: #selector(touchDownAddButton), for: UIControlEvents.touchDown)
func touchUpAddButton() {
addButton.backgroundColor = UIColor(red: 102/255, green: 204/255, blue: 255/255, alpha: 1)
}
func touchDownAddButton() {
addButton.backgroundColor = UIColor(red: 70/255, green: 174/255, blue: 253/255, alpha: 1)
}
}
While adding the view in the container you don't have to use addSubview function, that the FirstViewController functionality is not working.
Use below code:
let newViewController:FirstViewController = storyboard!.instantiateViewController(withIdentifier: "First") as! FirstViewController
let oldViewController = childViewControllers.last! as UIViewController
oldViewController.willMove(toParentViewController: nil)
addChildViewController(newViewController)
transition(from: oldViewController, to: newViewController, duration: 0.25, options: .transitionCrossDissolve, animations:{ () -> Void in
// nothing needed here
}, completion: { (finished) -> Void in
oldViewController.removeFromParentViewController()
newViewController.didMove(toParentViewController: self)
})
You can change the duration, it used for animation
Update your functions to these
func TouchUpAddButton(sender: UIButton){
addButton.backgroundColor = UIColor(red: 102/255, green: 204/255, blue: 255/255, alpha: 1)
}
func TouchDownAddButton(sender: UIButton) {
addButton.backgroundColor = UIColor(red: 70/255, green: 174/255, blue: 253/255, alpha: 1)
}
And change your code of adding the target to
addButton.addTarget(self, action: #selector(FirstViewController.touchUpAddButton(_:)), for: .touchDown)
addButton.addTarget(self, action: #selector(FirstViewController.touchDownAddButton(_:)), for: .touchDown)
First solution:
Remove an autolayout constrains
Second solution:
Button is not performing an action because a child view controller view should be added directly to a container controller view (in your case: MainViewController view) and not via an intermediate view (in your case: contentView)