Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on September 2, 2020

The flag of Viet Nam

Tutorials

Contents

  • Chuẩn bị
  • 1. Hiển thị View trên Playground
  • 2. Vẽ
    • 2.1. Tạo Path
    • 2.2. Stroke line
    • 2.3. Fill color
  • Tạm kết

Chào bạn đến với Fx Studio. Hôm nay là ngày 2/9, ngày quốc khánh của Việt Nam. Thì để kỷ niệm ngày quốc khánh, mình sẽ hướng dẫn bạn vẽ quốc kỳ Việt Nam bằng ngôn ngữ lập trình Swift với Playground.

Bắt đầu thôi!

Chuẩn bị

Chúng ta sẽ thực hiện đơn giản và trên Playground để thao tác trực quan. Sau đây là thông số phiên bản mình sử dụng:

  • Xcode 11
  • Swift 5.x
  • Playground

1. Hiển thị View trên Playground

Playground là công cụ tuyệt với cho các bạn học Swift. Nó hỗ trợ nhiều và nhanh, bạn có thể thấy giá trị biến, các vòng lặp và kết quả hiển thị bên cạnh. Tuy nhiên, đó là code và trên console. Còn với UI thì như thế nào.

Trước tiên, chúng ta cần phải thêm một số cài đặt để có thể hiển thị một UIView lên trên Playground.

import UIKit
import PlaygroundSupport

Chúng ta thêm 2 thư viện trên vào. Với UIKit thì khá quen thuộc với bạn rồi. Còn PlaygroundSupport sẽ giúp bạn hiển thị một view.

Tiếp tục chúng ta tạo 1 sub-class kế thừa từ UIView. Đặt tên là StarView. Tiện thể ta tô màu nền backgroundColor là màu đỏ.

class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

Giờ sang phần tạo đối tượng của StarView và đưa chúng hiển thị lên nào.

let view = StarView(frame: CGRect(x: 0, y: 0, width: 600, height: 300))

PlaygroundPage.current.liveView = view
PlaygroundPage.current.needsIndefiniteExecution = true

Đối tượng view thuộc class StarView với frame được truyền vào. Sử dụng PlaygroundPage.current và xét liveView chính là đối tượng view vừa tạo. Bạn bấm thực thi và cảm nhận kết quả nào.

2. Vẽ

Về phần vẽ, nếu bạn nào chưa biết các Custom UIView bằng phương pháp Drawing thì có thể xem lại bài viết sau:

    • Basic iOS tutorial : Drawing

Trong bài demo này, mình sẽ sử dụng phương pháp vẽ với UIBezierPath và draw(rect:)

2.1. Tạo Path

Trước khi tạo path thì cần xem qua The flag of Viet Nam là như thế nào.

Quốc kỳ Việt Nam (còn gọi là “Cờ đỏ sao vàng” hay “Cờ Tổ quốc”) hiện nay được công nhận chính thức từ 1976, là lá cờ đại diện cho nước Việt Nam thống nhất. Lá cờ có hình chữ nhật, chiều rộng bằng 2/3 chiều dài, nền đỏ, ở giữa có ngôi sao vàng 5 cánh.

Theo wikipedia.

Vì chủ đạo là 1 ngôi sao 5 cánh. Do đó, việc cần thiết là phải tạo 1 Path là 1 Polygon, gồm nhiều đường thẳng nối tiếp nhau tạo thành 1 hình đa giác.

override func draw(_ rect: CGRect) {
        //create path
        let path = UIBezierPath()
        
        
        let xCenter: CGFloat = rect.size.width/2
        let yCenter: CGFloat = rect.size.height/2
        
        let w = CGFloat(rect.height/2)
        let r = w / 2.0
        let flip: CGFloat = -1.0
        
        let polySide = CGFloat(5)
        
        let theta = 2.0*Double.pi*Double(2.0/polySide)
        
        path.move(to: CGPoint(x: xCenter, y: r*flip+yCenter))
        
        for i in 1..<Int(polySide) {
            let x: CGFloat = r*CGFloat(sin(Double(i)*theta))
            let y: CGFloat = r*CGFloat(cos(Double(i)*theta))
            
            path.addLine(to: CGPoint(x: x+xCenter, y: y*flip+yCenter))
        }
        
        path.close()
        
    }

Bạn sẽ override lại function draw(rect:) của UIView. Trong đó, bạn tạo Path và lần lượt tạo các cạnh của ngôi sao. Khá đơn giản phải không nào. Chi tiết sao thì bạn hãy ngâm cứu nha. Còn copy đoạn code trên là phương pháp nhanh nhất.

2.2. Stroke line

Khi bạn thực thi chương trình, nó sẽ không hiển thị gì cả. Bạn cần phải vẽ nó stroke. Muốn vậy bạn phải xét các giá trị cần thiết là màu và kích thước đường thẳng.

// stroke
UIColor.yellow.set()
path.lineWidth = 2.0
path.stroke()

Kết quả như sau

2.3. Fill color

Quốc kỳ đúng là phải tô màu vàng cho ngôi sao. Bạn thực hiện việc tô màu cũng tương tự như trên. Thêm các tham số cần cho việc tô màu.

// fill
let fillColor = UIColor.yellow
fillColor.setFill()
path.fill()

Kết quả cuối cùng như sau:

 

Hoàn thành rồi nhoé. Cũng khá là đơn giản. Chúc bạn có ngày nghỉ lễ vui vẻ bên gia đình và bạn bè. Ngoài ra bạn có thể checkout code tại đây.

Hoặc bạn có thể xem video demo sinh động và trực quan hơn nhiều.

Tạm kết

  • Cách hiển thị một UIView lên Playground
  • Cách vẽ một ngôi sao 5 cánh

Cảm ơn bạn đã đọc bài viết này!

FacebookTweetPinYummlyLinkedInPrintEmailShares0

Related Posts:

  • Tổng kết năm 2021
    Tổng kết năm 2021
  • Tổng kết năm 2022
    Tổng kết năm 2022
Tags: Swift
Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

You may also like:

  • Tổng kết năm 2022
    Tổng kết năm 2022
  • Tổng kết năm 2021
    Tổng kết năm 2021

Archives

  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!