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

Bài đăng này đã không được cập nhật trong 3 năm

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 width và removeText .

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()
                    }
                }
            }
    }
}