[SwiftUI] Gradient Tag Toggle Button

테그 버튼들을 토글 방식으로 나열해서 사용하려고 만들었음.

버튼 컬러는 별도 변수로 받아서 사용하면됨.. 예제니 참고만 하시길

import SwiftUI

struct TagTogleButton: View {
    @Binding var isSelected: Bool
    var tag: String = "테스트"
    
    let clickCloser: ((_ tag: String) -> Void)
    
    var body: some View {
        Button {
            isSelected.toggle()
            clickCloser(tag)
        } label: {
            Text(tag)
                .font(UIFont.notoSansFont(forFont: .NotoSansCJKkrRegular, size: 12))
                .foregroundColor(.white)
                .padding(EdgeInsets(top: 5, leading: 10, bottom: 5, trailing: 10))
        }
        .background(
            getBackgroundView()
        )
        //Border 그라데이션 라인
        .overlay(
            getBorderView()
        )
    }
    
    @ViewBuilder
    private func getBackgroundView() -> some View {
        
        if isSelected == true {
            LinearGradient(
                colors: [.red, .yellow],
                startPoint: .leading,
                endPoint: .trailing
            )
            .cornerRadius(30)
        } else {
            LinearGradient(
                colors: [.gray],
                startPoint: .leading,
                endPoint: .trailing
            )
            .cornerRadius(30)
        }
    }
    
    @ViewBuilder
    private func getBorderView() -> some View {
        if isSelected == true {
            RoundedRectangle(cornerRadius: 30)
                .stroke(LinearGradient(
                    colors: [.red, .yellow],
                    startPoint: .leading,
                    endPoint: .trailing
                ), lineWidth: 1)
        } else {
            RoundedRectangle(cornerRadius: 30)
                .stroke(LinearGradient(
                    colors: [.secondary],
                    startPoint: .leading,
                    endPoint: .trailing
                ), lineWidth: 1)
        }
    }
}

 

 

[사용방법]

struct SearchTag: Codable {
    var cnt: Int?
    var hashtag: String?
    var isSelected: Bool? = false // 상태변경 체크용 API 하고 관련없음
    
    enum CodingKeys: String, CodingKey {
        case cnt
        case hashtag
        case isSelected
    }
}

extension Binding where Value == Bool? {
    func onOptional(_ fallback: Bool) -> Binding<Bool> {
        return Binding<Bool>(get: {
            return self.wrappedValue ?? fallback
        }) { value in
            self.wrappedValue = value
        }
    }
}

var sortTags: [String] = ["HOT", "NEW"]
    
@Binding var sortType: SortType
@Binding var searchTags: [SearchTag]// = [SearchTag(cnt: 1, hashtag: "테스트")]
@Binding var gridType: GridType
@State private var showingTagSheet: Bool = false

var tagSelectedCloser: (_ tag: String) -> Void
var sortSelectedCloser: () -> Void
    
var body: some View {
    HStack {
        
        /*
         Tag용 버튼 별도 개발
         - 정렬용 스위치
         - Tag용 토클
         */
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(sortTags, id: \.self) { sortTag in
                    
                    if sortTag == "HOT" {
                        Button {
                            sortType = .hot
                            sortSelectedCloser()
                        } label: {
                            Text("• " + sortTag)
                                .font(UIFont.notoSansFont(forFont: .NotoSansCJKkrRegular, size: 12))
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 10, bottom: 5, trailing: 10))
                        }
                        .background(
                                LinearGradient(
                                    colors: sortType == .hot ? [.red, .yellow] : [.gray],
                                    startPoint: .leading,
                                    endPoint: .trailing
                                )
                                .cornerRadius(30)
                            
                        )
                        //Border 그라데이션 라인
                        .overlay(
                            RoundedRectangle(cornerRadius: 30)
                                .stroke(LinearGradient(
                                    colors: sortType == .hot ? [.red, .yellow] : [.secondary],
                                    startPoint: .leading,
                                    endPoint: .trailing
                                ), lineWidth: 1)
                        )
                    }
                    
                    if sortTag == "NEW" {
                        Button {
                            sortType = .new
                            sortSelectedCloser()
                        } label: {
                            Text("• " + sortTag)
                                .font(UIFont.notoSansFont(forFont: .NotoSansCJKkrRegular, size: 12))
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 10, bottom: 5, trailing: 10))
                        }
                        .background(
                            LinearGradient(
                                colors: sortType == .new ? [.red, .yellow] : [.gray],
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                            .cornerRadius(30)
                            
                        )
                        //Border 그라데이션 라인
                        .overlay(
                            RoundedRectangle(cornerRadius: 30)
                                .stroke(LinearGradient(
                                    colors: sortType == .new ? [.red, .yellow] : [.secondary],
                                    startPoint: .leading,
                                    endPoint: .trailing
                                ), lineWidth: 1)
                        )
                    }
                }
                
                // Tag 리스트 / 선택 버튼
                  ForEach(searchTags, id: \.hashtag) { searchTag in
                ForEach(searchTags.indices, id: \.self) { index in
                    
                    if let tag = searchTags[index].hashtag {
                        TagTogleButton(isSelected: $searchTags[index].isSelected.onOptional(false),
                                       tag: tag) { tag in
                            
                            print("\(tag) : \(searchTags[index].isSelected)")
                            tagSelectedCloser(tag)
                            
                        }
                    }
                }
            }
        }
        
        Button {
            showingTagSheet.toggle()
        } label: {
            Image("tag_more_icon")
        }
        .padding()
        .fullScreenCover(isPresented: $showingTagSheet, content: {
            TagSheetsView(showingTagSheet: $showingTagSheet)
        })
    }
}