[Objective-C] 앱 만들기 입문 - 2 : 세로 정렬 카드뷰 만들고 안에 문구 및 활성화 스위치 넣기

 

1. 이전 포스팅 확인하기

 

 

https://growingsaja.tistory.com/887

[Objective-C] 앱 만들기 입문 - 1 : 하단 메뉴탭바 만들기

 

 

 

 

 

2. 예제 소스코드 작성하기

 

h 파일은 특별히 수정할 것이 없습니다.

 

// vim Controller/FirstViewController.h

#import <UIKit/UIKit.h>

// FirstViewController라는 이름의 뷰 컨트롤러 클래스를 선언합니다.
@interface FirstViewController : UIViewController

@end

 

// vim Controller/FirstViewController.m

#import <Foundation/Foundation.h>
#import "FirstViewController.h"

@implementation FirstViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 뷰의 배경색을 설정합니다.
    self.view.backgroundColor = [UIColor whiteColor];

    // 카드뷰에 표시할 데이터를 초기화합니다.
    NSArray *cryptocurrencyNames = @[@"Bitcoin", @"Ethereum", @"Ripple", @"Litecoin", @"Bitcoin Cash"];
    NSArray *cryptocurrencyPrices = @[@"$33,000", @"$2,500", @"$0.7", @"$120", @"$400"];

    // 카드뷰 배치에 필요한 변수를 설정합니다.
    CGFloat cardViewWidth = 320.0;
    CGFloat cardViewHeight = 120.0;
    CGFloat cardViewLeftMargin = 30.0;
    CGFloat cardViewXPos = ([UIScreen mainScreen].bounds.size.width - cardViewWidth) / 2.0;
    CGFloat cardViewSpacing = 10.0;

    // 카드뷰들을 생성하고 뷰에 추가합니다.
    for (int i = 0; i < cryptocurrencyNames.count; i++) {
        
        UIView *cardView = [[UIView alloc] initWithFrame:CGRectMake(cardViewXPos, 50 + cardViewLeftMargin + i * (cardViewSpacing + cardViewHeight), cardViewWidth, cardViewHeight)];

        // 카드뷰 모서리를 둥글게 설정합니다. 조건 1
        cardView.layer.cornerRadius = 10.0;
        cardView.layer.masksToBounds = YES;

        // 카드뷰 배경색을 설정합니다.
        cardView.backgroundColor = [UIColor lightGrayColor];
        [self.view addSubview:cardView];

        // 암호화폐 이름 레이블을 생성하고 카드뷰에 추가합니다. 조건 2
        UILabel *cryptoNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, cardViewWidth / 2 - 20, 20)];
        cryptoNameLabel.text = cryptocurrencyNames[i];
        [cardView addSubview:cryptoNameLabel];

        // 암호화폐 가격 레이블을 생성하고 카드뷰에 추가합니다. 조건 3
        UILabel *cryptoPriceLabel = [[UILabel alloc] initWithFrame:CGRectMake(cardViewWidth / 2, 10, cardViewWidth / 2 - 10, 20)];
        cryptoPriceLabel.text = cryptocurrencyPrices[i];
        cryptoPriceLabel.textAlignment = NSTextAlignmentRight;
        [cardView addSubview:cryptoPriceLabel];

        // 활성화 스위치를 생성하고 카드뷰에 추가합니다. 조건 4
        UISwitch *activationSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(cardViewWidth / 4 * 3, cardViewHeight - 40, 200, 40)];
        [activationSwitch addTarget:self action:@selector(onSwitchValueChanged:) forControlEvents:UIControlEventValueChanged];
        [cardView addSubview:activationSwitch];

        // 거래소 이름 레이블을 생성하고 카드뷰에 추가합니다. 조건 5
        UILabel *exchangeNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, cardViewHeight - 25, cardViewWidth - 20, 20)];
        exchangeNameLabel.text = @"Binance";
        exchangeNameLabel.font = [UIFont systemFontOfSize:12.0];
        [cardView addSubview:exchangeNameLabel];
    }
}


- (void)onSwitchValueChanged:(UISwitch *)sender {
    dispatch_async(dispatch_get_main_queue(), ^{
        NSLog(@"Switch value changed: %@", sender.isOn ? @"ON" : @"OFF");
    });
}

@end

 

 

 

 

 

3. 예제 코드 실행 결과

 

스위치를 누를때 문구가 출력되도록 "onSwitchValueChanged" 또한 구현했습니다. 불필요시 삭제해도 무방합니다.

 

 

 

 

 

 

4. 소스코드 개선한 버전으로 수정하기 (Dark mode 고려)

 

First -> CurrencyTrackerListVC

Second -> SpotGoodsTrackerListVC

Third -> MyProfileVC

 

이름 변경 및 다크모드를 고려한 개발 버전입니다.

 

 

 

 

 

 

5. 소스코드 수정

 

다크모드인 경우와 라이트모드인 경우에 대해 색이 다르게 보이도록 소스코드를 수정합니다.

색에 대한 설정을 할 경우, whiteColor 등을 고정으로 fix해두면 다크모드에서도 하얀색으로 노출되기에 조심해야합니다.

 

// vim Controller/CurrencyTrackerListVC.h

#import <UIKit/UIKit.h>

// SecondViewController라는 이름의 뷰 컨트롤러 클래스를 선언합니다.
@interface CurrencyTrackerListVC : UIViewController

@end

 

// vim Controller/CurrencyTrackerListVC.m

#import <Foundation/Foundation.h>
#import "CurrencyTrackerListVC.h"

@implementation CurrencyTrackerListVC

