AppleMango

[iOS/Swift] UISearchBar를 활용한 검색 기능 개발

Mango — Mon, 6 Jan 2025 21:23:43 +0900

안녕하세요. 애플망고입니다

이번 포스팅은 UISearchBar에 대해 정리해보겠습니다.

UISearchBar

UISearchBar는 사용자로부터 검색 정보를 받기 위한 특수화 된 뷰인데요. 이 뷰는 iOS에서 기본적으로 제공되는 UI 요소로, 검색 인터페이스를 간단하게 구현할 수 있도록 도와줍니다. 저는 UICollectionView와 함께 사용했고, 특정 데이터를 필터링하는데 사용하였습니다.

UISearchBar 추가하기

private let searchBar = UISearchBar()

...

private func setupSearchBar() {
    searchBar.delegate = self
    searchBar.placeholder = "그룹 이름을 입력해주세요."
    searchBar.backgroundImage = UIImage() // border line 제거
    view.addSubview(searchBar)
}

// Auto Layout 설정

navigationItem.titleView = searchBar 를 사용하면 따로 레이아웃 잡아 줄 필요없이 네비게이션 바의 중앙에 UISearchBar가 표시됩니다. 저는 원하는 위치에 넣고 싶어서 저 방식을 선택했습니다. 그리고 몇가지 설정을 해주었는데요.

border line 제거

기본적으로 UISearchBar에는 상단과 하단에 경계선(border line)이 포함되어 있습니다. 이를 제거하기 위해 backgroundImage를 빈 이미지(UIImage())로 설정했습니다. 이 코드를 추가해주면 border line이 제거가 됩니다.

searchBar.backgroundImage = UIImage()

UISearchBarDelegate

사용자가 입력한 Text를 감지해 Cell을 표시하고 싶어서 UISearchBarDelegate도 사용해주었습니다.

메서드	설명
func searchBar(UISearchBar, textDidChange: String)	텍스트가 변경될 때마다 호출
func searchBarSearchButtonClicked(UISearchBar)	검색 버튼을 눌렀을 때 호출
func searchBarCancelButtonClicked(UISearchBar)	취소 버튼을 눌렀을 때 호출
func searchBarTextDidBeginEditing(UISearchBar)	검색창 편집이 시작될 때 호출
func searchBarTextDidEndEditing(UISearchBar)	검색창 편집이 끝날 때 호출

textDidChange

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    guard let text = searchBar.text else { return }
    viewModel.searchWords(text: text)
}

textDidChange메서드를 통해 사용자가 검색창에 텍스트를 입력할 때마다 단어를 검색하는 함수를 호출해주었습니다.

searchBarSearchButtonClicked

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    guard let text = searchBar.text else { return }
    viewModel.searchWords(text: text)
    searchBar.resignFirstResponder()
}

searchBarSearchButtonClicked 메서드를 통해 검색 버튼을 클릭했을때도 똑같이 단어를 검색하는 함수를 호출했습니다. 검색이 끝난 상태이기 때문에 searchBar.resignFirstResponder()를 통해 키보드도 내려주었습니다.

searchBarCancelButtonClicked

func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    searchBar.text = ""
    viewModel.fetchWords()
    searchBar.resignFirstResponder()
}

searchBarCancelButtonClicked 메서드를 통해 취소 버튼을 클릭했을때는 다시 모든 Cell을 불러왔습니다. 마찬가지로 키보드도 내려주었습니다. 이때 취소버튼은 searchBarTextDidBeginEditing과 searchBarTextDidEndEditing을 통해 검색이 시작됐을때 생기고, 끝났을때 없애주었는데요.

private func customizeCancelButton(_ searchBar: UISearchBar) {
    if let cancelButton = searchBar.value(forKey: "cancelButton") as? UIButton {
        cancelButton.setTitle("취소", for: .normal)
        cancelButton.setTitleColor(.gray, for: .normal)
        cancelButton.titleLabel?.font = UIFont.systemFont(ofSize: 16)
    }
}

먼저 기본으로 제공되는 cancel버튼이 마음에 들지 않아서 커스텀해주었습니다.

