Overview
사용자들은 즉시 그들의 손 끝에서 데이터를 기대하는 것이 익숙해졌고 그것을 “구글 효과”라고 부릅니다. 이번 튜토리얼에서는 사용자가 검색 결과를 기다리게 하는 대신에 어떻게 매우 빠르게 비동기적으로 Realm에 있는 데이터를 검색해줄 수 있는지룰 RealmSearchViewController 사용법과 함께 보여줄 것입니다.
지금 같이 시작은 하지만, 빠르게 최종 결과물을 원한다면 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
를 만드는 것을 보여줍니다. BlogPostTableViewCell
에 titleLabel
, emojiLabel
와 contentLabel
등.
이제 이 새로운 셀을 활용해봅시다. 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
를 설치할 수 있습니다. 그래서 BlogSearchViewController
에 import 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의 불리언 값을 추가합니다.
이제 끝났습니다. :)
번역 : Yongbin Cha
컨텐츠에 대하여
이 컨텐츠는 저자의 허가 하에 이곳에서 공유합니다.