- (void)viewDidLoad {
    [super viewDidLoad];

    // 카드뷰에 표시할 데이터를 초기화합니다.
    NSArray *cryptocurrencyNames = @[@"Bitcoin", @"Ethereum", @"Ripple", @"Litecoin", @"Bitcoin Cash"];
    NSArray *cryptocurrencyPrices = @[@"$33,000", @"$2,500", @"$0.7", @"$120", @"$400"];

    // 카드뷰 배치에 필요한 변수를 설정합니다.
    CGFloat cardViewWidth = [UIScreen mainScreen].bounds.size.width - 4;
    CGFloat cardViewHeight = 60.0;
    CGFloat cardViewLeftMargin = 30.0;
    CGFloat cardViewXPos = ([UIScreen mainScreen].bounds.size.width - cardViewWidth) / 2.0;
    CGFloat cardViewSpacing = 10.0;

    // 카드뷰들을 생성하고 뷰에 추가합니다.
    for (int i = 0; i < cryptocurrencyNames.count; i++) {
        
        UIView *cardView = [[UIView alloc] initWithFrame:CGRectMake(cardViewXPos, 50 + cardViewLeftMargin + i * (cardViewSpacing + cardViewHeight), cardViewWidth, cardViewHeight)];
        
        // 카드뷰 모서리를 둥글게 설정합니다. 조건 1
        cardView.layer.cornerRadius = 10.0;
        cardView.layer.masksToBounds = YES;
        
        // UILabel의 텍스트 색상 및 배경색 설정
        // 카드뷰 배경색을 설정합니다.
        if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            // 다크모드인 경우
            cardView.backgroundColor = [UIColor darkGrayColor];
            [self.view addSubview:cardView];
        } else {
            // 라이트모드인 경우
            cardView.backgroundColor = [UIColor lightGrayColor];
            [self.view addSubview:cardView];
        }

        // 암호화폐 이름 레이블을 생성하고 카드뷰에 추가합니다. 조건 2
        UILabel *cryptoNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, cardViewWidth / 2 - 20, 20)];
        cryptoNameLabel.text = cryptocurrencyNames[i];
        [cardView addSubview:cryptoNameLabel];

        // 암호화폐 가격 레이블을 생성하고 카드뷰에 추가합니다. 조건 3
        UILabel *cryptoPriceLabel = [[UILabel alloc] initWithFrame:CGRectMake(cardViewWidth / 3, 10, cardViewWidth / 2 - 10, 20)];
        cryptoPriceLabel.text = cryptocurrencyPrices[i];
        cryptoPriceLabel.textAlignment = NSTextAlignmentRight;
        [cardView addSubview:cryptoPriceLabel];

        // 활성화 스위치를 생성하고 카드뷰에 추가합니다. 조건 4
        UISwitch *activationSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(cardViewWidth / 7 * 6, cardViewHeight - 40, 200, 40)];
        [activationSwitch addTarget:self action:@selector(onSwitchValueChanged:) forControlEvents:UIControlEventValueChanged];
        [cardView addSubview:activationSwitch];

        // 거래소 이름 레이블을 생성하고 카드뷰에 추가합니다. 조건 5
        UILabel *exchangeNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, cardViewHeight - 25, cardViewWidth - 20, 20)];
        exchangeNameLabel.text = @"Binance";
        exchangeNameLabel.font = [UIFont systemFontOfSize:12.0];
        [cardView addSubview:exchangeNameLabel];
    }
}

- (void)onSwitchValueChanged:(UISwitch *)sender {
    dispatch_async(dispatch_get_main_queue(), ^{
        NSLog(@"Switch value changed: %@", sender.isOn ? @"ON" : @"OFF");
    });
    
}

@end

 

// vim MyTabBarController.h

#import <UIKit/UIKit.h>

// MyTabBarController라는 이름의 탭바 컨트롤러 클래스를 선언합니다.
@interface MyTabBarController : UITabBarController

@end

 

// vim MyTabBarController.m

#import <Foundation/Foundation.h>

#import "MyTabBarController.h"
#import "CurrencyTrackerListVC.h"
#import "SpotGoodsTrackerListVC.h"
#import "MyProfileVC.h"

@implementation MyTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];

    // FirstViewController를 생성하고 속성을 설정합니다.
    CurrencyTrackerListVC *firstTabMainVC = [[CurrencyTrackerListVC alloc] init];
    UINavigationController *naviVC1 = [[UINavigationController alloc] initWithRootViewController:firstTabMainVC];
    naviVC1.tabBarItem.title = @"첫 번째";
    naviVC1.tabBarItem.image = [UIImage systemImageNamed:@"camera"];
    
    // SecondViewController를 생성하고 속성을 설정합니다.
    SpotGoodsTrackerListVC *secondTabMainVC = [[SpotGoodsTrackerListVC alloc] init];
    UINavigationController *naviVC2 = [[UINavigationController alloc] initWithRootViewController:secondTabMainVC];
    naviVC2.tabBarItem.title = @"두 번째";
    naviVC2.tabBarItem.image = [UIImage systemImageNamed:@"house"];
    
    // ThirdViewController를 생성하고 속성을 설정합니다.
    MyProfileVC *thirdTabMainVC = [[MyProfileVC alloc] init];
    UINavigationController *naviVC3 = [[UINavigationController alloc] initWithRootViewController:thirdTabMainVC];
    naviVC3.tabBarItem.title = @"세 번째";
    naviVC3.tabBarItem.image = [UIImage systemImageNamed:@"trash.fill"];

    // 생성된 뷰 컨트롤러를 탭바 컨트롤러에 배치합니다.
    NSArray *viewControllers = @[naviVC1, naviVC2, naviVC3];
    self.viewControllers = viewControllers;}

@end

 

 

 

 

 

6. 결과 예시

 

 - 다크모드 기준

 

 - 라이트 모드 기준