Category Archives: iOS/Swift

XCode 스토리보드 사용시에 Segue 이용방법 3가지

xcode-logo

XCode에서 스토리보드를 이용하여 개발할 경우 다양한 방법으로 뷰 이동을 할 수 있습니다. 이때에 뷰간 이동은 Segue(놀랍게도 세그웨이라고 읽습니다)라는것을 이용하여 이동을 하게 되는데 여기서는 총 3가지 이동 방법을 정리해 보겠습니다.

1. iOS Segue 종류

본격적으로 Segue를 사용하는 방법을 알아보기전에 앞서 Segue의 종류에 대해 정리해보겠습니다. 우선 현재 시점에서 사용할 수 있는 Segue는 총 5가지로 show, show detail, present modally, popover presentation, custom이 있습니다.

Segue를 설명하기전에 마스터(master)뷰와 디테일(detail)뷰에 대해서 잠깐 짚고 넘어가 보겠습니다.

master_detail_view_controller

아이패드앱 또는 아이폰/아이패드를 동시에 지원하는 유니버셜 앱을 개발할 경우 위와 같이 화면 분할을 지원할 수 있습니다. UISplitViewController를 이용하여 구현하게 되는데 위에서 빨간색이 마스터뷰가 되며 녹색이 디테일뷰에 해당됩니다. 뷰를 로드할 때 이러한 두개의 영역에 로드할 수 있습니다.

segue_symbol_show
show : 화면에 보여지고 있는 마스터 또는 디테일 영역에 뷰를 로드합니다. 마스터와 디테일 영역 모두 화면에 보여지고 있을 경우 로드되는 새로운 컨텐츠 뷰는 디테일 영역의 네비게이션 스택에 푸시 됩니다. 마스터와 디테일 영역중 하나만 보여지고 있을 경우 현재 뷰컨트롤러 스택의 최상단에 푸시됩니다.

segue_symbol_show_detail
show detail : show와 매우 비슷하지만 푸시가 아닌 교체(replace)된다는 점이 크게 다릅니다. 마스터와 디테일 영역 모두 화면에 보여지고 있을 경우 로드되는 뷰는 디테일 영역을 교체하게 되며 둘중 하나만 보여지고 있을 경우 현재 뷰컨트롤러 스택의 최상단 뷰를 교체하게 됩니다.

segue_symbol_present_modally
present modally : 새로 로드하는 컨텐츠 뷰를 모달 형태로 띄웁니다. UIModalPresentationStyle 옵션을 이용하여 보여지는 스타일을 결정하거나 UIModalTransitionStyle 옵션을 사용하여 트랜지션 스타일을 설정할 수 있습니다.

segue_symbol_present_popover
popover presentation : 현재 보여지고 있는 뷰 위에 앵커를 가진 팝업 형태로 컨텐츠 뷰를 로드합니다. UIPopoverArrowDirection 옵션을 사용하여 창에 붙어있는 엣지의 방향을 설정 할 수 있습니다. 바로 와닫지 않으실까봐 예제 화면을 준비해봤습니다.

example_popover_presentation

segue_symbol_custom
custom : 개발자가 임의로 지정한 동작을 수행 할 수 있습니다.

2. 단순 연결하기

ios_stroyboard_segue_01

우선 단순하게 스토리보드에서 제공하는 기능을 이용하여 Segue 연결을 해보겠습니다. 우선 두개의 ViewController를 준비해줍니다. 스크린샷의 왼쪽은 기본 시작 진입 지점뷰이고 오른쪽은 제가 추가한 뷰입니다. NextOnlySegue버튼을 추가하였습니다. 이 버튼을 컨트롤키와 함께 오른쪽 뷰까지 마우스 왼쪽 버튼 드래그를 해줍니다. 그렇게 되면 다음과 같이 어떻게 뷰를 띄울것인지를 선택하는 팝업이 뜹니다.

ios_stroyboard_segue_02

위의 내용은 앞에서 설명했으니 패스하고 여기서는 show를 선택하여 연결해 보겠습니다.

ios_stroyboard_segue_03

이렇게 잘 연결된것을 확인할 수 있습니다. 여기까지만 작업하면 NextOnlySegue버튼을 통해 뷰 전환이 가능해집니다. 실제로 시뮬레이터에서 테스트 해보시면 잘 동작하는것을 확인할 수 있습니다.

3. 코드에서 Segue 수행하기

