iOS 검색 컨트롤러 만들기 (Objective-C)

이 튜토리얼은 iOS 검색 컨트롤러를 Objective-C로 만드는 것을 다룹니다. Swift로 만드는 튜토리얼은 별도로 있습니다.

ABFRealmSearchViewController 클래스는 Realm 객체 클래스에 대한 텍스트 검색을 실행하는 데이블 뷰과 검색 창을 관리하는 컨트롤러 객체를 만듭니다.

단 27줄 코드로 텍스트 검색 인터페이스를 만들수 있습니다.

이 클래스는 non-blocking으로 백그라운드 쓰레드에서 텍스트 검색을 실행합니다. (RBQFetchedResultsController)

컨트롤러는 서브 클래스인 것으로 생각하면 됩니다. 기본적으로 resultsDataSourceresultsDelegate 프로토콜은 self로 설정이 되어 있어 서브 클래스가 메소드를 구현할 수 있게 합니다.

GitHub에서 ABFRealmSearchController 코드를 보실 수 있습니다.

이번 튜토리얼에서는 ABFRealmSearchViewController v1.2을 사용했습니다.


Cover image of the ios search controller in action

개요

검색은 많은 모바일 앱에서 필수적인 부분입니다. 사용자는 특히 모바일에서 가능한 빨리 자신의 정보를 찾고 싶어합니다. 대부분의 경우에서는 검색은 이를 구현하기 위한 시간이 개발자에 달려있습니다. 이 부가 기능은 쉽게 특정 속성을 바탕으로 Realm의 객체의 검색을 추가 할 수 있습니다.

이것은 매우 빠르면서 non-blocking이기 때문에 입력하는 동안 결과를 보여줍니다. 이제 이 기능을 사용한 앱을 만들어 봅시다.

최종 코드는 GitHub에서 볼 수 있습니다.

튜토리얼

“Single View Application”을 사용한 새로운 Xcode 프로젝트를 만드세요. 언어는 Objective-C로 설정을 하고 “Use Core Data” 체크를 하지 마세요.

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

ABFRealmSearchViewControllerCocoaPods통해 사용할 수 있습니다. (만약에 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”을 체크해주세요.

Go to UINavigationController and make sure intialViewController is checked

UIViewController을 상속하는 BlogSearchViewController이라는 클래스를 만듭니다.

Create BlogSearchViewController file

BlogSearchViewController.h으로 이동하여 #import "ABFRealmSearchViewController.h"을 추가하세요. 그리고 UIViewControllerABFRealmSearchViewController의 서브 클래스를 교체합니다. 이를 완료하면 다음과 같이 보일겁니다:

#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로 변경합니다.

Rename UITableViewController class to 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를 누르세요.)

Set reuseIdentifier to blogCell

BlogSearchViewController (“Root View Controller” 라 불리는)을 클릭합니다. 그리고 attributes tab을 클릭합니다. “Entity Name”에 “BlogObject”라 입력합니다. “Search Property”에는 “title”이라고 입력합니다. (하나 입력하고 Enter를 눌러주세요.) “Use Contains”은 “On”으로 설정합니다.

Set search controller attributes

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” 체크를 해주세요.

Create BlogPostTableViewCell

BlogPostTableViewCell.xib로 이동하고 하단의 핸들을 드래그 하여 셀의 높이를 88 픽셀로 늘려줍니다. 그런다음 UILabel을 3개를 추가하는데 제목, 이모티콘, 컨텐츠를 나타냅니다. 하지만 위 스타일 처럼 하고 싶다면 컨텐츠 라벨의 라인의 수를 0 으로 설정하면 여러 줄의 텍스트가 표시됩니다.

“Identifier”을 추가하는 것을 잊지 마세요. “blogCell”로 설정하시면 됩니다.

Create BlogPostTableViewCell UI

다음 라애의 이미지처럼 오토레이아웃 제약 조건을 설정합니다. 기초만 하기 때문에 이 튜토리얼에서 너무 많은 오토 레이아웃을 하진 않을 것입니다. 오토 레이아웃에 대한 자세한 내용이 알고 싶으시면, 아래를 참고하세요.

링크 1, 링크 2, 링크 3, 링크 4, 링크 5

Set up constraints for the emoji label Set up constraints for the title label Set up constraints for the content label

이러한 제약은 셀이 모든 컨텐츠에 맞게 크기를 조정합니다. BlogPostTableViewCell.h 에서 이 라벨들을 위한 IBOutlet들을 만듭니다. titleLabel, emojiLabel, contentLabel처럼 이름을 지정하면 됩니다.

Create IBOutlets for BlogPostTableViewCell

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

다음: Realm Obj-C와 Realm Swift의 새로운 기능을 소개합니다.

General link arrow white

컨텐츠에 대하여

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


Realm Team

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

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

4 design patterns for a RESTless mobile integration »

close