[Swift 1] Day 6-7 - App Challenge - Word Magnets


#1

Word Magnets

Customize your Word Magnet app and add features to make it stand out.

Need help? Checkout the videos from Day 5.

Post images, questions, and code here.


Word Magnet examples
#2

Question:

Through a println I can see that the text I input in Add Word is working and the line…

        wordArray.append("\(addWordTextField.text)")

…doesn’t throw an error, but that text never appears as a word magnet. Did some searching to see if I could get a hint on how to update/refresh but have come up with nothing so far. Maybe I’m putting this line in the wrong place, but if I put it down along with the button press there’s an error that it doesn’t know was wordArray is.


#4

@superpac

Did you add the word to a UILabel that you added to the view?

You’ll need to add a new UILabel with the text — it won’t magically show up when you add it to your data array.

Your wordArray code can be more concise, you don’t need to convert a String to a String. It’s already in the String format from a UITextField.

wordArray.append(addWordTextField.text)

You’ll want to add the word to the array and the view to keep your data in sync.


#5

Here is my word Magnets app!

Code here: https://gist.github.com/eloisecamire/b585c76498d23f5a257c

What I was able to do:

  • change font, add bkg image
  • create new label from textfield and store everything new in the main array
  • position new label using height of the device, so that label is next to add button on all devices
  • add velocity when user drop the label (Caroline Begbie tutorial at raywenderlich.com)
    I’m starting to understand the concept of “scope” I think… where to put the code so it runs when you need it, where to declare variables in order to be able to use it everywhere… I think I made a lot of connections this weekend! :slight_smile:

What I wasn’t able to do

  • change appearance of labels on button click. I couldn’t find a way to delete or refresh existing label. On click I could change the font or color for the new labels, but the old labels were still on the view and I end up with duplicates. How do we delete or refresh instance?
  • I also had the idea to use my width and height var in the “var x = CGFloat(arc4random_uniform(300))” in order to position the label everywhere on all devices and not only in 300 and 400 top left pixels. couldn’t find the right syntax.
  • last idea was to set some boundaries in order to keep label on the screen at all time.
    I guess it might be doable with collision detection and my bounds values ( var bounds: CGRect = UIScreen.mainScreen().bounds). found some tutorials but it’s too complex for now

[Swift 1] Day 8 - Conditional Logic and App Challenge Results
#6

I destroyed my development environment this weekend. Hehe. I changed from Xcode 6.0 to 6.1 beta than back again to 6.0.1. I could not even sign my apps anymore and install them into my iOS devices. :smiley: Long story short, I had to format my Mac. But it’s ok now, it forced me to migrated from Mavericks to Yosemite. Yosemite, what a great OS!

Ok, regarding the challenge, here is what I did:

  • The app reads words from a .txt file (I got a “haiku” theme) instead of a hard-coded array
  • Each time users press the “New” button
  • The array of words is shuffled
  • Words are replaced from the view with new ones
  • Instead of positioning the word all over the UI, I decided to position them right below the “magnetic board” (the coloured square)
  • Users can add custom words
  • Custom magnetic words have a different color, which makes easier to identify them
  • My magnetic words are a rectangle with a black line at bottom and at right, to give them a “3D effect”
  • I added physics to the magnetic words, like a slide effect based on the finger speed. Sometimes tho, the magnetic runs out of the screen, hehe. I need to study that algorithm better, it’s not that simple.

I think that’s all. I put the array sorting in a separate thread because it can block the UI (depending of the size of the wordlist file).

I have a demo for you. Watch in HD ;-):

Code is here: http://bit.ly/magneticViewControllerAtGitHub
You can run it if you clone the repo.

Trivia:
I started off with this sketch.
I’m recording my iPhone with Reflector app.

Fun challenge. Keep them coming!


#7

Here is “Casual Poet”, my subscription to the challenge.
(update new screenshot, i’ve listen some friends remarks and change the papers texture : still in a poet “authentic paper mood” but with a clean paper )

Main features of the App :

  • paper “poet friendly” UI and shadow effects
  • Play with different official Magic Poetry kit (geek, love, poet &
    original)
  • Smart poem zone, that organise our words in lines and deals with
    words swap (rearrange words)
  • Share the screen capture of the poem zone on twitter, Facebook and
    pictures.
  • add more words while composing a poem or reset all board.

What i’ve learned with that challenge

  • Make an Appicon and a UI 100% built in code (no storyboard)
  • Deal with popover for the menu and communication between popover and mainView
  • Play a lot with labels, shadows and transition.
  • Tweek the pan gesture to have smooth movement and the words visible
    while panning.
  • Working a lot with Arrays for the multi line /changing position of
    the poem zone.
  • Make screenshot of a part of the screen
  • Using the sharing service
  • coding with a lake of sleep :slight_smile:

I made a presentation of the app with that video :

It was a busy week end, my children asked me : but what do you win if you win the challenge … i answerer : i’ve already my price, i’ve got an App :smiley:


#8

Really nice shadow effect and really nice “auto-fit” feature. Kudos to the screenshot feature too. Nice job. :thumbsup:


#9

Hi,

here is the code to my Word Challenge App. https://gist.github.com/thedan84/7c062eb2d40203e585b6#file-word-magnet-challenge

Didn’t have enough time this weekend to tweak the UI. Also wanted to delete the label with a double tap and let the user change the background and color for the text and/or label.


#10

Hi

