I am trying to make a scrollview with 3 pictures on a sign up/join page for a small app I trying to make. I was using this code below:
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
var signInButton: UIButton!
var joinButton: UIButton!
var pageControl: UIPageControl!
#IBOutlet weak var scrollView: UIScrollView!
var colors:[UIColor] = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor(), UIColor.yellowColor()]
var frame = CGRectMake(0, 0, 0, 0)
override func viewDidLoad() {
super.viewDidLoad()
signInButton = UIButton(frame: CGRectMake(1/3.0 * self.view.bounds.size.width, 5/6.0 * self.view.bounds.size.height, 23, 60))
joinButton = UIButton(frame: CGRectMake(2/3.0 * self.view.bounds.size.width, 5/6.0 * self.view.bounds.size.height, 23, 60))
pageControl = UIPageControl(frame: CGRectMake(1/2.0 * self.view.bounds.size.width, 70/100.0 * self.view.bounds.size.height, 23, 60))
self.view.addSubview(signInButton)
self.view.addSubview(joinButton)
self.view.addSubview(pageControl)
signInButton.addTarget(self, action: "signInButtonClicked:", forControlEvents: .TouchUpInside)
joinButton.addTarget(self, action: "joinButtonClicked:", forControlEvents: .TouchUpInside)
pageControl.addTarget(self, action: Selector("changePage:"), forControlEvents: UIControlEvents.ValueChanged)
configurePageControl()
scrollView.delegate = self
for index in 0...3 {
frame.size = scrollView.frame.size
frame.origin.x = scrollView.frame.size.width * CGFloat(index)
scrollView.pagingEnabled = true
let view: UIView = UIView(frame: frame)
view.backgroundColor = colors[index]
scrollView.addSubview(view)
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * 4, self.scrollView.frame.size.height)
}
func configurePageControl() {
self.pageControl.numberOfPages = colors.count
self.pageControl.currentPage = 0
self.pageControl.tintColor = UIColor.redColor()
self.pageControl.pageIndicatorTintColor = UIColor.blackColor()
self.pageControl.currentPageIndicatorTintColor = UIColor.greenColor()
}
I put a scrollview on my view controller (using the size class width: Any and height: Any) and pinned all four sides of the scrollview to the view controller. For some reason each of the views I add to the scrollview are not exactly the same width as the iPhone.
For example when, I tried running it on an iPhone 6 the first view extends past the width of the iPhone. And that happens to the second and third view. I want the first view to be the exact width of the iPhone and the second view to be exactly to the right of the first view and so on. There seems to be some overlapping with the first view going past the width of the iPhone.
Could this be because I am using the size class (width: any and height: any) and I should disable size classes and add a scrollview for each iPhone width?
Can someone help me identify the problem here.
Add:
scrollView.setNeedsLayout()
scrollView.layoutIfNeeded()
at the beginning of the viewDidLoad() method.
Always call these two methods before accessing a view's frame when using Auto Layout, otherwise you'll probably get an incorrect size.
The problem is that when viewDidLoad() is called, your view still has a width of 600 (due to your storyboard view controller size of 600x600).
Your constraints dictate that the scroll view should be the same width as the device, but these constraints are only applied after viewDidLoad() finishes, when Auto Layout's next scheduled pass is calculated.
Adding the code above forces Auto Layout to perform a pass, thus giving you the correct frame sizes for subsequent use in your size calculations.
Put your scroll view in , set your constraint. Then grab a UIView, put it IN the scroll view, set it as equal width, equal height, and center it (use CTRL + drag to the scroll view, you'll get a small pop up menu)
Then put your content in the UIView you just created... Bam ! also I personally rename my UIView to ContentView, just for sake
Here's a screen to help :
Now I myself am still having issue with the height, I usually simply use a fixed height for the content view because if I don't it doesn't scroll....
Related
I am playing around with scroll views, and I've run into an issue I'be stuck with. I have a view controller create in Storyboard. The view controller contains a scroll view which fills the entire superview.
I then added the images programmatically to the scroll view. The images do show within the scroll view and paging works just fine. Only problem is the scroll view is set ti fill superview but the image view that hold the images seems like it stops above where the navigation bar would be. How can I have the image view fill the whole view within the scroll view?
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var pagingView: UIPageControl!
var images = [UIImage]()
var frame = CGRect(x: 0, y: 0,width: 0,height: 0)
override func viewDidLoad() {
super.viewDidLoad()
scrollView.delegate = self
scrollView.isPagingEnabled = true
images = [UIImage(named: "Slide1")!, UIImage(named: "Slide2")!, UIImage(named: "Slide3")!, UIImage(named: "Slide4")!]
pagingView.numberOfPages = images.count
// This is where I think I'm having the height problem.
for i in 0..<images.count {
let imageView = UIImageView()
let x = self.view.frame.size.width * CGFloat(i)
imageView.frame = CGRect(x: x, y: 0, width: self.view.frame.width, height: self.view.frame.height)
imageView.contentMode = .scaleAspectFill
imageView.image = images[i]
scrollView.contentSize.width = scrollView.frame.size.width * CGFloat(i + 1)
scrollView.addSubview(imageView)
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
pagingView.currentPage = Int(pageNumber)
}
After setting nav bar to hidden, here is the output
Scroll view background color is red
In this case you need to enable the parent view clipsToBounds. Set UIScrollview clipsToBounds property to True.
Programmatically scrollView.clipsToBounds = true
In UIStoryBoard - Click the view->Attributes Inspector
If you would like to see the whole screen, make sure to add the topConstraint of scrollView assigned superView and hide the navigationBar in viewWillAppear,
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.setNavigationBarHidden(true, animated: animated)
}
Make sure to remove the status bar by
override var prefersStatusBarHidden: Bool {
return true
}
Update the Y position of Image.
imageView.frame = CGRect(x: x, y: **self.scrollView.frame.minY**, width: self.view.frame.width, height: self.view.frame.height)
Update the scrollView topConstraint by -20.
I have 4 buttons in a UIViewController in XCode. I already added code to them so I would prefer to keep the buttons. I want to have the buttons side by side in the view where there is only one button on the screen at a time and the edge of the other buttons on the edge of the screen. Where you can just barely see them. I wanted to know how would I be able to accomplish this? If you need more information than this just let me know?
var scrollView: UIScrollView!
private func addButton() {
for index in 0...2{
let button = UIButton()
let x = scrollView.frame.size.width * CGFloat(index)
button.frame = CGRect(x: x, y: 0, width: scrollView.frame.width, height: self.view.frame.height)
button.backgroundColor = UIImage(named: ColorArr[index])
scrollView.contentSize.width = scrollView.frame.size.width * CGFloat(index + 1)
scrollView.addSubview(button)
}
}
You can call this function in viewDidLoad() and i took color array to differentiate buttons
The answer can be for swift, objective-c or c# even if I'm using xamarin.
I have issues creating scrollview in the storyboard with xamarin, I followed several tutorial for xcode but I can't do what I need.
Then I removed the scrollview and just have a long vertical uiview and actualy added some code to scroll it using pangesture moving the uiview frame.
But I know it would be better to use srollview also I though that it must be possible to insert a scrollview before the view (in code) to achieve the same thing.
So is it possible ?
Yes it is possible, for example you could do this in your ViewController by adding the ScrollView as a subview to your View.
override func viewDidLoad() {
super.viewDidLoad()
let scrollViewFrame = view.bounds
let scrollView = UIScrollView(frame: scrollViewFrame)
scrollView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
scrollView.backgroundColor = UIColor.red
view.addSubview(scrollView)
let innerView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
innerView.backgroundColor = UIColor.blue
scrollView.addSubview(innerView)
scrollView.contentSize = CGSize(width: scrollViewFrame.width, height: scrollViewFrame.height * 2)
}
In this example the ScrollView has the same size as the main View. You can adjust this by changing the scrollViewFrame constant.
The innerView has a fixed size of 50x50. If it should cover the entire scrollView, just use the scrollViewFrame and the same autoresizingMask.
I adjusted the contentSize to be twice as high as the scrollView in order to make it scroll. This might or might not be necessary for your solution.
I've some problem with ScrollView.
I'm trying to create a scrollview and add to it dynamically some buttons.
So i create a scrollView in my main storyboard with some constraints. (0 to left, 0 to right, 0 to botton and 1/10 height).
Now, i want to add some button.
#IBOutlet var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
for index in 0..<12 {
let frame1 = CGRect(x: 0 + (index * 60), y: 0, width: 45, height: 45 )
let button = UIButton(frame: frame1)
button.setTitle("toto", forState: .Normal)
button.backgroundColor = UIColor.green()
scrollView.addSubview(button)
}
}
So now the problem is : my buttons are present but i can't scroll. The scroll is enabled in the storyBoard. I tried to enabled it in the code but nothing changed..
set the contentSize of your scrollView
self. scrollView.contentSize = CGSizeMake(required_width, required_height)
for example
self. scrollView.contentSize = CGSizeMake(500, 74) // custtomize ur self
You have to set the contentSize of the scrollView
The height to set is probably the origin.y + the size.height of the last button.
use this code to set scrollview height
scrollview.contentInset = UIEdgeInsetsMake(0, 0, 50, 0)
//50 is the height of scroll view you can change it to the height you want
scrollview.bounces = false
or you can also change content inset from here
by changing the values of content inset (height or width)
I am trying to do a horizontal scroll view similar to a paging type in which I am adding 3 views. I have put the scroll view in my storyboard above a UIView(myView) & have put constraints. Following are my constraints and my code for the same -
ScrollView constraints
My code for the same -
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var contentView: UIView!
override func viewDidLoad()
{
super.viewDidLoad()
scrollView.frame = CGRectMake(0, 0, myView.frame.width, myView.frame.height)
let view1 = UIView(frame: CGRectMake(0, 0, scrollView.frame.width, scrollView.frame.height))
view1.backgroundColor = UIColor.blackColor()
let view2 = UIView(frame: CGRectMake(scrollView.frame.width, 0, scrollView.frame.width, scrollView.frame.height))
view2.backgroundColor = UIColor.redColor()
let view3 = UIView(frame: CGRectMake(scrollView.frame.width*2, 0, scrollView.frame.width, scrollView.frame.height))
view3.backgroundColor = UIColor.whiteColor()
self.scrollView.addSubview(view1)
self.scrollView.addSubview(view2)
self.scrollView.addSubview(view3)
scrollView.contentSize = CGSizeMake(self.scrollView.frame.width*3, scrollView.frame.height)
// Do any additional setup after loading the view.
}
My Problems -
1) The scroll view floats when I run it in a smaller screen.
2)My view1,view2,view3 width is not the same as of that of myView. Since myView is pinged to the view with (0,0,0,0), views "view1,view2,view3" should have the width & height of myView which should have a height equal to (mainView - TopView) & width that of the mainView.
Please help as I am in a damn need of this solution and I am not being able to figure out what to do? Thanks.
You use constraints for MyView so you should probably use constraints for other views. The simplest way to make constraints in runtime using Cartography
https://github.com/robb/Cartography
Don't forget to set height constraint for scrollview in storyboard.
After in your viewDidLoad need to write something like this:
let views = [UIView(), UIView(), UIView()]
views.forEach {
self.scrollView.addSubview($0)
constrain($0) { view1 in
view1.left == view1.superview!.left
view1.right == view1.superview!.right
view1.height == view1.superview!.height
}
}
constrain(views[0], views[1], views[2]) { view1, view2, view3 in
view1.top == view1.superview!.top
view2.top == view1.bottom
view3.top == view2.bottom
view3.bottom == view3.superview!.bottom
}