- vừa được xem lúc

Tạo checkboxes hiệu ứng đẹp mắt với SwiftUI

0 0 32

Người đăng: Long Vu Thanh

Theo Viblo Asia

1. RoundedRectangle CheckBox

Với loại checkbox đầu tiên chúng tạo tạo một struct view và thêm RoundedRectangle. Sử dụng hàm stroke và thêm cho nó StrikeStyle với kích thước dòng kẻ mà bạn mong muốn.

struct CheckBoxView: View { var body: some View { RoundedRectangle(cornerRadius: 10) .trim(from: 0, to: 1) .stroke(style: StrokeStyle(lineWidth: 2)) .frame(width: 70, height: 70) .foregroundColor(.green) }
}

Tiếp theo đưa RoundedRectangle vào ZStack và thêm một RoundedRectangle khác vào. Chắc chắn rằng RoundedRectangle thứ hai nhỏ hơn cái trước đó.

struct CheckBoxView: View { var body: some View { ZStack { RoundedRectangle(cornerRadius: 10) .trim(from: 0, to: 1) .stroke(style: StrokeStyle(lineWidth: 2)) .frame(width: 70, height: 70) .foregroundColor(.green) RoundedRectangle(cornerRadius: 10) .trim(from: 0, to: 1) .fill(Color.green) .frame(width: 60, height: 60) } }
}

Khai báo một biến Bool binding gọi là checked ở đầu struct. Thêm dấu tick bên dưới RoundedRectangle thứ hai như sau:

struct CheckBoxView: View { @Binding var checked: Bool var body: some View { ZStack { RoundedRectangle(cornerRadius: 10) .trim(from: 0, to: 1) .stroke(style: StrokeStyle(lineWidth: 2)) .frame(width: 70, height: 70) .foregroundColor(checked ? Color.green : Color.gray.opacity(0.2)) RoundedRectangle(cornerRadius: 10) .trim(from: 0, to: 1) .fill(checked ? Color.green : Color.gray.opacity(0.2)) .frame(width: 60, height: 60) if checked { Image(systemName: "checkmark") .foregroundColor(Color.white) } } }
}

Khai báo một biến khác để kiểm soát hàm trim của RoundedRectangle đầu tiên. Nó sẽ dùng để tạo ra animation.

 @Binding var trimVal: CGFloat var animationData: CGFloat { get { trimVal } set { trimVal = newValue } }

Sau đó hãy thay đổi trim bằng giá trị biến mới.

RoundedRectangle(cornerRadius: 10) .trim(from: 0, to: trimVal) .stroke(style: StrokeStyle(lineWidth: 2)) .frame(width: 70, height: 70) .foregroundColor(checked ? Color.green : Color.gray.opacity(0.2))

Bạn đã xong bước khởi tạo giờ quay lại ContentView để thêm CheckBoxView vào đó.

struct ContentView: View { @State var trimVal: CGFloat = 0 @State var checked = false var body: some View { Button(action: { }) { CheckBoxView(checked: $checked, trimVal: $trimVal) } }
}

Kết quả thu được như sau:

2. Circular CheckBox

Bạn có thể trở lại file CheckBoxView và thay đổi shape thành circle như sau:

var body: some View { ZStack { Circle() .trim(from: 0, to: trimVal) .stroke(style: StrokeStyle(lineWidth: 2)) .frame(width: 70, height: 70) .foregroundColor(self.checked ? Color.green : Color.gray) .overlay( Circle() .fill(self.checked ? Color.green : Color.gray.opacity(0.2)) .frame(width: 60, height: 60) ) if checked { Image(systemName: "checkmark") .foregroundColor(Color.white) } } }

3. Capsule CheckBox

Tiếp theo hãy tạo một loại thú vị hơn nhé. Thêm hai biến widthremoveText .

Thuộc tính width được sử dụng cho capsule frame, để đảm bảo phần thứ 2 nhỏ hơn phần thứ nhất hãy lấy width - 10, cuối cùng hãy thêm nó vào một lệnh if như sau:

