I'm making a custom view and it contains a UIScrollView. But this scroll view does not scroll.
The view hierarchy is as follows:
- mainView
- UIScrollView
- contentView
A picture for illustration purposes
Here is my custom view code:
class MyCustomView: UIView {
#IBOutlet var mainView: UIView!
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var scrollViewContetnView: UIView!
// MARK: - Methods
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.customInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.customInit()
}
// MARK: Custom
func customInit() {
Bundle.main.loadNibNamed("EmoKeyboard", owner: self, options: nil)
self.addSubview(mainView)
self.mainView.frame = self.bounds
self.mainView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
func makeTabItem(count: Int) {
for i in 0...count {
let icon = UIButton()
icon.frame.size = CGSize(width: 28, height: 28)
icon.center.y = self.scrollViewContentView.center.y
icon.frame.origin.x = 10 + (CGFloat(i) * 28) + (CGFloat(i) * 10)
icon.backgroundColor = UIColor.black
self.scrollViewContentView.addSubview(icon)
}
}
}
What am I doing wrong?
You have to manually set contentSize of your scrollView based on buttons count or for every button add constraints.
Another possible(!) easier way is adding UIStackView as subview of your scrollView and add each button with height/width constraints to it.
Add contentSize:
scrollView.contentSize = CGSize(width: 0, height: 900) //You can use self view size height to set height means replace 900 according to your requirment
Every time you add a UIButton to your scrollViewContentView, you should update the width of the scrollViewContentView, because its width should be equal to the width of all the UIButton items that you are adding to it plus the sum of spacing between the items.
calculate the content rect in
ViewController ~> viewDidLayoutSubviews
var contentRect = CGRect.zero
for view in contentView.subviews {
contentRect = contentRect.union(view.frame)
}
contentRect = contentRect.union(padding)
apply the rect
scrollView.contentSize = contentRect.size
Related
I can't figure out how to set constraints for a scrollView with an imageView inside.
I am using the scrollView with a pageConroller to swipe thru a bunch of images.
See my layout in the picture below.
// Code for imageView
for index in 0..<drinksImagesArray.count {
frame.origin.x = scrollView.frame.size.width * CGFloat(index)
frame.size = scrollView.frame.size
let imageView = UIImageView(frame: frame)
imageView.contentMode = .scaleAspectFit
imageView.image = UIImage(named: imagesArray[index].name)
self.scrollView.addSubview(imageView)
}
scrollView.contentSize = CGSize(width: scrollView.frame.size.width * CGFloat(imagesArray.count), height: scrollView.frame.size.height)
scrollView.delegate = self
Any suggestions? Thank you!
Layout
You will have much better luck using auto-layout --- it can handle all of the frame sizes and .contentSize for you.
Here's a quick example - it uses a view controller with a scroll view added in Storyboard, so it should be pretty easy for you to integrate with your code:
class ScrollingImagesViewController: UIViewController {
#IBOutlet var scrollView: UIScrollView!
var drinksImagesArray: [String] = []
override func viewDidLoad() {
super.viewDidLoad()
// however you're populating your array...
drinksImagesArray = [
"drink1",
"drink2",
"drink3",
// etc...
]
// create a horizontal stack view
let stack = UIStackView()
stack.axis = .horizontal
stack.alignment = .fill
stack.distribution = .fillEqually
stack.spacing = 0
// add the stack view to the scroll view
stack.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(stack)
// use scroll view's contentLayoutGuide for content constraints
let svCLG = scrollView.contentLayoutGuide
NSLayoutConstraint.activate([
// stack view constrained Top / Bottom / Leading / Trailing of scroll view CONTENT guide
stack.topAnchor.constraint(equalTo: svCLG.topAnchor),
stack.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor),
stack.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor),
stack.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor),
// stack view height == scroll view FRAME height
stack.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor),
])
// create image views and add them to the stack view
drinksImagesArray.forEach { imgName in
let v = UIImageView()
v.backgroundColor = .lightGray
v.contentMode = .scaleAspectFit
// make sure we load a valid image
if let img = UIImage(named: imgName) {
v.image = img
}
stack.addArrangedSubview(v)
}
// stack distribution is set to .fillEqually, so we only need to set the
// width constraint on the first image view
// unwrap it
if let firstImageView = stack.arrangedSubviews.first {
firstImageView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true
}
}
}
Edit
After reviewing your Storyboard...
Auto-layout doesn't seem to like it when you add a UINavigationBar and a UIToolbar and a UIScrollView as subviews. In particular, it appears to confuse the scroll view's frame related constraints.
The fix is to first add constraints for your scroll view:
Top to Navigation Bar Bottom
Bottom to Page Control Top
Leading and Trailing to safe-area
Storyboard / Interface builder will complain that the scroll view is not configured properly. You can either ignore that, or select the scroll view and set Ambiguity to Never Verify:
Then, in your view controller class, we need to create a height constraint for the stack view we're adding to the scroll view, and set that height constant in viewDidLayoutSubviews().
Here's the full code:
//
// WasserhaushaltViewController.swift
// deSynthTheOceans
//
// Created by robinsonhus0 on 24.03.20.
// Copyright © 2020 robinsonhus0. All rights reserved.
//
import UIKit
import AVFoundation
import Charts
import FSCalendar
import HealthKit
struct WasserSpeicher: Codable {
let wassermenge: Double
let speicherdatum: String
let speicherStelle: Double
}
class WasserhaushaltViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var diagrammView: UIView!
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var pageControl: UIPageControl!
let drinksImagesArray = ["tapWater", "water", "milk", "cola", "coffee", "tea", "juice", "beer"]
var imageIndex = Int()
struct Drinks {
var name: String
var tagesMengeFactor: Double
var gesamtMengeFactor: Double
}
var frame = CGRect(x: 0, y: 0, width: 0, height: 0)
var pageNumber = CGFloat()
#IBOutlet weak var todaysWaterConsumptionLabel: UILabel!
#IBOutlet weak var waterGoalProgress: UIProgressView!
#IBOutlet weak var waterGoalLabel: UILabel!
#IBOutlet weak var wasserMengeStepper: UIStepper!
#IBOutlet weak var motivationTextView: UITextView!
#IBOutlet weak var wasserglasButton: UIBarButtonItem!
#IBOutlet weak var kleineFlascheButton: UIBarButtonItem!
#IBOutlet weak var grosseFlascheButton: UIBarButtonItem!
#IBOutlet weak var overAllWaterConsumptionLabel: UILabel!
// added
let scrollingImagesStackView = UIStackView()
var stackHeightConstraint: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
pageControl.numberOfPages = drinksImagesArray.count
setupDrinkImages()
}
func setupDrinkImages() {
// set stack view properties
scrollingImagesStackView.axis = .horizontal
scrollingImagesStackView.alignment = .fill
scrollingImagesStackView.distribution = .fillEqually
scrollingImagesStackView.spacing = 0
// add the stack view to the scroll view
scrollingImagesStackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(scrollingImagesStackView)
// use scroll view's contentLayoutGuide for content constraints
let svCLG = scrollView.contentLayoutGuide
NSLayoutConstraint.activate([
// stack view constrained Top / Bottom / Leading / Trailing of scroll view CONTENT guide
scrollingImagesStackView.topAnchor.constraint(equalTo: svCLG.topAnchor),
scrollingImagesStackView.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor),
scrollingImagesStackView.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor),
scrollingImagesStackView.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor),
])
// create the stack view height constraint - it will be updated in viewDidLayoutSubviews
stackHeightConstraint = scrollingImagesStackView.heightAnchor.constraint(equalToConstant: 0)
stackHeightConstraint.isActive = true
// create image views and add them to the stack view
drinksImagesArray.forEach { imgName in
let v = UIImageView()
v.backgroundColor = .orange
v.contentMode = .scaleAspectFit
// make sure we load a valid image
if let img = UIImage(named: imgName) {
v.image = img
}
scrollingImagesStackView.addArrangedSubview(v)
}
// stack distribution is set to .fillEqually, so we only need to set the
// width constraint on the first image view
// unwrap it
if let firstImageView = scrollingImagesStackView.arrangedSubviews.first {
firstImageView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true
}
scrollView.delegate = self
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// since we have a UINavigationBar and a UIToolBar in the view hierarchy,
// we need to set this here
// Note: if the view size changes
// stack view height == scroll view FRAME height
stackHeightConstraint.constant = scrollView.frame.height
}
// func setupDrinkImages() {
// for index in 0..<drinksImagesArray.count {
// frame.origin.x = scrollView.frame.size.width * CGFloat(index)
// frame.size = scrollView.frame.size
//
// let imageView = UIImageView(frame: frame)
// imageView.contentMode = .scaleAspectFit
// imageView.image = UIImage(named: drinksImagesArray[index])
// self.scrollView.addSubview(imageView)
// }
// scrollView.contentSize = CGSize(width: scrollView.frame.size.width * CGFloat(drinksImagesArray.count), height: scrollView.frame.size.height)
// scrollView.delegate = self
// }
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
pageControl.currentPage = Int(pageNumber)
}
}
Your (modified) Storyboard is too big to add here... if you have any trouble with the changes mentioned above, here it is: https://pastebin.com/2Q1uFUgL
I have a custom text field and i want to place image on its left side, but when ever i am running the app, the size of image is not adjusting , i.e its full scale and not taking the width and height being provided. The code and pictures are attached
ViewController class:(In which text field is present)
import UIKit
class Signup2ViewController: UIViewController {
#IBOutlet weak var Email: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
Email.leftViewMode = .always
let imageview = UIImageView()
imageview.frame = CGRect(x: 0, y: 0, width: 5.0, height: 5.0)
view.addSubview(imageview)
let icon = UIImage(named: "c.png")
imageview.image = icon
Email.leftView = imageview
// Do any additional setup after loading the view.
}
}
To set the frame for your imageView you need to subclass UITextField and override leftViewRect(forBounds:). The code below will result in a 20x20 view offset 10 points from the left and centered vertically.
class AwesomeTextField: UITextField {
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
let leftViewHeight: CGFloat = 20
let y = bounds.size.height / 2 - leftViewHeight / 2
return .init(x: 10, y: y, width: leftViewHeight, height: leftViewHeight)
}
}
To add an imageView to the textField you would do this:
class ViewController: UIViewController {
#IBOutlet weak var textField: AwesomeTextField!
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView()
imageView.image = UIImage(named: "c")
textField.leftView = imageView
textField.leftViewMode = .always
}
}
Make sure you set the appropriate class name for the textField in the identity inspector of your storyboard.
I have been researching for 2 days but I haven't found any solution to this problem:
I am loading a view from a Xib, and applying auto layout to it. The view is showing right and the auto layout is working fine. But when I try to get the frame of the subviews after the auto layout it is not working. I need the frame of the subview to make the redView circular.
I am loading the view from the Xib when it is initialized and add it as subview with auto layout (I have already tried many different things and check that the prints that I am doing is in the layoutSubviews.
class ReusableView: UIView {
#IBOutlet weak var redView: UIView!
var mainView: UIView?
// MARK: - Initializers.
override init(frame: CGRect) {
super.init(frame: frame)
loadXIB()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadXIB()
}
override func layoutSubviews() {
super.layoutSubviews()
print ("Self subviews \(self.subviews)")
print ("MainView frame \(mainView?.frame)")
print ("Red View frame \(redView?.frame)")
}
func loadXIB() {
guard let view = loadView(String(describing: type(of: self))) else { return }
print ("View loaded from nib \(view.frame)")
view.translatesAutoresizingMaskIntoConstraints = false
view.subviews.forEach {
$0.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
addSubview(view)
NSLayoutConstraint.activate([
view.topAnchor.constraint(equalTo: self.topAnchor),
view.leadingAnchor.constraint(equalTo: self.leadingAnchor),
view.trailingAnchor.constraint(equalTo: self.trailingAnchor),
view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
])
mainView = view
}
func loadView(_ nibName: String) -> UIView? {
if nibName.isEmpty {
return nil
}
let bundle = Bundle(for: type(of: self) as AnyClass)
let nib = UINib(nibName: nibName, bundle: bundle)
if let view = nib.instantiate(withOwner: self, options: nil).first as? UIView {
return view
}
return nil
}
}
The result of the prints:
View loaded from nib (0.0, 0.0, 375.0, 667.0)
Self subviews [<UIView: 0x7ff232216880; frame = (0 0; 150 150); autoresize = W+H; layer = <CALayer: 0x60800022f4e0>>]
MainView frame Optional((0.0, 0.0, 150.0, 150.0))
Red View frame Optional((0.0, 20.0, 375.0, 647.0))
MainView subviews Optional([<UIView: 0x7ff232216690; frame = (0 20; 375 647); autoresize = W+H; layer = <CALayer: 0x60800022f520>>])
As we see the mainView has been resized but not his subview. (Then when the view is printed it works completely fine, I have been doing it with more complex views but I have never faced the problem of getting the frame inside de UIView before.)
I have discovered this workaround, but I still want to know if there is a more elegant way.
After loading the view I store the original size of the xib in a variable called XibSize
guard let view = loadView(String(describing: type(of: self))) else { return }
xibSize = view.frame.size
And then I have created a method, that takes as a parameter the size that you want to be recalculated after applying the after layout:
(As we have the original size (XibSize), and the recalculated size of the mainView), we can calculate the size after applying auto layout of the subviews.)
func getSizeAfterAutoLayout(sizeToRecalculate: CGSize) -> CGSize? {
guard let mainView = mainView, let xibFrame = xibFrame else { return nil }
let width = sizeToRecalculate.width * mainView.frame.size.width / xibSize.width
let height = sizeToRecalculate.height * mainView.frame.size.height / xibSize.height
return CGSize(width: width, height: height)
}
I have a UIScrollView. Right now I am just setting it to double the height of the screen (frame in this case is just UIScreen.mainScreen().bounds):
class VenueDetailView: UIScrollView {
required init?(coder aDecoder: NSCoder) { fatalError("Storyboard makes me sad.") }
override init(frame: CGRect) {
super.init(frame: frame)
contentSize = CGSize(width: frame.width, height: frame.height*2) <----------------
backgroundColor = UIColor.greenColor()
}
func addBannerImage(imageUrl: NSURL) {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: UIScreen.mainScreen().bounds.width, height: 300))
// TODO: Make this asynchronous
// Nice to have: cache the image
if let data = NSData(contentsOfURL: imageUrl) {
imageView.image = UIImage(data: data)
}
addSubview(imageView)
}
}
However, I just want it to be the size of all the contents inside it. How would I do this? Does this mean I have to set the contentSize after I add all the subviews?
Does this mean I have to set the contentSize after I add all the subviews?
Basically yes. Your goal should be to make the scroll view small and the content size big. That is what makes a scroll view scrollable: its contentSize is bigger than its own bounds size. So, set the scroll view itself to have a frame that is the same as the bounds of its superview, but then set its contentSize to embrace all its subviews.
I need to make the flowers image flipping. Images must be with the same height, but the width to set automatically. I want them to scroll right and left
Here is my code:
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var scrollView: UIScrollView!
var images = [UIImage]()
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
for i in 1...3 {
images.append(UIImage(named: "bild-0\(i).jpg")!)
}
var i: CGFloat = 0
var origin: CGFloat = 0
let height: CGFloat = scrollView.bounds.height
for image in images {
let imageView = UIImageView(frame: CGRectZero)
imageView.frame.size.height = height
imageView.image = image
imageView.sizeToFit()
imageView.frame.origin.x = origin
println(imageView.frame.size.width)
println(imageView.frame.origin.x)
println(imageView.frame.size.height)
println("asd")
origin = origin + imageView.frame.size.width
i++
scrollView.addSubview(imageView)
}
scrollView.contentSize.width = origin
scrollView.bounces = false
scrollView.pagingEnabled = false
}
}
Storyboard:
Problem (Padding from top! - Red color - is a background for UIScrollView):
Images are 765x510 300x510 and so on
UIScrollView height is 170
This is caused by scrolling insets:
Click your ViewController on Storyboard and go to file inspector, and you should see this dialog:
Untick the Adjust Scroll View Insets.