i have a ViewController that containts View and One more View inside of it
Scroll works fine when i do it by my mouse, but if i use method scrollView.setContentOffset nothing happens.
I tried to check if scroll available using scrollView.delegate = works fine
UiViewController
class WishListViewController: UIViewController {
private lazy var wishListHeaderView: WishListHeaderView = {
let view = WishListHeaderView()
view.delegate = self
return view
}()
}
UiView
class WishListHeaderView: UICollectionReusableView {
private lazy var wishListNavigationView: WishListNavigationView = {
let view = WishListNavigationView()
view.delegate = self
return view
}()
}
Current view with scroll, that is not working
private lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.showsHorizontalScrollIndicator = false
return scrollView
}()
private lazy var tabsStackView: UIStackView = {
let stackView = UIStackView()
stackView.distribution = .fill
stackView.axis = .horizontal
stackView.spacing = 8
stackView.backgroundColor = PaletteApp.grayBackgroundButton
return stackView
}()
private func commonInit() {
addSubview(scrollView)
scrollView.snp.makeConstraints { make in
make.left.right.top.bottom.equalToSuperview().inset(16)
make.height.equalTo(38)
}
scrollView.addSubview(tabsStackView)
tabsStackView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
}
.........
Here is method in this view, debagger shows that i am in this method. And after this if i use print i see scrollviewOffset (100, 0)
func scrollToFirstTab() {
self.scrollView.setContentOffset(CGPoint(x: 100, y: 0), animated: true)
}
Where is a problem? Thank you
Content offset is not the correct method, offset is the gap between content and scroll view itself. For more about content offset, check this answer.
You need to use func scrollRectToVisible(CGRect, animated: Bool).
CGRect.zero to scroll to top.
Related
i have element in stackView and i need to scroll to it but methods are nor working.
Here properties
private var tabs: [WishListTabItemView] = []
private lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.showsHorizontalScrollIndicator = false
return scrollView
}()
private lazy var tabsStackView: UIStackView = {
let stackView = UIStackView()
stackView.distribution = .fill
stackView.axis = .horizontal
return stackView
}()
Here is how i configure view
func configure(withTabs tabs: WishListTabsModel) {
self.tabs = []
commonInit()
tabs.tabs.forEach({ tab in
let view = WishListTabItemView()
view.configure(tab: tab)
view.isSelected = tab.isActive
self.tabs.append(view)
tabsStackView.addArrangedSubview(view)
})
}
Here is method of scroll.
self.tabs.forEach({ oneTab in
if oneTab.isSelected {
// self.scrollView.setContentOffset(CGPoint(x: oneTab.frame.origin.x, y: 0), animated: true)
self.scrollView.scrollRectToVisible(oneTab.frame, animated: true)
// self.scrollView.scrollToView(view: oneTab, animated: false)
}
})
These methods scroll to begin, but isSelected view in the end:
self.scrollView.scrollToView(view: oneTab, animated: false)
self.scrollView.setContentOffset(CGPoint(x: oneTab.frame.origin.x, y: 0), animated: true)
This not works at all:
self.scrollView.scrollRectToVisible(oneTab.frame, animated: true)
upd: i got what po oneTab.frame.origin.x is 0.0
how can i get right frame?
I have a sheet that is presented when a button is pressed:
struct Button: View {
#State isPresented = false
var body: some View {
Button(action: { self.isPresented.toggle() },
label: { Text("Text Label") }
).sheet(isPresented: $isPresented, content: {
//sheet contents in here
})
}
}
The class seen below is essentially the view in UIKit (I removed some of the code from the functions because it doesn't really have anything to do with the problem, but I kept the function names in there with descriptions so you can interpret what it's doing)
class CustomCalloutView: UIView, MGLCalloutView {
lazy var leftAccessoryView = UIView()
lazy var rightAccessoryView = UIView()
weak var delegate: MGLCalloutViewDelegate?
//MARK: Subviews -
let personImg: UIImageView = {
let img = UIImage(systemName: "person.fill")
var imgView = UIImageView(image: img)
//imgView.tintColor = UIColor(ciColor: .black)
imgView.translatesAutoresizingMaskIntoConstraints = false
return imgView
}()
let clockImg: UIImageView = {
let img = UIImage(systemName: "clock")
var imgView = UIImageView(image: img)
//imgView.tintColor = UIColor(ciColor: .black)
imgView.translatesAutoresizingMaskIntoConstraints = false
return imgView
}()
//Initialization of the view
required init() {
super.init(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: UIScreen.main.bounds.width * 0.75, height: 130)))
setup()
}
//other initializer
required init?(coder decoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//essentially just positioning the view
override var center: CGPoint {
set {
var newCenter = newValue
newCenter.y -= bounds.midY
super.center = newCenter
}
get {
return super.center
}
}
//setting it up
func setup() {
// setup this view's properties
self.backgroundColor = UIColor.clear
self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(CustomCalloutView.calloutTapped)))
// And the subviews
self.addSubview(personImg)
self.addSubview(clockImg)
// Add Constraints to subviews
//Positioning the clock image
clockImg.topAnchor.constraint(equalTo: self.separatorLine.bottomAnchor, constant: spacing).isActive = true
clockImg.leftAnchor.constraint(equalTo: self.leftAnchor, constant: spacing).isActive = true
clockImg.rightAnchor.constraint(equalTo: self.timeLabel.leftAnchor, constant: -spacing / 2).isActive = true
clockImg.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
//Positioning the person image
personImg.topAnchor.constraint(equalTo: self.timeLabel.bottomAnchor, constant: spacing / 2).isActive = true
personImg.leftAnchor.constraint(equalTo: self.leftAnchor, constant: spacing).isActive = true
personImg.rightAnchor.constraint(equalTo: self.peopleLabel.leftAnchor, constant: -spacing / 2).isActive = true
personImg.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
}
func presentCallout(from rect: CGRect, in view: UIView, constrainedTo constrainedRect: CGRect, animated: Bool)
//presenting the view
}
func dismissCallout(animated: Bool) {
//dismissing the view
}
#objc func calloutTapped() {
//respond to the view being tapped
}
}
When the sheet is presented and then dismissed, it causes other UI elements that are coded in UIKit (like text buttons, for example) to have their text turn color to the systemBlue UIColor...any idea how to fix this?
There is not enough code provided to test, but the reason might be in
struct Button: View { // << this custom view named as standard Button !!!
#State isPresented = false
it is named the same as standard SwiftUI component Button so this can confuse rendering engine.
Try to rename this (and others if you practice this) to something unique to your app, like MyButton or CustomButton, SheetButton, etc.
Trying to put UIViewController view to scrollview for all possible screen sizes.
class ScrollableContentViewController: UIViewController {
private lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.showsVerticalScrollIndicator = false
scrollView.showsHorizontalScrollIndicator = false
return scrollView
}()
private var contentView: UIView?
override func viewDidLoad() {
super.viewDidLoad()
guard let view = self.view else {
return
}
view.removeFromSuperview()
self.view = scrollView
scrollView.addSubview(view)
self.contentView = view.superview
if let contentView = view.superview {
view.translatesAutoresizingMaskIntoConstraints = false
view.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
view.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
}
let wc = view.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
wc.priority = UILayoutPriority(rawValue: 1000)
wc.isActive = true
let hc = view.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
hc.priority = UILayoutPriority(rawValue: 700)
hc.isActive = true
}
}
And here is my test ViewController in storyboard
enter image description here
The problem
if I put hc.priority = UILayoutPriority(rawValue: 100), everything works on small phones with scrolling, but on large screens autolayout loop happens
when I do hc.priority = UILayoutPriority(rawValue: 1000) everything works on large phones (no scrolling) and no scrolling on small screens - that is works as designed.
The question
Why hc.priority = UILayoutPriority(rawValue: 100) causes layout loop? But at the same time working good on small screens.
Tried to debug it, but got no sufficient results
After struggling with programmatic dynamic UI elements for the last few weeks I decided I would give UIstackView a try.
I want custom UIView classes to occupy the stackview with different heights based upon user Input I would remove, add views on the fly.
I found out that stackViews base their 'cell' height upon the UI element's intrinsic content size. However, UIViews do not have one. I searched far and wide and found out that I need to override the View's intrisicContentsize function with one where I can explicitly set the width and height.
However results are very unpredictable and I'm sure there is some little thing that I just do not know dat causes this weird behaviour. Since I'm new to the language and there are a LOT of gotcha's I'm just gonna paste the code here and hope you'll be able to spot what I'm doing wrong.
I've read the docs ofc, a lot of articles, they all point to that override funcion that does not seem to work form me.
This is my mainViewController class;
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
var bv = BackButtonView(frame: CGRect.zero, image: UIImage(named: "backArrow.png")!)
var redView : UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .red
return view
}();
var blueView : UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .blue
return view
}();
let stack : UIStackView = {
let stack = UIStackView();
stack.translatesAutoresizingMaskIntoConstraints = false;
stack.axis = .vertical
stack.distribution = .fillProportionally;
stack.spacing = 8
return stack;
}();
override func viewDidLoad() {
let view = UIView(frame: UIScreen.main.bounds)
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .white
self.view = view
self.view.addSubview(stack)
createLayout()
bv.intrinsicContentSize
stack.addArrangedSubview(bv)
print(bv.frame)
print(bv.intrinsicContentSize)
stack.layoutIfNeeded()
stack.addArrangedSubview(redView)
stack.addArrangedSubview(blueView)
}
private func setConstraints(view: UIView) -> [NSLayoutConstraint] {
return [
view.heightAnchor.constraint(equalToConstant: 50),
]
}
private func createLayout() {
stack.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
stack.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
stack.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
stack.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
}
}
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = MyViewController()
Now here's my custom UIClass that is giving me all this trouble:
import UIKit
public class BackButtonView : UIView {
public var size = CGSize(width: 10, height: UIView.noIntrinsicMetric)
override open var intrinsicContentSize: CGSize {
return size
}
var button : UIButton;
public init(frame: CGRect, image: UIImage) {
button = UIButton()
super.init(frame : frame);
self.translatesAutoresizingMaskIntoConstraints = false;
self.backgroundColor = .black
self.addSubview(button)
setupButton(image: image);
print(button.intrinsicContentSize)
}
let backButtonTrailingPadding : CGFloat = -18
lazy var buttonConstraints = [
button.heightAnchor.constraint(equalToConstant: 50),
button.widthAnchor.constraint(equalToConstant: 50),
button.centerYAnchor.constraint(equalTo: self.centerYAnchor),
button.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: backButtonTrailingPadding),
]
private func setupButton(image: UIImage) {
self.button.translatesAutoresizingMaskIntoConstraints = false;
self.button.setImage(image, for: .normal);
self.button.contentMode = .scaleToFill
NSLayoutConstraint.activate(buttonConstraints)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
struct anchors {
var topAnchor = NSLayoutConstraint()
var bottomAnchor = NSLayoutConstraint()
var leadingAnchor = NSLayoutConstraint()
var trailingAnchor = NSLayoutConstraint()
}
}
You can see that the specified width in the size proprrty gets ignored.
Under the above conditions., this is the output
If I now change the my custom UIClass's intrisiContentSize height to anyting else, this happens:
public var size = CGSize(width: UIView.noIntrinsicMetric, height: 10)
override open var intrinsicContentSize: CGSize {
return size
}
result:
Please help me figure out what is and isn't going on
The final screen should look something like this:
I'm new to working with ScrollViews, and I'm doing it all programatically. I must be missing something super simple, but when I have no subviews, the scrollview shows up properly and scrolls up and down. But any time I add any subviews, the whole thing refuses to show up at all.
class DetailedPostScrollView: UIScrollView {
let topLabel: UILabel = {
let label = UILabel()
label.text = "this is the top"
return label
}()
let bottomLabel: UILabel = {
let label = UILabel()
label.text = "this is the bottom"
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentSize = CGSize(width: frame.width, height: 2000)
alwaysBounceVertical = true
addSubviewUsingAutoLayout(topLabel, bottomLabel)
topLabel.centerXAnchor.constrain(to: self.centerXAnchor)
topLabel.widthAnchor.constrain(to: 200)
topLabel.heightAnchor.constrain(to: 50)
topLabel.topAnchor.constrain(to: self.topAnchor, with: 100)
bottomLabel.centerXAnchor.constrain(to: self.centerXAnchor)
bottomLabel.widthAnchor.constrain(to: 200)
bottomLabel.heightAnchor.constrain(to: 50)
bottomLabel.bottomAnchor.constrain(to: self.bottomAnchor)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
And in my viewController, I instantiate and add the scroll view
let detailedPostScrollView = DetailedPostScrollView(frame: UIScreen.main.bounds)
detailedPostScrollView.backgroundColor = UIColor.purple
view.addSubviewUsingAutoLayout(detailedPostScrollView)
Again, I"m sure it's something super simple but I checked out all the questions and tutorial videos and couldn't see where I"m going wrong. Thanks for your help.
Edit: It seems to work fine when I do it all programmatically from a viewcontroller, as follows :
let scrollView: UIScrollView = {
let sv = UIScrollView()
sv.contentSize = CGSize(width: view.frame.width, height: 2000)
sv.backgroundColor = UIColor.purple
return sv
}()
view.addSubviewUsingAutoLayout(scrollView)
scrollView.topAnchor.constrain(to: view.topAnchor, with: 100)
scrollView.leadingAnchor.constrain(to: view.leadingAnchor)
scrollView.trailingAnchor.constrain(to: view.trailingAnchor)
scrollView.bottomAnchor.constrain(to: view.bottomAnchor)
let topLabel: UILabel = {
let label = UILabel()
label.text = "this is the top"
return label
}()
scrollView.addSubviewUsingAutoLayout(topLabel)
topLabel.centerXAnchor.constrain(to: scrollView.centerXAnchor)
topLabel.widthAnchor.constrain(to: 200)
topLabel.heightAnchor.constrain(to: 50)
topLabel.topAnchor.constrain(to: scrollView.topAnchor)
Something is off when I create a custom scrollview and instantiate that in my vc.
Try this :
class ViewController : UIViewController , UIScrollViewDelegate{
var scrollView : UIScrollView! ;
var containerView = UIView();
var contentSize : CGSize {
get {
return CGSize(width: view.frame.width, height: 2000);
}
}
override func viewDidLoad() {
super.viewDidLoad();
setupScrollView();
setupItems();
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews();
self.scrollView.frame = self.view.bounds;
containerView.frame = CGRect(x: 0, y: 0, width: contentSize.width, height: contentSize.height);
}
private func setupScrollView() {
scrollView = UIScrollView();
scrollView.delegate = self;
scrollView.backgroundColor = .white;
scrollView.contentSize = contentSize;
self.view.addSubview(scrollView);
containerView.backgroundColor = .purple;
self.scrollView.addSubview(containerView);
}
private func setupItems() {
let topButton = UIButton();
topButton.translatesAutoresizingMaskIntoConstraints = false;
topButton.setTitle("TOP BUTTON", for: .normal);
topButton.setTitleColor(.white, for: .normal);
self.containerView.addSubview(topButton);
let bottomTextField = UITextField();
bottomTextField.translatesAutoresizingMaskIntoConstraints = false;
bottomTextField.borderStyle = .roundedRect;
bottomTextField.placeholder = "BOTTOM TEXT FIELD";
self.containerView.addSubview(bottomTextField);
topButton.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true;
topButton.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 50).isActive = true;
topButton.widthAnchor.constraint(equalToConstant: 100).isActive = true;
topButton.heightAnchor.constraint(equalToConstant: 50).isActive = true;
bottomTextField.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true;
bottomTextField.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -50).isActive = true;
bottomTextField.widthAnchor.constraint(equalToConstant: 200).isActive = true;
bottomTextField.heightAnchor.constraint(equalToConstant: 40).isActive = true;
}
}
Set the scroll view frame to view bound in viewDidLayoutViews instead of using the layout , and add a container view as a subview for scroll view and set the size to same content size for scroll view again in viewDidLayoutViews so when ever user rotate the phone he get the correct width , and finally add all your views to container view .