How do I create a 'sliding view' like the compass in Swift?

Question

In the current compass app, you can slide between the compass and a level. How would I create that same effect in Swift? Well, I am trying to create an app mainly to learn. I want to create a notepad app where if you swipe to to the right, a font selection appears, and if you swipe to the left, a list of previous notes appear. So far, this is my code

    var noteArray: Dictionary<String,String> = [:]
    var selectTextView = UIButton()
    var selectTextField = UITextField()
    var selectString: String = ""
    override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = UIColor.whiteColor()
    var widthField = self.view.bounds.size.width - 10
    var heightField = self.view.bounds.size.height - 69 - 221 - 38
    println(heightField)
    println(widthField)
    var textFieldString: String! = ""
    //Set up resizable Button Image
    let buttonImage: UIImage = UIImage(named:"whiteButtonLong")
    let buttonImageHighlight: UIImage = UIImage(named:"whiteButtonHighlightLong")
    //Set up text field
    self.textView = UITextView(frame: CGRectMake(5, 64, widthField, heightField))
    self.textView.backgroundColor = UIColor.redColor()
    self.view.addSubview(self.textView)
    textView.becomeFirstResponder()
    //Set up the New button
    var newButtonString: String! = "New Note"
    var heightButton = 568 - heightField - 1000
    var widthButton = (widthField/2) - 2
    let floatInt: CInt = 3
    let newButton = UIButton(frame: CGRect(x: 5, y: 5, width: widthButton, height: 50))
    UIButton.buttonWithType(UIButtonType.System)
    newButton.setTitle(newButtonString,forState: UIControlState.Normal)
    newButton.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
    newButton.setBackgroundImage(buttonImage, forState: UIControlState.Normal)
    newButton.setBackgroundImage(buttonImageHighlight, forState: UIControlState.Highlighted)
    /*newButton.backgroundColor = UIColor.cyanColor()
    newButton.layer.borderColor = UIColor.blackColor().CGColor
    let widthForBorder: CGFloat = 0.5
    newButton.layer.borderWidth = widthForBorder*/
    newButton.backgroundRectForBounds(CGRectMake(5, 5, widthButton, heightButton))
    newButton.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside)
    newButton.layer.cornerRadius = 10
    newButton.clipsToBounds = true
    self.view.addSubview(newButton)
    //Set up select note
    let widthSelectField = widthButton - 10
    selectTextView = UIButton(frame: (CGRectMake(162, 5, widthButton, 50))) as UIButton
    selectTextView.setBackgroundImage(buttonImage, forState: UIControlState.Normal)
    selectTextView.setBackgroundImage(buttonImageHighlight, forState: UIControlState.Highlighted)
    self.view.addSubview(selectTextView)
    selectTextField = UITextField(frame: CGRectMake(170, 22.5, widthSelectField, 15))
    selectTextField.keyboardType = UIKeyboardType.NumberPad
    //selectTextField.backgroundColor = UIColor.blueColor()
    selectTextView.addTarget(self, action: "textViewAction:", forControlEvents: UIControlEvents.TouchUpInside)
    self.view.addSubview(selectTextField)
    selectTextField.text = selectString
    selectTextField.canBecomeFirstResponder()
    selectTextField.textAlignment = NSTextAlignment.Center
    selectTextField.placeholder = "Select Note"
    //Set up return button
    var returnButton: UIButton = UIButton(frame: CGRectMake(120, 315, 80, 30))
    returnButton.backgroundColor = UIColor.grayColor()
    returnButton.layer.cornerRadius = 10
    returnButton.layer.masksToBounds = true
    returnButton.layer.borderWidth = 2
    returnButton.layer.borderColor = UIColor.blackColor().CGColor
    returnButton.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
    returnButton.setTitle("Return", forState: UIControlState.Normal)
    returnButton.addTarget(self, action: "returnButtonAction:", forControlEvents: UIControlEvents.TouchUpInside)
    self.view.addSubview(returnButton)

With this being outside the viewDidLoad()

func buttonAction(sender:UIButton!) {
        var noteArrayPlusOne = String(noteArray.count + 1)
        noteArray.updateValue(textView.text, forKey: noteArrayPlusOne)
        println(noteArray)
        textView.text = ""
    }
    func textViewAction(sender: UIButton!) {
        selectTextField.becomeFirstResponder()
    }
    func returnButtonAction(sender: UIButton!){
        //println("button was pressed")
        selectString = selectTextField.text
        println(selectString)
        textView.text = noteArray[selectString]
        selectTextField.text = ""
    }

wnter some code that shows your efforts so far – Rachel Gallen Jun 14 '14 at 20:56 — Rachel Gallen, Jun 14 '14 at 20:56

score 2 · Accepted Answer · answered Jun 14 '14 at 23:07

2

You want to use a UIScrollView. This gives you a view capable of being panned around.

let scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()
    self.scrollView = UIScrollView(frame: self.view.bounds)
    self.view.addSubview(self.scrollView)
}

To set the size, set the UIScrollView's contentSize property. For the Compass/level app:

self.scrollView.contentSize = CGSize(width: 2 * theWidthOftheScreen, height: theHeightOfTheScreen)

To get the scroll view to "snap" to either the left-most or right-most scroll positions, enable paging:

self.scrollView.pagingEnabled = true

There are plenty of other properties too, like changing the scroll bar color or hiding them.

answered Jun 14 '14 at 23:07

Ryan

3,853
4
28
32

1

How would I work with the views which I place within the UIScrollView? For example, how would I place all the code that I have already within on of the UIViews? Also, how would I make one of the UIViews default?I want the middle view to be the default view. – elito25 Jun 14 '14 at 23:20
You can leave all that code in the ViewController for now. While it's not the best place for it, it will still work. To add the views to the scroll view, call `self.scrollView.addSubview(*)` rather than `self.view.addSubview(*)`. I don't know what you mean by "Default". If you want to choose which part of the scroll view is shown on load, you should look at the `contentOffset` property of the scroll view. – Ryan Jun 14 '14 at 23:24
I don't mean to be rude, but if you're a beginner to Cocoa & iOS programming, I'd recommend starting with Obj-C because Swift is so young with so little example code and many bugs and unfinished aspects. – Ryan Jun 14 '14 at 23:25
What do you mean by default? Can you give more context? – Ryan Jun 14 '14 at 23:28
1

You answered me perfectly. That was exactly what I wanted to know. I am starting with swift because it is a young language. Most Objective-C code can easily be translated. I have a bit of knowledge of how Objective-C works but it is too "weird" and I was never able to get into it. I can write basic code but I cant actually turn it into an app. Swift seems just so much easier. Thanks again friend. – elito25 Jun 14 '14 at 23:34

How do I create a 'sliding view' like the compass in Swift?

1 Answers1