struct CheckBoxView: View { @Binding var checked: Bool @Binding var trimVal: CGFloat @Binding var width: CGFloat @Binding var removeText: Bool var animationData: CGFloat { get { trimVal } set { trimVal = newValue } } var body: some View { ZStack { Capsule() .trim(from: 0, to: trimVal) .stroke(style: StrokeStyle(lineWidth: 2)) .frame(width: width, height: 70) .foregroundColor(self.checked ? Color.green : Color.gray) .overlay( Capsule() .fill(self.checked ? Color.green : Color.gray.opacity(0.2)) .frame(width: width - 10, height: 60) ) if checked { Image(systemName: "checkmark") .foregroundColor(Color.white) .opacity(Double(trimVal)) } if !removeText { Text("Check Mark") } } }
}

Trong ContentView sẽ điều chỉnh lại như sau:

struct ContentView: View { @State var trimVal: CGFloat = 0 @State var checked = false @State var width: CGFloat = 200 @State var removeText: Bool = false var body: some View { CheckBoxView(checked: $checked, trimVal: $trimVal, width: $width, removeText: $removeText) .onTapGesture { if !self.checked { self.removeText.toggle() withAnimation { self.width = 70 } withAnimation(Animation.easeIn(duration: 0.7)) { self.trimVal = 1 self.checked.toggle() } } else { withAnimation { self.trimVal = 0 self.width = 200 self.checked.toggle() self.removeText.toggle() } } } }
}

Ở trên mình chia sẻ một số loại cơ bản. Bạn có thể từ đó tạo ra nhiều loại animation đẹp mắt hơn nữa nhé.

Nguồn:

https://medium.com/better-programming/how-to-create-and-animate-checkboxes-in-swiftui-e428fe7cc9c1

Bình luận

Bài viết tương tự

- vừa được xem lúc

Học Flutter từ cơ bản đến nâng cao. Phần 1: Làm quen cô nàng Flutter

Lời mở đầu. Gần đây, Flutter nổi lên và được Google PR như một xu thế của lập trình di động vậy.

0 0 281

- vừa được xem lúc

Học Flutter từ cơ bản đến nâng cao. Phần 3: Lột trần cô nàng Flutter, BuildContext là gì?

Lời mở đầu. Màn làm quen cô nàng FLutter ở Phần 1 đã gieo rắc vào đầu chúng ta quá nhiều điều bí ẩn về nàng Flutter.

0 0 206

- vừa được xem lúc

Swift: Tạo custom phép toán tử (Operator) của riêng bạn!

Swift cho phép bạn tạo các toán tử có thể tùy chỉnh của riêng bạn. Điều này đặc biệt hữu ích khi bạn xử lý các loại dữ liệu của riêng mình. Operator Types in Swift. Có năm loại toán tử chính trong Swift.

0 0 56

- vừa được xem lúc

Chương 6 Protocol oriented programming.

Cuốn sách này là về lập trình hướng protocol. Khi Apple thông báo swift 2 ở WWDC 2015.

0 0 46

- vừa được xem lúc

Ví dụ về UIActivityViewController

Trên iOS, UIActivityViewController cung cấp giao diện thống nhất để người dùng chia sẻ và thực hiện các hành động trên văn bản, hình ảnh, URL và các mục khác trong ứng dụng. let string = "Hello, world!". let url = URL(string: "https://nshipster.com").

0 0 58

- vừa được xem lúc

Quản lý self và cancellable trong Combine.

. . Công việc quản lý bộ nhớ memory management thường trở nên phức tạp khi chúng ta thực hiện các tác vụ bất đồng bộ asynchronous vì chúng ta thường phải lưu giữ một số object nằm ngoài scope mà object được define trong khi vẫn phải đảm bảo được việc giải phóng object đó được thực hiện đúng quy trìn

0 0 41