I found the challenge difficult .I read all the documentation about UITextField and still can’t grasp it at this stage [one week experience] .

Paul why don’t we have 2 kinds of challanges one for beginners and one for advanced ?!

Can’t figure how to take the user text into the array.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var firstLabel: UILabel!
    @IBOutlet weak var secondLabel: UILabel!
    
    
    
    @IBOutlet weak var userInputTextField: UITextField!
    
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        
        var cycle = ["Morning:","Afternoon:", "Evening:",  "Testosterone is highest", "Testosterone is lowest", "Testosterone is in the midle"]
        
        var userInputTextField: UITextField = UITextField(frame: CGRect(x: 0, y: 0, width: 190.00, height: 40.00))
        
        userInputTextField.clearsOnBeginEditing = true
        userInputTextField.center = CGPoint(x: 222, y: 120)
        userInputTextField.font = UIFont.systemFontOfSize(25)
        
        userInputTextField.backgroundColor = UIColor.greenColor()
        userInputTextField.textColor = UIColor.redColor()
        
        
        
        
        view.addSubview(userInputTextField)

        
        cycle.append("\(userInputTextField.text)") // ??
        
        
        
        for word in cycle {
            
            println("\(word)")
            
            
            var label = UILabel()
            label.text = word
            label.font = UIFont.systemFontOfSize(20)
            label.sizeToFit()
            
            label.center = CGPoint(x: 200, y:  200)
            label.backgroundColor = UIColor.grayColor()
            
            
            var x = CGFloat(arc4random_uniform(320))
            var y = CGFloat(arc4random_uniform(480))
            label.center = CGPoint(x: x, y: y)
            
            
            view.addSubview(label)
            
            // Pan Gesture
            var panGesture = UIPanGestureRecognizer(target: self, action: Selector("handlePanGesture:"))
            label.addGestureRecognizer(panGesture)
            label.userInteractionEnabled = true
            
            
            }
        
        }
    
    func handlePanGesture(panGesture: UIPanGestureRecognizer) {

        println("GESTURE")
        
        
        
        var translation = panGesture.translationInView(view)
        
        panGesture.setTranslation(CGPointZero, inView: view)
        
        println(translation)
        
        
        
        var label = panGesture.view as UILabel
        label.center = CGPoint(x: label.center.x + translation.x, y: label.center.y + translation.y)
        
        
        // COPY -PASTE FROM http://www.raywenderlich.com/76020/using-uigesturerecognizer-with-swift-tutorial        if 
        
            if panGesture.state == UIGestureRecognizerState.Ended {
            // 1
            let velocity = panGesture.velocityInView(self.view)
            let magnitude = sqrt((velocity.x * velocity.x) + (velocity.y * velocity.y))
            let slideMultiplier = magnitude / 200
            println("magnitude: \(magnitude), slideMultiplier: \(slideMultiplier)")
            
            // 2
            let slideFactor = 0.9 * slideMultiplier     //Increase for more of a slide
            // 3
            var finalPoint = CGPoint(x:panGesture.view!.center.x + (velocity.x * slideFactor),
                y:panGesture.view!.center.y + (velocity.y * slideFactor))
            // 4
            finalPoint.x = min(max(finalPoint.x, 0), self.view.bounds.size.width)
            finalPoint.y = min(max(finalPoint.y, 0), self.view.bounds.size.height)
            
            // 5
            UIView.animateWithDuration(Double(slideFactor * 2),
                delay: 0,
                // 6
                options: UIViewAnimationOptions.CurveEaseOut,
                animations: {panGesture.view!.center = finalPoint },
                completion: nil)
        }
        
    }
    
    

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }

    
       

}

#11

@anderssongreene

It’s a challenge and it will be difficult, but I do like your suggestion for an easier challenge. Any recommendations for app ideas?

I think it’s important to test yourself and see where you’re at.

Were you able to get the basic Word Magnets code working with pan gestures?

I will be covering more aspects of working with UITextField’s this week. There’s a lot I haven’t explained.

-Paul


#12

Awesome work @Eloise!


#13

Now that I read a little bit about functions I understand the pan gesture.


#14

@anderssongreene Great! I’ll be talking about methods and functions this week.

At this point I expect you to have a vague understanding, but not a complete.

Did you like the code exercises and videos from week 1?

-Paul


#15

Videos from first week were great. A lot more content that I was expecting and this is a good thing. The code was great as well but for more experience people, as I said earlier an easy version and an advanced version would be awesome.

Can you update the code solution for the Word magnet challenge based on day 5 code that you made?

Thank you


#17

Do you want me to explain how to complete the App Challenge?

-Paul


#18

Yes please because i still have problems how to take the user input and add it to the array


#19

Hi @anderssongreene
Would you be able to share the reading material that helped you understand pan gesture please?

Cheers
Ben


#20

If you could take a look at that one, i found it very clear and helpful :


#21

Thanks for sharing your code Fernando!) it is very clear with all comments. I found all missing pieces and things I struggle with over the weekend… it just look so easy reading your code!!


#22

I’m glad it helped, @Eloise!

At this very moment I’m reading the article that @Paradisiak shared and it’s very enlightening. I see that like myself, you used that Ray tutorial to add physics and stuff. Ray’s tutorial is great, but in the article there is an easier way to add physics using the UIKit Dynamics framework. Take a look if you can. :wink:

Thanks for sharing, @Paradisiak!