Bài 1 – Label, Image, Button

Mở Xcode, chọn Create a New Xcode project, hoặc đang mở thì File> New>Project, tại màn hình tiếp theo chọn Single View application.

Màn hình bật ra đặt tên, next, chọn chỗ lưu, Create

Màn hình bật ra trông như sau.

Bỏ tích 2 ô Landscape đi vì ta sẽ để ứng dụng có màn hình đứng.

Nháy vào Viewcontroller.swift, đây chính là nơi ta viết code

Xóa lệnh Override thứ hai đi để còn lại như sau

Copy dòng sau vào trên chữ override

var la: UILabel!

Ta đang khai báo một Label dùng để hiển thị chữ.

Tiếp theo, copy các dòng sau xuống dưới dòng super.viewDidLoad()

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

la.text = "Đây là chữ ví dụ"

la.textColor = UIColor.blueColor()

view.addSubview(la)

Ở góc trên bên trái, chọn máy ảo là iphone 6, ấn biểu tượng tam giác chạy chương trình ta đã có chương trình đầu tiên. Bạn có thể gõ chữ “Hello world” vào cho nó đúng bài bản.

Lập trình Swift có cái hay là máy ảo của Xcode chạy rất nhanh, có nhiều cỡ màn hình để chọn, không cần mua máy thật để test app khi học. Chỉ đến lúc submit app lên Itunes mới cần máy thật, nếu không app dễ bị reject vì lỗi chưa chạy trên máy thật!

Chỉ vài dòng code đơn giản bạn đã có chương trình đầu tiên. Tôi hướng dẫn bạn làm theo cách tốt nhất. Không như các sách Beginning hay dạy, đó là co kéo Label ra storyboard, căn chỉnh Constraint, kéo từ storyboard vào màn hình code để kết nối. Vừa phức tạp rắc rối vừa khó hiểu, khó làm. Lại không dùng được khi làm ứng dụng thực tế!

Bây giờ hãy xem lại các dòng code.

var la: UILabel!

Dòng này để khai báo Label để ghi chữ ra, tất cả cái gì dùng đều phải khai báo, chữ, nút bấm, hình ảnh đều vậy.

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

Dòng này định vị trí của Label. Nó cách lề trái 100dp là chỉ số x. Iphone 6 rộng 375dp, tức nó cách hơn ¼. Cách đỉnh 60 dp là chỉ số y, nó dài 280dp, cao 25 dp.

la.text = "Đây là chữ ví dụ"

la.textColor = UIColor.blueColor()

Hai dòng này để set chữ ra, tô màu. Dòng cuối view.addSubview(la) để nhét vào view, như một thủ tục.

Như vậy ta có 4 bước, gồm khai báo, định vị trí, set chữ, cho vào view. Dù bạn đưa ra màn hình cái gì thì đều cần các bước tương tự.

Tiếp theo ta sẽ đưa một cái ảnh ra màn hình.

Trước hết đặt tên ảnh là abc, định dạng png. Xcode không đọc được định dạng jpg nên tất cả ảnh, icon muốn dùng bạn phải convert về dạng png. Với Eclipse, bạn dùng kiểu gì nó cũng đọc được.

Tại vị trí ảnh, nháy chuột phải vào ảnh, kéo nó vào bên trái Xcode, rê tới gần Main.storyboard, khi hiện gạch kẻ xanh thì thả tay ra.

 Nó sẽ bật ra màn hình sau.

Chú ý chỗ Destination phải tích màu xanh, ấn finish. Lúc đó ảnh của ta đã ở bên trái như một file riêng. 

Copy 2 dòng sau vào trên chỗ override

let im = UIImage(named: "abc")

var ima: UIImageView!

Copy các dòng sau vào trong 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)

Chạy thử để xem

Để cho ảnh vào giữa, ta dùng lệnh sau

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

Chạy thử, ảnh đã vào giữa.

Để bỏ cái thanh bar hiện cột sóng, giờ và pin trên đầu ứng dụng, bạn copy đoạn sau vào trên cái ngoặc đóng cuối cùng.

override func prefersStatusBarHidden() -> Bool {

        return true

    }

Bạn luôn nên bỏ thanh bar trên đầu trong tất cả các màn hình, đó là khuyến cáo của Apple!

Tiếp theo ta sẽ đưa các nút bấm ra màn hình

Copy đoạn sau lên trên dòng override

var bu1:UIButton!

 var bu2:UIButton!

Copy tiếp đoạn sau vào trong 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("Nút bấm",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)

Tiếp theo, copy đoạn sau vào trên cái ngoặc đóng cuối cùng

func nubam(sender: UIButton){

        la.text = "Đây là hai con chim"

    }

Đây là hàm hay phương thức điều khiển cái nút bấm, nó set chữ ra cái Label ta đã tạo ở trên.

Cuối cùng, copy đoạn sau vào dưới cùng của super.viewDidLoad()

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

Nếu bạn làm đúng, chạy thử màn hình ứng dụng sẽ như sau

Ấn nút để thấy chữ “Đây là hai con chim” hiện ra.

Như vậy bài này ta đã học cách đưa chữ, ảnh, nút bấm ra màn hình, code lệnh cho nút, căn ảnh vào giữa mà chả cần động đến storyboard. Cứ để nó trắng trơn như vậy.