I have a Swift code
background_img_view.addSubview(background_image)
background_img_view.addSubview(usn)
profile_view.addSubview(PostsDiv)
profile_view.addSubview(PostDiv)
var scrollView: UIScrollView!
scrollView = UIScrollView(frame: view.bounds)
scrollView.contentSize = CGSize(width: self.view.frame.size.width, height: 1500)
scrollView.autoresizingMask = UIViewAutoresizing.flexibleHeight
scrollView.isScrollEnabled = true
scrollView.addSubview(profile_view)
view.addSubview(background_img_view)
view.addSubview(scrollView)
I tested this on my phone and scroll bar is showing, but when i scroll nothing changes, also i can't click on anything on the screen .
Full code http://pastebin.com/EXQeGMJ6
Related
I need to create a paging ScrollView which shows a sequence of images.
I created a ScrollView in the main view of the Storyboard and set this constraints (to center the ScrollView in the view):
Constraint
Then I activated paging and disabled the "Content layout guides" option.
Next, in the view class I set up the UIScrollViewDelegate delegate and I wrote the following code to show 3 images (they are 3 colored squares):
class ViewController: UIViewController, UIScrollViewDelegate {
// Outlet
#IBOutlet weak var scrollview: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
scrollview.delegate = self;
let infoArray = ["01", "02", "03"];
for i in 0..<infoArray.count {
let imageView = UIImageView();
imageView.contentMode = .scaleToFill;
imageView.image = UIImage(named: infoArray[i]);
let xPos = CGFloat(i) * scrollview.bounds.size.width;
imageView.frame = CGRect(x: xPos, y: 0, width: scrollview.bounds.size.width, height: scrollview.bounds.size.height);
imageView.layer.borderWidth = 1;
scrollview.contentSize.width = scrollview.frame.size.width * CGFloat(i+1);
scrollview.contentSize.height = scrollview.frame.size.height;
scrollview.addSubview(imageView);
}
scrollview.layer.borderWidth = 1;
}
}
I have set that the images must have the same width and height as the scrollview. But these are larger in the simulator (and in my iPhone 11) and therefore the display is incorrect. I show you the sequence of the 3 squares:
Page 1
Page 2
Page 3
Page 4
I can't understand where I'm wrong. Why don't the 3 images take the size of the scrollview?
Why are there 4 pages?
Thanks for your help
Okay, here is how you do it:
Your scrollview is created in storyboard and its layout is set. Make sure content layout guides is unchecked in the size inspector and paging is checked in the attribute inspector.
Add a stackview as a subview to your scrollview (this will act as the content view). Pin your stackView to all 4 edges of the scrollView.
Set Height and Width Equal to the scrollView height and width. Set the Width priority to 250. (that indicates that the scrollview will scroll horizontally)
Set the stackView to horizontal axis, fill alignment and fillEqually distribution.
Now, go back to viewDidLoad and add the following code below. ScrollViewContentView is the stackView that acts as a contentView for the scrollView. Note that since stackView is set to fillEqually, you only need set one of the image's width constraint.
scrollViewContentView.addArrangedSubview(image1)
scrollViewContentView.addArrangedSubview(image2)
scrollViewContentView.addArrangedSubview(image3)
image1.translatesAutoresizingMaskIntoConstraints = false
image2.translatesAutoresizingMaskIntoConstraints = false
image3.translatesAutoresizingMaskIntoConstraints = false
image1.backgroundColor = .blue
image2.backgroundColor = .yellow
image3.backgroundColor = .red
image1.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
I think you need to state the frame of the scrollview before you declare the imageViews x positions or widths.
class ViewController: UIViewController, UIScrollViewDelegate {
// Outlet
#IBOutlet weak var scrollview: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
scrollview.frame = view.frame // declared here
scrollview.delegate = self;
let infoArray = ["01", "02", "03"];
for i in 0..<infoArray.count {
let imageView = UIImageView();
imageView.contentMode = .scaleToFill;
imageView.image = UIImage(named: infoArray[i]);
let xPos = CGFloat(i) * scrollview.bounds.size.width;
imageView.frame = CGRect(x: xPos, y: 0, width: scrollview.bounds.size.width, height: scrollview.bounds.size.height);
imageView.layer.borderWidth = 1;
scrollview.contentSize.width = scrollview.frame.size.width * CGFloat(i+1);
scrollview.contentSize.height = scrollview.frame.size.height;
scrollview.addSubview(imageView);
}
scrollview.layer.borderWidth = 1;
}
}
I'm trying to add a background image that will scroll with my vertical scrollView. Before adding the background image, my scrollView only scroll vertically, but after setting the background image, the scrollView can now scroll horizontally and vertically as if the background image's width is greater than the scrollview's width
let scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.isDirectionalLockEnabled = true
view.isScrollEnabled = true
return view
}()
let backgroundIV: UIImageView = {
let imageView = UIImageView(image: UIImage(named: "background"))
imageView.contentMode = UIView.ContentMode.scaleToFill
return imageView
}()
The function I use to setup my view
private func setupContent() {
scrollViewHeight = viewHeight * 2
[scrollView].forEach { view.addSubview($0) }
scrollView.anchor(top: view.topAnchor, leading: view.leadingAnchor, bottom: view.bottomAnchor, trailing: view.trailingAnchor)
scrollView.contentSize = CGSize(width: 0, height: scrollViewHeight)
[backgroundIV].forEach { scrollView.addSubview($0) }
backgroundIV.anchor(top: scrollView.topAnchor, leading: scrollView.leadingAnchor, bottom: scrollView.bottomAnchor, trailing: scrollView.trailingAnchor, size: .init(width: 0, height: scrollViewHeight))
}
So how should i set my background image so that my scrollview won't scroll horizontally??
You have to set the right content sizes for your scrollView or adjust the content.
Set your imageView width equal to your scrollView's width. It will avoid scrollView horizontal scroll.
Please find the below code for setting the widthAchor.
imageView.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
After applying Vikram Parimi's answer and some further digging, there were two factors that effect my scrollview to become horizontal
The characteristics of constraints between Scroll View and view tells us: the alignment and the size are not contradicted anymore, both of which must be defined to eliminate ambiguity. Which I found out from https://medium.com/#tingyishih/ios-scrollview-constraints-8d8140d329a0
The other factor is that the bug only exist in iphone 11 pro max simulator and not iphone 8 simulator, which can be solve by using safeAreaLayoutGuide
if #available(iOS 11.0, *) {
imageView.widthAnchor.constraintEqualToAnchor(scrollView.safeAreaLayoutGuide.widthAnchor).active = true
} else {
imageView.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
}
I have a scroll view and an imageView at the top, I want to pin and make a stretchable image view but if I add this image view to the view the image won't disappear when the user scroll down the view and if I add the image to the scroll view this won't be pinned at the top when the user scroll down.
So how can I pin the image at the top and then when the user scroll down the image will disappear.
Like that: http://blog.enabled.com.au/stretchy-layouts-on-ios/ but not with his framework.
class LocalsVC: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
setNavBarSettings()
scrollView.delegate = self
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
view.addSubview(imageView)
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y = 300 - (scrollView.contentOffset.y + 300)
let height = min(max(y, 60), 400)
imageView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: height)
}
Add the image to the scrollView and not to the view: scrollView.addSubview(imageView).
I have got this code:
var scrollView: UIScrollView!
scrollView = UIScrollView(frame: self.view.bounds)
scrollView.backgroundColor = .white
scrollView.contentSize = CGSize(width:self.view.frame.width,height:self.view.frame.height+1000)
scrollView.autoresizingMask = .flexibleHeight
view.addSubview(scrollView)
scrollView.addSubview(profileInfWrapper)
scrollView.addSubview(PostsTab)
scrollView.addSubview(FollowersTab)
scrollView.addSubview(FollowingTab)
scrollView.addSubview(AboutTab)
scrollView.addSubview(collectionView)
But unfortunately this code is adding a scroller. But when it is scrolling, it doesn't change anything. All subvies of scrollView have constraints.
I think you need to enable scrolling.
scrollView.isScrollEnabled = true
I have a UIScrollView that contains a long image, whose height is way more than a screen could hold at the current time. Now I want to place buttons all over the image. However, some of the buttons are below the view that you see when you haven't scrolled yet and after scrolling to the bottom of the image, the button I currently press is the one at the top that occupies the position of the screen itself when one hasn't scrolled yet. In short, not the button at the bottom is clicked when I scroll down and click on it, but the one at the top. How do I solve this? Note: my code is in Swift, so please write down code snippets in Swift and not Objective-C.
func makeImage(){
//might change the following to make it more dynamic later on
imageView = UIImageView(image: UIImage(named:brand.name + "-" + genderChoice.name + "-"+generalOverviewChoice.name+"-Detail.png"))
scrollView = UIScrollView(frame: view.bounds)
scrollView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
imageView.frame = CGRectMake(0, 0, 375, imageView.frame.size.height/2)
scrollView.contentSize = CGSizeMake(375,imageView.frame.size.height)
scrollView.addSubview(imageView)
view.addSubview(scrollView)
}
func createButton(button: UIButton,x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat){
button.frame = CGRectMake(x, y, width, height)
button.addTarget(self, action: "btnTouched:", forControlEvents:.TouchUpInside)
self.view.addSubview(button)
}