searchBarTextDidBeginEditing

func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
    searchBar.showsCancelButton = true
    customizeCancelButton(searchBar)
}

searchBarTextDidBeginEditing 메서드를 통해 입력이 시작될때 showsCancelButton을 true로 바꿔주었고 cancel버튼도 바꿔주었습니다.

searchBarTextDidEndEditing

func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
    searchBar.showsCancelButton = false
}

searchBarTextDidBeginEditing 메서드를 통해 입력이 끝났을때 다시 showsCancelButton을 false로 변경해주었습니다.

공식 문서 링크

UISearchBar | Apple Developer Documentation

A specialized view for receiving search-related information from the user.

developer.apple.com

UISearchBarDelegate | Apple Developer Documentation

A collection of optional methods that you implement to make a search bar control functional.

developer.apple.com

UIKit에서 Swift Charts Framework 사용하기

Mango — Thu, 7 Nov 2024 20:53:03 +0900

안녕하세요 :D 애플망고입니다

이번에 새로운 앱을 개발하면서 그래프를 그릴 일이 있었는데요.DGCharts라이브러리를 사용하려고 했는데

제가 원하는 모양의 그래프가 없더라고요.그래서 Swift Charts Framework를 사용하게 되었습니다.

Swift Charts

import SwiftUI
import Charts

struct ChartView: View {
    var dailyPriceData: [DailyPriceData]
    
    var body: some View {
        Chart {
            ForEach(dailyPriceData) { data in
                BarMark(
                    xStart: .value("Price", data.minPrice),
                    xEnd: .value("Price", data.maxPrice + 1),
                    y: .value("Day", "\(data.day)")
                )
                .foregroundStyle(data.day.contains("☀️") ? Color.Chart.dayColor : Color.Chart.nightColor)
                .annotation(position: .trailing) {
                    Text(data.minPrice == data.maxPrice
                        ? "\(Int(data.minPrice))"
                        : "\(Int(data.minPrice)) - \(Int(data.maxPrice))")
                        .font(.caption)
                        .foregroundColor(.black)
                }
            }
        }
        .padding()
    }
}

Swift Charts를 쓰기 위해서는 먼저 SwiftUI와, Charts를 import 해주어야합니다.

저는 BarMark 형식을 이용해 가로 막대 그래프를 만들었습니다.

xStart : x의 시작점이고, 저는 최소값을 넣었습니다.

xEnd : x의 끝점이고, 저는 최대값을 넣었는데 , 데이터값에 +1을 해준 이유는 Start값과 End값이 같으면 아예 표시가 안되더라고요.

여기에 annotation을 추가해 최소, 최대 값을 표시해주었습니다.

UIKit에서 SwiftUI 사용하기

// UIHostingController를 사용하여 SwiftUI View(ChartView)를 포함
let hostingController = UIHostingController(rootView: ChartView(dailyPriceData: dailyPriceData))

// UIHostingController를 현재 VC의 자식 VC로 추가
addChild(hostingController)

view.addSubview(hostingController.view)

hostingController.view.frame = view.frame

// UIHostingController가 부모 뷰 컨트롤러에 추가됨을 알림
hostingController.didMove(toParent: self)

UIHostingController를 사용해 UIKit에 SwiftUI View를 통합할 수 있습니다.

먼저 UIHostingController(rootView:)를 사용하여 SwiftUI 뷰인 ChartView를 UIKit에서 사용할 수 있게 만들었습니다.

addChild와 didMove(toParent:)를 사용해 UIHostingController의 생명주기가 부모와 동기화되도록 만들었습니다.

결과

NotificationCenter를 활용한 뷰 컨트롤러 간 데이터 전달 방법

Mango — Wed, 6 Nov 2024 21:44:02 +0900

안녕하세요 :D 애플망고입니다

이번에 새로운 앱을 개발하면서 첫 번째 VC에서 두 번째, 세번째 VC로 동일한 데이터를 전달해야 했습니다.

이를 위해 NotificationCenter를 활용해 데이터 전달을 하기로 했습니다.

그럼 NotificationCenter를 활용해 데이터 전달하는 방법에 대해 알아볼까요?

저는 1번 VC에서 2, 3번 VC로 데이터 전달이 필요했습니다.

1. NotificationCenter post

1번 VC

NotificationCenter.default.post(name: Notification.Name("notiName"), object: nil, userInfo: ["data": data])

name: NotificationCenter의 이름입니다. 특정 알림을 구분하는 용도로 사용합니다.

object : 특정 객체에 대해서만 알림을 받고 싶을 때 사용하면 됩니다. 기본값은 nil로, 모든 객체에서 발생한 알림을 받습니다.

userInfo: 전달하고 싶은 데이터를 여기에 저장해서 전달합니다. 딕셔너리의 형태로 사용합니다.

NotificationCenter.default.post(name: .notiName, object: nil, userInfo: ["data": data])

extension Notification.Name {
    static let notiName = Notification.Name("notiName")
}

이름은 extension을 통해 따로 정의해서 쓸 수 있습니다.

2. NotificationCenter Observer

2, 3번 VC

NotificationCenter.default.addObserver(self, 
                                        selector: #selector(self.receiveData), 
                                        name: .notiName, 
                                        object: nil)

self는 알림을 수신할 객체를 뜻합니다. 보통은 자기 자신이기 때문에 self를 씁니다.

selector : 알림을 받았을 때 호출될 메서드입니다.

name : NotificationCenter의 이름입니다.

object: 알림을 발송한 객체이며, nil은 모든 객체에서 발생한 알림을 수신합니다.

    @objc private func receiveData(_ noti: Notification) {
        print(#function)
    }

이렇게 함수를 만들어서 selector에 넣어주면 됩니다.

3. Observer 제거해주기

    deinit {
        NotificationCenter.default.removeObserver(self)
    }

메모리 누수를 방지하기 위해 꼭 옵저버를 제거해줍니다.

[Swift] 구름 - 1차원 뿌요뿌요

Mango — Wed, 3 Jul 2024 22:45:25 +0900

문제 해결 과정

처음에는 앞, 뒤를 비교해서 같은 값이 나올때 start, 다른 값이 나올때 end를 저장해 해당 부분을 빼주는 식으로 구현했다.

이렇게 하니깐 테스트 케이스는 통과했는데 제출에서 몇 개 통과가 안됐다.

알고보니 스택과 관련된 문제였고, 스택을 통해 구현해보기로 했다.

우선 스택을 하나 생성하고, block을 하나씩 집어넣으면서

stack의 마지막 block과 현재 block이 같지 않을 때 마지막 block의 count가 m보다 크다면 마지막 block 삭제

stack의 마지막 block과 현재 block이 같다면 stack의 마지막 block의 Count += 1, 같지 않으면 새로 append 해주는 방식으로 구현했다.

중간에 이걸 반대로 생각한건 아닌데 아무튼 반대로 해도 될 줄 알아서 좀 막혔었다.

나의 풀이

func puyoPuyo(_ blocks: [String]) -> String {
	var stack = [(String, Int)]()
	for block in blocks {
		// stack의 마지막 block과 현재 block이 같지 않을 때
		if let last = stack.last, last.0 != block {
			// 마지막 block의 count가 m보다 크다면
			if let last = stack.last, last.1 >= m {
				// 마지막 block 삭제
				stack.removeLast()
			}
		}
		// stack의 마지막 block과 현재 block이 같다면
		if let last = stack.last, last.0 == block {
			// stack의 마지막 block의 Count += 1
			stack[stack.count - 1].1 += 1
		} else {
			// 같지 않으면 새로 append
			stack.append((block, 1))		
		}
	}
	
	// 마지막 남은 값이 m 이상이라면 삭제
	for (_, count) in stack {
		if count >= m {
			stack.removeLast()
		}
	}
	
	return stack.map { String(repeating: $0.0, count: $0.1) }.joined()
}

let input = readLine()!.split(separator: " ").map { Int(String($0))! }
let (n, m) = (input[0], input[1])
let blocks = readLine()!.map { String($0) }
let result = puyoPuyo(blocks)
print(result.count == 0 ? "CLEAR!" : result)

blocks을 다 돌고 나왔을때 남아있는 값이 m 이상이면 삭제해줬다.

return 할때 block을 count만큼 반복해서 배열로 만들어서 joined해줬다.

마지막 print할때 빈 배열이라면 CLEAR! 아니라면 result값을 그대로 출력해줬다.

[Swift] 백준 12933 - 오리

Mango — Thu, 20 Jun 2024 22:09:06 +0900

문제 해결 과정

처음에는 아래 예시처럼 quack / quack이라 두마리인줄 알았는데 알고보니 연속된 quack은 한마리였던거임!!
그리고 울음소리를 전부 사용해야 한다는 부분이 좀 헷갈렸다.

그래서 정상적인 울음소리가 아닌 경우
- q로 시작하지 않거나
- k로 끝나지 않거나
- 울음소리 전체가 5로 나누어떨어지지 않으면 -1을 출력해주었다.

duckSound[0] != "q" || duckSound[soundCnt-1] != "k" || soundCnt % 5 != 0

또한 울음 소리의 수는 맞지만 윗 예시처럼 이상한 울음소리를 거르기 위해 아래와 같은 조건 추가했다.

if duckSound[i] == "q" && visited[i] == 0 {
      getDuckCnt(i)
}

getDuckCnt

func getDuckCnt(_ start: Int) {
    var idx = 0 //quack용 index
    var isNewDuck = true //새로운 오리인지 아닌지
    for i in start..<soundCnt {
        if duckSound[i] == quack[idx] && visited[i] == 0 {
            idx += 1
            visited[i] = 1
            if duckSound[i] == "k" {
                idx = 0
                if isNewDuck {
                    duckCnt += 1
                    isNewDuck = false
                }
            }
        }
    }
}

여기서는 quack 배열을 만들고, quack 전용 idx를 만들어서 울음소리와 quack을 하나씩 비교하고 방문 처리
새로운 오리인지 아닌지 확인해주는 변수를 추가
만약에 새로운 오리라면 duckCnt += 1해주고
isNewDuck = false 바꿔주면서
k 다음 q가 오는 한마리의 오리가 우는 상황을 대비

if duckCnt == 0 || visited.contains(0) {
        print(-1)
    } else {
        print(duckCnt)
    }

오리의 수가 0이거나 방문하지 않은 울음소리가 있다면
이 또한 정상적인 울음소리가 아니기 때문에 -1

나의 풀이

func getDuckCnt(_ start: Int) {
    var idx = 0 //quack용 index
    var isNewDuck = true //새로운 오리인지 아닌지
    for i in start..<soundCnt {
        if duckSound[i] == quack[idx] && visited[i] == 0 {
            idx += 1
            visited[i] = 1
            if duckSound[i] == "k" {
                idx = 0
                if isNewDuck {
                    duckCnt += 1
                    isNewDuck = false
                }
            }
        }
    }
}

let duckSound = readLine()!.map { String($0) }
let soundCnt = duckSound.count
var visited = Array(repeating: 0, count: soundCnt)
let quack = ["q", "u", "a", "c", "k"]
var duckCnt = 0 // 출력해야 할 오리 수

if duckSound[0] != "q" || duckSound[soundCnt-1] != "k" || soundCnt % 5 != 0 {
    print(-1)
} else {
    for i in 0..<soundCnt {
        if duckSound[i] == "q" && visited[i] == 0 {
            getDuckCnt(i)
        }
    }
    if duckCnt == 0 || visited.contains(0) {
        print(-1)
    } else {
        print(duckCnt)
    }
}

[Swift] 프로그래머스 - 특정 문자열로 끝나는 가장 긴 부분 문자열 찾기

Mango — Wed, 19 Jun 2024 20:26:13 +0900

문제 해결 과정

이 문제에 대한 내 계획은 pat의 마지막 원소의 위치를 찾아서, 처음부터 pat의 마지막 원소까지 출력하기였다.

그래서 suffix로 마지막 원소를 찾았고, 처음부터 pat까지 출력하면 되는데...

이거 풀때는 Swift 문자열 다루는 방법을 전혀 모르는 상태라 아래와 같은 코드로 도전해봤다.

~~참고로 블로그 옮기는 중이다..~~

    let end = pat.suffix(1)
    let lastIndex = myString.lastIndex(of: end)
    return myString[0...lastIndex]

error: cannot convert value of type 'String.SubSequence' (aka 'Substring') to expected argument type 'String.Element' (aka 'Character')

나의 풀이

func solution(_ myString:String, _ pat:String) -> String {
    let end = Character(String(pat.suffix(1)))
    if let lastIndex = myString.lastIndex(of: end) {
        let idx = myString.distance(from: myString.startIndex, to: lastIndex)
        let res = myString.prefix(idx+1)
        return String(res)
    }
    return ""
}

우선 lastIndex(of:)를 사용하기 위해 String.SubSequence인 end값을 Character로 변환해주었다.
그리고 distance(from:to:)는 from과 to의 거리를 리턴해주는데 이걸 사용해서 거리를 구하고

prefix + 1을 통해 결과를 도출해냈다. prefix + 1을 한 이유는 prefix는 문자열의 길이만큼만 가져오기 때문이다.

SwiftUI - Sticky Header

Mango — Tue, 21 Mar 2023 22:27:38 +0900

안녕하세요 :D 망고입니다

SwiftUI로 Sticky Header 만드는 방법에 대해 알아보겠습니다.

Sticky Header란?

사용자가 화면을 아래로 스크롤 할 때 화면 상단에 고정되는 뷰를 말합니다.

~~처음엔 Sticky Header라는 용어를 몰라서 한참 찾아봄 ㅠㅠ~~

LazyVStack의 pinnedViews라는 옵션을 통해 설정할 수 있다.

[.sectionHeaders]를 통해 상단에 고정시키도록 설정했고,

post, liked 부분을 filterBar로 구현 한 다음 Section(header: filterBar)에 넣어주었다.

    private var StickyHeader: some View {
        LazyVStack(pinnedViews: [.sectionHeaders]) {
            Section(header: filterBar) {
                코드
            }
        }
    }

    private var filterBar: some View {
        HStack {
		코드
        }
    }

SwiftUI - TabView

Mango — Thu, 16 Mar 2023 15:24:06 +0900

안녕하세요 :D 망고입니다

SwiftUI로 TabView 만드는 방법에 대해 알아보겠습니다.

TabView

TabView는 Uikit의 UITabBarController라고 생각하면 됩니다.

만드는 방법은 Uikit에 비해 매우 간단합니다.

    var body: some View {
        TabView {
            FirstView()
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
            
            SecondView()
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("second")
                }

            ThirdView()
                .tabItem {
                    Image(systemName: "3.circle")
                    Text("third")
                }
        }
    }

TabView안에 각각의 View를 넣고 tabItem을 통해 이미지와 텍스트를 지정해줍니다.

SwiftUI - Apple Sign In With Firebase

Mango — Tue, 14 Mar 2023 21:19:59 +0900

안녕하세요 :D 망고입니다

SwiftUI로 Firebase와 연동한 Apple 로그인 하는 방법에 대해 알아보겠습니다.

Firebase

Firebase 홈페이지에서 새 프로젝트를 생성하고 Authentication로 간 뒤

Sign-in-method에서 새 제공업체 추가를 누르고 Apple을 추가해준다.

그 다음 Xcode로 돌아와 SPM을 이용해 firebase SDK(github.com/firebase/firebase-ios-sdk.git) 를 설치한다.

PROJECT -> Package Dependencies -> + 버튼 클릭

firebase-ios-sdk를 설치해주고

FirebaseAuth를 선택해 Add Packge해준다.

Apple

Apple 로그인을 사용하기 위해서 https://developer.apple.com/account/resources/identifiers/list 로 이동한 뒤

Identifiers에서 +버튼을 눌러 추가해준다.

App IDs를 클릭하고 Continue 해준다.

Description과 Bundle ID를 넣어준다.

Capabilities에서 Sign In with Apple을 선택하고 저장해준다.

Xcode로 돌아가 TARGETS -> Signing&Capabilities 에서 + 버튼을 눌러 Sign in with Apple을 추가해준다.

Code

import AuthenticationServices

SignInWithAppleButton { (request) in
                        loginData.nonce = randomNonceString()
                        request.requestedScopes = [.email, .fullName]
                        request.nonce = sha256(loginData.nonce)
                        
                    } onCompletion: { (result) in
                        switch result {
                        case .success(let user):
                            print("success")
                            guard let credential = user.credential as? ASAuthorizationAppleIDCredential else {
                                print("error with firebase")
                                return
                            }
                            loginData.authenticate(credential: credential)
                        case .failure(let error):
                            print(error.localizedDescription)
                        }
                    }

원하는 위치에 SignInWithAppleButton 만들어준다.

import Firebase
import CryptoKit
import AuthenticationServices

class LoginViewModel: ObservableObject {
    
    @Published var nonce = ""
    
    func authenticate(credential: ASAuthorizationAppleIDCredential) {
        //getting token
        guard let token = credential.identityToken else {
            print("error with firebase")
            return
        }
        
        guard let tokenString = String(data: token, encoding: .utf8) else {
            print("error with token")
            return
        }
        
        let firebaseCredential = OAuthProvider.credential(withProviderID: "apple.com", idToken: tokenString, rawNonce: nonce)
        Auth.auth().signIn(with: firebaseCredential) { result, err in
            if let err = err {
                print(err.localizedDescription)
            }
            
            print("로그인 완료")
        }
    }
}

// Helper for Apple Login with Firebase
func sha256(_ input: String) -> String {
    let inputData = Data(input.utf8)
    let hashedData = SHA256.hash(data: inputData)
    let hashString = hashedData.compactMap {
        String(format: "%02x", $0)
    }.joined()
    
    return hashString
}

func randomNonceString(length: Int = 32) -> String {
    precondition(length > 0)
    let charset: [Character] =
    Array("0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._")
    var result = ""
    var remainingLength = length
    
    while remainingLength > 0 {
        let randoms: [UInt8] = (0 ..< 16).map { _ in
            var random: UInt8 = 0
            let errorCode = SecRandomCopyBytes(kSecRandomDefault, 1, &random)
            if errorCode != errSecSuccess {
                fatalError(
                    "Unable to generate nonce. SecRandomCopyBytes failed with OSStatus \(errorCode)"
                )
            }
            return random
        }
        
        randoms.forEach { random in
            if remainingLength == 0 {
                return
            }
            
            if random < charset.count {
                result.append(charset[Int(random)])
                remainingLength -= 1
            }
        }
    }
    
    return result
}

import SwiftUI
//import Firebase

@main
struct 앱 이름: App {
    
    //@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate 
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

/*
class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        FirebaseApp.configure()
        return true
    }
}
*/

주석 처리 된 부분을 추가해준다.

Firebase로 가면 로그인이 된걸 확인할 수 있다.

SwiftUI - System Icons

Mango — Thu, 9 Mar 2023 14:22:01 +0900

안녕하세요 :D 망고입니다

SwiftUI의 System Icons에 대해 알아보겠습니다.

System Icons

Apple에서 기본 제공되는 아이콘들이다.

기본적인 사용 방법

Image(systemName: "아이콘 이름")

Image(systemName: "heart") //빈 아이콘
Image(systemName: "heart.fill") //채워진 아이콘

이런식으로 systemName: 아이콘 이름을 해주면 된다.

아이콘 이름은 https://developer.apple.com/sf-symbols/을 다운 받으면 편하게 볼 수 있다.

이런식으로 편하게 확인 가능!

옵션들

.font(.system(size: 36)) // 크기변경
.foregroundColor(.red) // 색상변경

.resizable()
.scaledToFit() //or .scaledToFill()
.frame(width: 200, height: 200) //프레임 크기에 맞게 크기변경
.clipped() // 프레임 크기 넘어간거 잘라줌