위의 방법의 경우 버튼을 통해 새로운 뷰로 이동하는 방법을 매우 쉽게 구현할 수 있지만 무언가 처리를 한 뒤에 이동하고 싶다면 조금 복잡해 집니다. 이 경우 코드를 이용한 Segue 수행을 하여 뷰를 이동하시면 됩니다. 우선 흔히 Manual Segue라고 불리는 시작 트리거가 없는 Segue를 추가해보겠습니다.

ios_stroyboard_segue_04

시작하는 뷰의 상단 아이콘중 View Controller로 부터 이동하려는 뷰까지 마찬가지로 컨트롤 버튼을 누르고 드래그를 해줍니다. 어떤 Segue를 만들지 물어보면 마찬가지로 show를 선택해 보겠습니다.

ios_stroyboard_segue_05새로운 Segue가 정상적으로 추가되었습니다.

ios_stroyboard_segue_06

 

추가된 Segue를 선택한 뒤에 인스펙터를 확인해 보면 Storyboard Segue 탭에 Identifier를 지정할 수 있습니다. 여기서 Segue의 식별자를 지정할 수 있습니다. 여기서 지정해 두면 코드상에서 이 Segue를 언제든지 수행할 수 있게 됩니다. 여기서는 segueNext라는 이름으로 지정해 보겠습니다.

ios_stroyboard_segue_06

 

이제 수행할 코드를 추가해보겠습니다. 위의 스크린샷처럼 드래그하여 새로운 액션 메소드를 추가하는 방법은 모두들 아실꺼라 믿고 설명은 패스하겠습니다. touchNext라는 메소드를 만들어 연결해 보았습니다.

@IBAction func touchNext(sender: UIButton) {
  self.performSegueWithIdentifier("segueNext", sender: self)
}

기존의 왼쪽 뷰컨트롤러에서 performSegueWithIdentifier를 수행하면 이미 존재하는 Segue를 수행할 수 있게 됩니다. 위에서 이미 지정해 두었던 segueNext를 수행하도록 하였습니다. 여기까지의 코드를 시뮬레이터에서 확인해 보면 잘 동작하는것을 확인할 수 있습니다.

3. Storyboard를 이용하여 임의의 뷰 로드하기

이번에는 조금 무식하지만 어찌보면 편할수도 있는 Segue도움없이 스토리보드에서 원하는 뷰컨트롤러를 마음대로 불러내는 방법에 대해 알아보겠습니다.

ios_stroyboard_segue_08

오른쪽에 있던 새로운 뷰컨트롤러에 스토리보드 아이디를 부여해보겠습니다. 뷰컨트롤러를 선택한 뒤 인스펙터를 살펴보면 Identity 항목에 Storyboard ID항목이 있습니다. 여기서 스토리보드상의 식별자를 지정할 수 있습니다. 여기서는 NextView라는 이름으로 지정해 보겠습니다.

ios_stroyboard_segue_09

이제 내가 원하는 스토리보드 파일을 열어 원하는 뷰를 불러들일 수 있습니다. 다음의 코드는 Main이라는 이름의 스토리보드로부터 NextView라는 뷰컨트롤러를 인스턴스화하 하여 화면에 보여주는 코드입니다.

@IBAction func moveSpecificView(sender: UIButton) {
  let storyboard = UIStoryboard(name: "Main", bundle: nil)
  let nextViewController = storyboard.instantiateViewControllerWithIdentifier("NextView") as NextViewController
  self.presentViewController(nextViewController, animated: true, completion: nil)
}

시뮬레이터에서 구동해보면 잘 되는것을 확인할 수 있습니다.

예제코드 : https://github.com/iies/SegueExample

iOS Framework 이미지 리소스 사용하기

Cocoa Touch Framework가 자기 자신이 가진 이미지 리소스에 접근하기 위해서는 몇가지 추가적인 조치가 필요합니다. UIImage클래스가 가진 imageNamed 메소드를 사용하면 리소스의 이름만으로 이미지를 불러올 수 있지만 MainBundle 기준으로 동작하기 때문에 불러오지 못하는 경우가 발생합니다. 한번 확인을 해보도록 하겠습니다. 이 글은 [XCode 6 Framework 만들기]의 결과물을 활용합니다.

ios_framework_image_01

먼저 테스트로 사용할 이미지 파일을 추가합니다. 저는 골프GTI이미지를 사용해 보겠습니다. 그리고 Person 클래스에 간단하게 이미지를 반환하는 메소드를 추가해 보겠습니다.

#import <UIKit/UIKit.h>

@interface Person : NSObject

- (instancetype)initWithName:(NSString *)name age:(int)age;
- (void)info;
- (UIImage *)image;

