Tự tạo một Seek Button sử dụng SwiftUI

Tram Ho

Giới thiệu

Trong bài viết này, ta sẽ từng bước tạo ra một Seek Button sử dụng SwiftUI, có thiết kế như hình dưới đây

Nút bấm dạng này hay xuất hiện trong các ứng dụng chơi nhạc hoặc video. Ví dụ như trong ứng dụng Netflix, khi người dùng bấm vào nút này thanh progress bar sẽ tăng lên 10s.

Nội dung bài viết sẽ tâp trung vào các điểm sau:

  • Các bước cơ bản xây dựng giao diện sử dụng SwiftUI
  • Sử dụng các hiệu ứng cơ bản của SwiftUI

Phân tích các thành phần UI cơ bản

Ta có thể chia Seek Button thành các 4 phần như sau:

  1. Rounded arrow view
  2. Hình nền của Rounded arrow view
  3. Duration Label
  4. Accumulation Label

Phân tích mã nguồn

SeekButton.swift

Ta sẽ tạo SeekButton struct để biểu diễn đối tượng Seek Button

Trong file SeekButton.swift ta sẽ thêm thuộc tính action chính là closure chứa xử lý khi người dùng bấm vào Seek Button

var action: (Int) -> Void

RoundArrow

Đối tượng RoundArrow được biểu diễn bởi struct RoundArrow

RoundArrow đơn giản là vẽ một cung tròn từ góc 0 sang góc 270 theo chiều kim đồng hồ.

RoundArrowHead

Đối tượng RoundArrowHead được biểu diễn bởi struct RoundArrowHead

Ta sẽ tiến hành vẽ 2 hình tam giác liền ngay sau cung tròn ở góc 270 độ

RoundedArrowBackground

Tương tự 2 đối tượng trên ta tiến hành tạo một Shape struct RoundedArrowBackground

Đối tượng được tạo ra bời một cung tròn được vẽ từ góc 0 đến góc 360

ScalableText

ScalableText được sử dụng để hiển thị số giây sẽ cộng thêm khi người dùng bấm SeekButton.
Kích thước của text sẽ thay đổi dựa kích thước của SeekButton, chính vì vậy ta sẽ cần có 2 thuộc tính:

  • string
  • fontWeight

Hiệu ứng chuyển động của RoundedArrow

Theo như thiết kê, phần cung tròn và arrow sẽ có hiệu ứng chuyển động một góc 20 độ ngược chiều kim đồng hồ, kết hợp với hiệu ứng mờ của phần nền. Ta sẽ có đoạn chương trình như sau:

Hiệu ứng cho Duration Label

Ta sẽ thêm một thuộc tính state durationLabelOpacity để lưu lại trạng thái animation của Duration Label. Lúc này chương trình sẽ có dạng như sau:

Hiệu ứng của Accumulation Label

Hiệu ứng của đoạn text này sẽ thay đổi theo chuyển động theo phương ngang,

Ta sẽ cần phải thêm thuộc tính xOffset, giá trị này cũng sẽ thay đổi dựa trên kích thước của Seek Button

Accessibility

Ta sẽ cần thêm một số thuộc tính Accessibility cho Seek Button bằng các đoạn code sau:

  • accessibility(label:) sẽ cung cấp thông tin VoiceOver mô tả chức năng của Seek Button
  • accessibility(addTraits:) sẽ khởi tạo giá trị cho thuộc tính .isButton

Như vậy ta đã hoàn tất các bước để xây dựng một SeekButton đơn giản bằng SwiftUI

Nguồn tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo