iOS 검색 컨트롤러를 Swift로 구축하기

Overview

사용자들은 즉시 그들의 손 끝에서 데이터를 기대하는 것이 익숙해졌고 그것을 “구글 효과”라고 부릅니다. 이번 튜토리얼에서는 사용자가 검색 결과를 기다리게 하는 대신에 어떻게 매우 빠르게 비동기적으로 Realm에 있는 데이터를 검색해줄 수 있는지룰 RealmSearchViewController 사용법과 함께 보여줄 것입니다.

Cover image of the ios search controller in action

지금 같이 시작은 하지만, 빠르게 최종 결과물을 원한다면 GitHub에 최종 소스코드를 살펴보시면 됩니다.

혹시 Objective-C 버전을 찾고 계신다면, 이 동일한 API인 ABFRealmSearchViewController를 이용한 튜토리얼을 확인하실수 있습니다.

튜토리얼

우선은 “Single View Application” 템플릿을 사용하여 새로운 Xcode 프로젝트를 만듭니다. 그리고 “Language”는 Swift로 설정하고, “Use Core Data”는 체크를 해제하세요.

RealmSearchViewController은 CocoaPods을 통해 사용하실 수 있습니다. (혹시 CocoaPods을 설치하지 않은 분은 계속 다음 단계를 따라 하시면 됩니다.) 터미널에서 만드신 프로젝트 폴더로 위치를 옮기시고 Podfile을 열어주세요. RealmSearchViewController을 설치 하시려면, 간단하게 방금 만드신 Podfile에 다음을 추가해주시길 바랍니다.

use_frameworks!

pod 'RealmSearchViewController'

# We will also be using a few more pods too:
# Easy UIViewController to display website
pod 'TOWebViewController'

# Pre-built data model with data culled from Realm.io Blog
pod 'RealmSwiftBlogData'

이런 개발 뉴스를 더 만나보세요

터미널에서 pod install을 실행해주세요. 이는 자동으로 Realm Swift를 설치를 해줍니다. (이 CocoaPods을 처음 사용하는 경우에 조금 시간이 걸릴 수 있습니다. 나중에 사용하실 때는 속도가 훨씬 빨라집니다.)

이 작업을 끝내시면, Xcode 창을 닫으시고 pods 내부 클래스를 사용할 수 있게 하는 CocoaPods으로 만든 xcworkspace 파일을 열어주세요.

Main.storyboard로 이동을 하신 다음 생성된 뷰 컨트롤러를 삭제하세요. (ViewController.swift을 삭제하시면 됩니다.) 그리고 UINavigationController를 드래그 해주세요. 이는 루트 뷰 컨트롤러인 UITableViewController을 만들어 줄 것입니다. 새로 추가된 UINavigationController에서 오른쪽 사이드 바에 있는 “Is Initial View Controller” 체크를 해주시길 바랍니다.

이 내용은 아래의 영상을 통해서 확인하실 수 있습니다.

다음으로 BlogSearchViewController라고 불리는 새로운 클래스를 만듭니다. 그리고 RealmSearchViewController을 상속받게 합니다. 이것은 새로운 파일 안에 다음을 추가하면 됩니다.

import RealmSearchViewController

다시 Main.storyboard로 이동아여 UITableViewController을 클릭해주세요. 그리고 “Class”(오른쪽 상단에 Identity Inspector에 있는)에 BlogSearchViewController로 변경을 해주세요.

이것은 RealmSearchViewController의 하위 클래스이기 때문에 이제 우리는 데이터 바인딩 속성을 설정할 수 있습니다. attributes 탭에 “Entity Name” 을 클릭하여 “BlogObject”로 입력을 해주세요. “Search Property”에 “title”입력을 해주세요. (확인을 위해 각 하나를 입력한 후 Enter를 눌러주세요.) “Use Contains”에서 “On”으로 설정해주세요.

마지막으로 테이블 뷰 셀을 클릭해서 Identifier에 “blogCell”로 바꿔줍니다. (입력한 후 Enter를 눌러주세요.) 이 내용은 아래의 영상을 통해서 확인하실 수 있습니다.

이제 AppDelegate.swift로 이동합니다. 그리고 상단에 import RealmSwiftBlogData을 추가하세요. RealmSwiftBlogData 프레임워크는 Realm 파일에서 데이터를 로드해야 할 것입니다. 단순하게 하기 위해서 BlogObject의 클래스 메소드로 이 작업을 할 것입니다. 단지 viewDidLoad()만 추가해주면 됩니다.

import RealmSwiftBlogData
import RealmSwift

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.

        if try! Realm().objects(BlogObject).count == 0 {
            BlogObject.loadBlogData()
        }

        return true
    }

...

}       

이제 스토리보드 설정을 가지고 블로그 데이터를 입력할 것입니다. 그러나 우리는 표시를 위해 UITableViewCells를 구성하는데 데이터 소스 메소드를 구현해야합니다. BlogSearchViewController을 라인에 추가하시면 됩니다.

import RealmSwiftBlogData
import RealmSwift
...

override func searchViewController(controller: RealmSearchViewController, cellForObject object: Object, atIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = self.tableView.dequeueReusableCellWithIdentifier("blogCell", forIndexPath: indexPath)

        if let blog = object as? BlogObject {
            cell.textLabel?.text = blog.title.capitalizedString
        }

        return cell
}

이제 실행을 하면 블로그 게시물의 목록이 표기사 될 것입니다. 벌써 꽤 많은 것을 했습니다. 잠시 커피나 맥주를 마시며 기뻐하시고 다음 부분에서는 위의 예제와 비슷하게 어떻게 할 것인지를 해보겠습니다.

먼저 UITableViewCell을 상속 받는 BlogPostTableViewCell라고 불리는 커스텀 테이블 뷰 셀을 만드세요. 우리는 스토리보드를 사용하기 때문에 “Also create XIB” 체크를 해제해주세요.

Main.storyboard로 이동하여 셀의 높이를 88로 높여줍니다. 그런 다음에 제목과 이모티콘, 내용을 대표할 3개의 UILabels를 추가해줍니다. 하지만 위 예제처럼 스타일을 하고 싶다면, 그냥 여러 줄의 텍스트가 표시 되도록 0으로 내용 라벨의 “Number of Lines”을 설정하면 됩니다.

아래의 동영상에서 보여주는것 처럼 오토레이아웃 제한을 설정합니다. 기초적인 것만 필요하기 때문에 이 튜토리얼에서는 너무 많은 오토레이아웃을 하지 않을 것입니다.만약에 오토레이아웃에 대해서 자세한 내용을 알고 싶으시다면, 아래의 훌륭한 자료 를 확인해보시면 됩니다. 링크 1, 링크 2, 링크 3, 링크 4, 링크 5

아래의 비디오는 스토리보드에 프로토타입 셀을 만드는 방법과 다양한 라벨의 모양을 구성하고 만드는 방법, IBOutlet를 만드는 것을 보여줍니다. BlogPostTableViewCelltitleLabel, emojiLabelcontentLabel 등.

이제 이 새로운 셀을 활용해봅시다. BlogSearchViewController.swift로 돌아가서 검색 컨트롤러 데이타 소스 메소드를 업데이트를 합니다.

override func searchViewController(controller: RealmSearchViewController, cellForObject object: Object, atIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = self.tableView.dequeueReusableCellWithIdentifier("blogCell", forIndexPath: indexPath) as! BlogPostTableViewCell

        if let blog = object as? BlogObject {
            cell.emojiLabel.text = blog.emoji

            cell.titleLabel.text = blog.title

            cell.contentLabel.text = blog.content
        }

        return cell
}

viewDidLoad()에 이러한 줄을 추가하여 자동으로 테이블 뷰에 행의 크기를 구성해야합니다.

override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.estimatedRowHeight = 88
        self.tableView.rowHeight = UITableViewAutomaticDimension
}

마지막으로 Realm의 웹사이트에서 블로그를 가지고와 마지막 마무리를 추가할 수 있습니다. 다시 CocoaPods을 불러 TOWebViewController 를 설치할 수 있습니다. 그래서 BlogSearchViewControllerimport TOWebViewController을 추가하고 뷰 컨트롤러 델리게이트 메소드를 추가합니다.

override func searchViewController(controller: RealmSearchViewController, didSelectObject anObject: Object, atIndexPath indexPath: NSIndexPath) {
        controller.tableView.deselectRowAtIndexPath(indexPath, animated: true)

        if let blog = anObject as? BlogObject {
            let webViewController = TOWebViewController(URLString: blog.urlString)

            let navigationController = UINavigationController(rootViewController: webViewController)

            self.presentViewController(navigationController, animated: true, completion: nil)
        }
}

웹사이트 URLs를 로드할 수 있는지 확인하기 위해 iOS 9 부터는 Info.plist에 안전하지 않은 URL 제외에 추가해야합니다. “App Transport Security Settings”에 대한 dictionary 항목을 추가하고, dictionary 내에 “Allow Arbitrary Loads” 키를 위해 YES의 불리언 값을 추가합니다.

App Transport Security Settings

이제 끝났습니다. :)


번역 : Yongbin Cha

다음: iOS를 위한 Realm #3: 간단하게 iOS 앱의 Realm 데이터 보호하기 - 암호화 튜토리얼

General link arrow white

컨텐츠에 대하여

이 컨텐츠는 저자의 허가 하에 이곳에서 공유합니다.


Realm Team

Realm의 미션은 더 나은 앱을 빠르게 개발할 수 있도록 돕는 것입니다. 이를 위해 저희는 개발자들이 실시간 협업, 가상 현실, 라이브 데이터 동기화, 오프라인 경험, 메시징 등 정교하고 강력한 기능을 쉽게 개발할 수 있도록 하는 개발 도구와 플랫폼을 제공하고 있습니다.

저희는 모바일 인터넷이 수많은 사용자와 보다 많은 디바이스가 속한 개방형 네트워크와 이들 간의 실시간 상호 작용으로 진화할 것이라고 믿으며, 개발자가 이같은 방향으로 발전할 수 있도록 돕기 위해 저희 제품들을 개발하고 있습니다.

4 design patterns for a RESTless mobile integration »

close