@end
#import "Person.h"

@interface Person ()

@property(strong, nonatomic) NSString *name;
@property(nonatomic) int age;

@end

@implementation Person

- (instancetype)initWithName:(NSString *)name age:(int)age
{
    if(self = [super init]) {
        self.name = name;
        self.age = age;
    }
    return self;
}

- (void)info
{
    NSLog(@"The person's name is %@ and his age is %d", self.name, self.age);
}

- (UIImage *)image
{
    return [UIImage imageNamed:@"golf"];
}

@end

image라는 메소드를 하나 추가했습니다. 그 내용은 golf라는 이름의 이미지를 로드하여 반환다는것이 전부입니다. 이번에는 ViewController.m에 이미지를 받아 출력하는 코드를 추가합니다.

#import "ViewController.h"
#import <HelloFramework/HelloFramework.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    Person *person = [[Person alloc] initWithName:@"Hello" age:19];
    [person info];

    // 이미지를 화면에 출력합니다.
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[person image]];
    [self.view addSubview:imageView];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

이제 시뮬레이터 환경에서 한번 실행해 보도록 하겠습니다.

ios_framework_image_02

아무것도 화면에 출력되지 않는군요… 이미지를 정상적으로 로드하지 못하여 발생하는 문제입니다. MainBundle이 아닌 Framework의 Bundle에서 이미지를 읽어오도록 코드를 수정해 보도록 하겠습니다. Framework 프로젝트의 Person.m의 내용을 수정합니다. 수정후에는 Build를 수행하여 HelloApp 프로젝트에 적용하는것을 잊지 맙시다.

- (UIImage *)image
{
    NSBundle *frameworkBundle = [NSBundle bundleForClass:[self class]];
    return [UIImage imageNamed:@"golf" inBundle:frameworkBundle compatibleWithTraitCollection:nil];
}

위와 같은 방법으로 Framework 자기 자신의 Bundle에 속해있는 리소스에 접근할 수 있게 됩니다. 하지만 위의 API는 iOS 8부터 지원하는 API이므로 적절하지 않아 보입니다. 버전에 구애받지 않고 사용할 수 있는 방법은 다음과 같은 방법이 있습니다.

- (UIImage *)image
{
    NSBundle *frameworkBundle = [NSBundle bundleForClass:[self class]];
    NSString *imagePath = [frameworkBundle pathForResource:@"golf" ofType:@"jpg"];
    return [UIImage imageWithContentsOfFile:imagePath];
}

이제 확인을 해보겠습니다. 다시 한번 Framework를 빌드하고 시뮬레이터를 실행해 보겠습니다.

ios_framework_image_03

크기가 적절하게 이쁘게 나오지는 않았지만 정상적으로 이미지가 출력되는것을 확인할 수 있습니다. 하지만 레티나 이미지(@2x)를 구별하여 이미지를 로드하게 하려면 좀 더 추가적인 작업이 필요합니다.

#import <UIKit/UIKit.h>

@interface UIImage (Bundle)

+ (UIImage*)imageNamed:(NSString *)imageName bundle:(NSBundle*)bundle;

@end
#import "UIImage+Bundle.h"

@implementation UIImage (Bundle)

+ (UIImage*)imageNamed:(NSString*)imageName bundle:(NSBundle*)bundle
{
    // Extract base name and extension
    NSString* imageBaseName = [imageName stringByDeletingPathExtension];
    NSString* imageExt = [imageName pathExtension];
    if (!imageExt.length) imageExt = @"png";
    
    NSString* imagePath = nil;
    
    // Try retina version if available
    BOOL isRetina = ([[UIScreen mainScreen] scale] == 2.0);
    if (isRetina)
    {
        NSString* retinaImageBaseName = [NSString stringWithFormat:@"%@@2x", imageBaseName];
        imagePath = [bundle pathForResource:retinaImageBaseName ofType:imageExt];
    }
    
    // If not a Retina screen or retina image not found, try regular image
    if (!imagePath)
    {
        imagePath = [bundle pathForResource:imageBaseName ofType:imageExt];
        isRetina = NO;
    }
    
    // Build the image
    UIImage* image = [UIImage imageWithContentsOfFile:imagePath];
    // If retina version, set the scale appropriately
    if (isRetina)
    {
        image = [UIImage imageWithCGImage:image.CGImage scale:2.0 orientation:UIImageOrientationUp];
    }
    
    return image;
}

@end

이런식으로 카테고리를 만들어 사용하면 용이할 것 같습니다. [출처]