이 튜토리얼은 iOS 검색 컨트롤러를 Objective-C로 만드는 것을 다룹니다. Swift로 만드는 튜토리얼은 별도로 있습니다.
ABFRealmSearchViewController
클래스는 Realm 객체 클래스에 대한 텍스트 검색을 실행하는 데이블 뷰과 검색 창을 관리하는 컨트롤러 객체를 만듭니다.
단 27줄 코드로 텍스트 검색 인터페이스를 만들수 있습니다.
이 클래스는 non-blocking으로 백그라운드 쓰레드에서 텍스트 검색을 실행합니다. (RBQFetchedResultsController)
컨트롤러는 서브 클래스인 것으로 생각하면 됩니다. 기본적으로 resultsDataSource
과 resultsDelegate
프로토콜은 self
로 설정이 되어 있어 서브 클래스가 메소드를 구현할 수 있게 합니다.
GitHub에서 ABFRealmSearchController
코드를 보실 수 있습니다.
이번 튜토리얼에서는 ABFRealmSearchViewController
v1.2을 사용했습니다.
개요
검색은 많은 모바일 앱에서 필수적인 부분입니다. 사용자는 특히 모바일에서 가능한 빨리 자신의 정보를 찾고 싶어합니다. 대부분의 경우에서는 검색은 이를 구현하기 위한 시간이 개발자에 달려있습니다. 이 부가 기능은 쉽게 특정 속성을 바탕으로 Realm의 객체의 검색을 추가 할 수 있습니다.
이것은 매우 빠르면서 non-blocking이기 때문에 입력하는 동안 결과를 보여줍니다. 이제 이 기능을 사용한 앱을 만들어 봅시다.
튜토리얼
“Single View Application”을 사용한 새로운 Xcode 프로젝트를 만드세요. 언어는 Objective-C로 설정을 하고 “Use Core Data” 체크를 하지 마세요.
ABFRealmSearchViewController
는 CocoaPods통해 사용할 수 있습니다. (만약에 CocoaPods을 설치 하지 않았다면 설치를 하고 진행을 해주세요.) 터미널을 여시고 자신의 프로젝트 폴더로 ‘cd’ 하시고 touch Podfile
라고 실행을 해주세요. ABFRealmSearchViewController
을 설치하기 위해 간단하게 방금 만든 Podfile
에 다음을 추가해주세요.
pod "ABFRealmSearchViewController"
터미널에서 pod install
을 실행해주세요. 이건 자동으로 Realm을 설치합니다. (만약에 CocoaPods을 처음 사용한다면, 조금 시간이 걸릴 수 있지만 나중에 빠르게 사용하실 수 있습니다.)
위 작업을 끝냈을 때 Xcode 창을 다시 열어야 할 것입니다. 그리고 pods 내부의 클래스를 사용할 수 있는 CocoaPods이 만들어진 xcworkspace
파일을 열어주세요.
Main.storyboard
으로 이동하신 후 생성된 뷰 컨트롤러를 삭제합니다. 그리고 UINavigationController
을 드래그 합니다. 이것은 루트 뷰 컨트롤러로 UITableViewController
으로 만듭니다. 새로 추가된 UINavigationController
에서 오른쪽 사이드 바에 있는 Is Initial View Controller”을 체크해주세요.
UIViewController
을 상속하는 BlogSearchViewController
이라는 클래스를 만듭니다.
BlogSearchViewController.h
으로 이동하여 #import "ABFRealmSearchViewController.h"
을 추가하세요. 그리고 UIViewController
와 ABFRealmSearchViewController
의 서브 클래스를 교체합니다. 이를 완료하면 다음과 같이 보일겁니다:
#import <UIKit/UIKit.h>
#import "ABFRealmSearchViewController.h"
@interface BlogSearchViewController : ABFRealmSearchViewController
@end
이 튜토리얼에서는 샘플 데이터를 다운 받아 사용합니다. 데이터는 블로그 포스팅에 대한 정보를 가지고 있습니다. BlogObject.h
, BlogObject.m
, blog.json
, 과 emoji.json
을 프로젝트에 추가합니다. “Copy items if needed” 을 체크합니다.
main.storyboard
으로 이동하여, UITableViewController
을 선택하고 “Class”(오른쪽 상단 Identity Inspector에서)를 BlogSearchViewController
로 변경합니다.
BlogSearchViewController.m
으로 이동합니다. 상단에 #import "BlogObject.h"
을 추가합니다. 이 파일은 다음 처럼 되어 있을 겁니다.
#import "BlogSearchViewController.h"
#import "BlogObject.h"
@interface BlogSearchViewController ()
...
AppDelegate.m
으로 이동하여 블로그포스트를 로드합니다. 코드는 다음과 같습니다.
#import "AppDelegate.h"
#import "BlogObject.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
[BlogObject loadBlogData];
return YES;
}
...
[BlogObject loadBlogData]
는 Realm에서 blog.json
데이터를 객체로 변환하는 메소드입니다.
Main.storyboard
이동하여, 테이블 뷰 셀을 클릭하고 reuseIdentifier
을 “blogCell”로 변경합니다. (입력하신후 Enter를 누르세요.)
BlogSearchViewController
(“Root View Controller” 라 불리는)을 클릭합니다. 그리고 attributes tab을 클릭합니다. “Entity Name”에 “BlogObject”라 입력합니다. “Search Property”에는 “title”이라고 입력합니다. (하나 입력하고 Enter를 눌러주세요.) “Use Contains”은 “On”으로 설정합니다.
BlogSearchViewController.m
로 이동하여 검색 컨트롤러의 데이터 소스 메소드중 하나를 추가합니다.
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}
...
#pragma mark - ABFRealmSearchControllerDataSource
- (UITableViewCell *)searchViewController:(ABFRealmSearchViewController *)searchViewController
cellForObject:(id)anObject
atIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"blogCell" forIndexPath:indexPath];
BlogObject *blog = anObject;
cell.textLabel.text = [blog.title capitalizedString];
return cell;
}
지금 바로 시작하면, 블로그 포스트의 목록이 표시됩니다. 꽤 많은 것을 했는데요. 다음 부분에서는 우리는 위의 예와 비슷하에 스타일을 하는 방법을 알아볼 것 입니다.
첫째, UITableViewCell
을 상속받는 BlogPostTableViewCell
이라고 하는 커스텀 테이블 뷰 셀을 만듭니다. “Also create XIB file” 체크를 해주세요.
BlogPostTableViewCell.xib
로 이동하고 하단의 핸들을 드래그 하여 셀의 높이를 88 픽셀로 늘려줍니다. 그런다음 UILabel을 3개를 추가하는데 제목, 이모티콘, 컨텐츠를 나타냅니다. 하지만 위 스타일 처럼 하고 싶다면 컨텐츠 라벨의 라인의 수를 0 으로 설정하면 여러 줄의 텍스트가 표시됩니다.
“Identifier”을 추가하는 것을 잊지 마세요. “blogCell”로 설정하시면 됩니다.
다음 라애의 이미지처럼 오토레이아웃 제약 조건을 설정합니다. 기초만 하기 때문에 이 튜토리얼에서 너무 많은 오토 레이아웃을 하진 않을 것입니다. 오토 레이아웃에 대한 자세한 내용이 알고 싶으시면, 아래를 참고하세요.
이러한 제약은 셀이 모든 컨텐츠에 맞게 크기를 조정합니다. BlogPostTableViewCell.h
에서 이 라벨들을 위한 IBOutlet
들을 만듭니다. titleLabel
, emojiLabel
, contentLabel
처럼 이름을 지정하면 됩니다.
BlogSearchViewController.m
에서 BlogPostTableViewCell.h
를 임포트하고 viewDidLoad
안에 등록합니다. 코드는 다음과 같습니다.
#import "BlogSearchViewController.h"
#import "BlogObject.h"
#import "BlogPostTableViewCell.h"
@interface BlogSearchViewController ()
@end
@implementation BlogSearchViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.title = @"Blogs";
self.tableView.estimatedRowHeight = 88.f;
self.tableView.rowHeight = UITableViewAutomaticDimension;
[self.tableView registerNib:[UINib nibWithNibName:@"BlogPostTableViewCell" bundle:nil] forCellReuseIdentifier:@"blogCell"];
}
이제 동일한 파일에서 작성된 데이터 소스 메소드를 업데이트를 합니다. 지금까지 만든 셀을 사용하고 제대로 된 텍스트 레이블을 설정합니다.
- (UITableViewCell *)searchViewController:(ABFRealmSearchViewController *)searchViewController
cellForObject:(id)anObject
atIndexPath:(NSIndexPath *)indexPath
{
BlogPostTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"blogCell" forIndexPath:indexPath];
BlogObject *blog = anObject;
cell.titleLabel.text = [blog.title capitalizedString];
cell.emojiLabel.text = blog.emoji;
cell.contentLabel.text = blog.content;
return cell;
}
Main.storyboard
로 이동하고 UITableView
에서 셀을 클릭합니다. 그리고 클래스를 BlogPostTableViewCell
로 설정합니다.
이제 끝났습니다.
번역: Yongbin Cha
컨텐츠에 대하여
이 컨텐츠는 저자의 허가 하에 이곳에서 공유합니다.