Lesson 1 – Label, ImageView, Button

Open Xcode, choose Create a New Xcode project, if it still open, File> New>Project, Single View application.

Enter name, next, brow to save, Create.

Screen look like this.

Click to Viewcontroller.swift, we write code here.

var la: UILabel!

We declare a Label, show text on this view.

Copy to below super.viewDidLoad()

        la = UILabel(frame: CGRect(x: 100, y: 60, width: 280, height: 25))

        la.text = "This is example text"

        la.textColor = UIColor.blueColor()

view.addSubview(la)

On top left, simulator choose iphone 6, press triangle icon to run programme.

Xcode simulator run fast, it has many screen size, no need to by actual device to test app. When prepare to submit Itunes Connect, you need to test on actual device.

Here we use the best way to code app. Not like Beginning books, we don’t need storyboard, drag and drop, add Constraint, drag to connect views with code. It too complex and useless if we have to create many view. 100 labels can only be create in code, not storyboard!

Let look at code.

var la: UILabel!

This line declare a Label, very view like button, image, table must be declare before use.

la = UILabel(frame: CGRect(x: 100, y: 60, width: 280, height: 25))

This line locate Label position. It margin left 100dp, margin top 60dp, it length 280dp, height 25 dp.

la.text = "This is example text"

la.textColor = UIColor.blueColor()

These lines set text and color string.

Last view.addSubview(la) to put it in current viewcontroller.

We have four steps to go: Declare, locate, set text, put in view.

Next, we will show an Image on screen.

Name image abc, format png. Right click to image, drag in to Xcode tree folder, when it show blue dash release mouse, a pop up window show.

Check to Destination, finish.

Copy to above override

let im = UIImage(named: "abc")

var ima: UIImageView!

Copy in to super.viewDidLoad()

ima = UIImageView(frame: CGRect(x: 20, y: 100, width: 250, height: 250))

ima.image = im

ima.center = CGPoint(x: view.center.x, y:250)

view.addSubview(ima)

Run to see result.

To center image.

ima.center = CGPoint(x: view.center.x, y:250)

To remove status bar, copy this function to above last close bracket.

override func prefersStatusBarHidden() -> Bool {

        return true

    }

You should always remove status bar, Apple like that!

Now we show buttons on screen.

Copy to above override

var bu1:UIButton!

 var bu2:UIButton!

Copy in to super.viewDidLoad()

        bu1 = UIButton(frame: CGRect(x:80, y: 420, width: 100, height: 32))

        bu2 = UIButton(frame: CGRect(x:200, y: 420, width: 100, height: 32))

        bu1.setTitle("Button",forState: .Normal)

        bu1.setTitleColor(UIColor.blueColor(), forState: .Normal)

        bu1.backgroundColor = UIColor.lightGrayColor()

        bu2.setTitle("Next",forState: .Normal)

        bu2.setTitleColor(UIColor.blueColor(), forState: .Normal)

        bu2.backgroundColor = UIColor.lightGrayColor()

        view.addSubview(bu1)

        view.addSubview(bu2)

Copy function to above last close bracket.

func settex(sender: UIButton){

        la.text = "This is two birds"

    }

Last, connect button with function, copy in to bottom of super.viewDidLoad()

bu1.addTarget(self, action: #selector(settext(_:)), forControlEvents: UIControlEvents.TouchUpInside)

Run to see result.

Press button to see text show.

In this lesson we learned how to show text, image, button on screen. No need storyboard or constraints. Forget them, don’t do like Beginning books say, it ‘s bad way to learn!