SeSAC TIL - 22.07.11

1. 오늘 배운 내용

• 네비게이션 컨트롤러와 탭바 컨트롤러를 임베드하는 방법에 대해 배우고 각 항목을 추가하는 방법에 대해 배웠습니다.
• 탭바 아이템, 네비게이션 바 아이템 등을 활용해 UI를 구성해봤습니다.

---

2. Checklist

2-1. Image Rendering Mode: original Vs template (feat. tint color)

Original - 이미지를 있는 그대로 보여주는 모드입니다. 

 

template -  이미지의 색 정보를 무시하고 지정해둔 색으로 입혀 보여주는 방식입니다. 이 경우에 들어가는 색은 tint color로 지정된 색이 들어가게 됩니다. 

---

2-2. View Property

isHidden (feat. stackView)  - Boolean 타입으로 특정 뷰를 보여지게 하거나 숨길 때 사용합니다. true를 할당하면 숨겨지며 false를 할당하면 보입니다. 스택뷰에 여러 요소들을 묶어두고 이 기능을 이용할 경우, 자동으로 빈 공간을 채우는 방식에도 활용할 수 있습니다.  

 

userIteractionEnabled (feat. Gesture) - Boolean 타입이며 앱에 Gesture 기능을 추가하였을 때 이 기능을 사용할지 안할지에 대해 설정할 수 있습니다. .yes 를 할당할 경우 활성화되고 반대로 .no를 할당할 경우 해당 Gesture 기능은 꺼집니다.

 

clipsToBounds (feat. shadow, cornerRadius) - 마찬가지로 Boolean 타입이며 기본값은 false입니다. true로 설정할 경우 테두리가 잘리게 되며 치수를 준만큼 점점 원에 가깝게 모서리가 잘리게 됩니다. 

---

2-3. Event: Value Changed

터치 드래그나 컨트롤을 조작하여, 연속된 다른 값을 전달하는 것을 의미합니다. 

---

2-4. UITabBarController / UITabBar / UITabBarItem

UITabBarController - 인터페이스를 다중선택할 수 있도록 Tab Bar를 구성하는 컨트롤러입니다. 해당 탭을 선택할 경우 연결한 child view controller가 화면에 보여집니다.

 

UITabBar - 탭바에서 다른 뷰를 선택하거나, 하위 작업, 모드 변경 등을 선택하기 위해 하나 혹은 그 이상의 버튼을 보여주는 컨트롤입니다. 

 

UITabBarItem - 앱의 특정 부분을 표시하는 탭바의 항목입니다. 아이템을 추가해서 이미지를 커스터마이징할 수 있고, 색변경도 가능합니다. 10개 이상 추가할 경우, 마지막 항목은 More로 바뀌며 그 위에 말줄임표가 보여집니다. 들어가면 아이템들이 테이블 뷰 형태로 보여지고 여기서 선택하면 해당 아이템과 연결된 뷰가 보여집니다.  

---

2-5. StackView

iOS 9.0 이상에서부터 사용가능하며 가로나 세로로 나열되어 있는 형태의 뷰를 묶어주는 기능을 합니다. 사용할 때는 스택뷰의 사이즈 및 위치를 정해줘야 하며 그 뒤에는 스택뷰가 내부 요소의 레이아웃을 관리합니다. 

---

2-6. SizeClass: Compact Vs Regular

Size Class는 디바이스 화면에 적동된 너비 및 높이가 적용된 스크린 사이즈의 그룹입니다. 두 size class가 현재 존재합니다. size class는 높이, 너비, 가로 세로에 대한 디스플레이 여백의 상대적인 양을 식별하며 다음과 같이 두 용어로 치수를 분류합니다.

 

Compact - 제한된 여백을 의미합니다. Xcode에서 wC(Compact width)와 hC(Compact height)로 표시됩니다. 기기의 화면이 컨텐츠를 보여주기 힘들만큼 작을 경우 compact라 부릅니다.

 

Regular - 제한되지 않은 여백을 의미합니다. Xcode에서 wR(Regular width)와 hR(Regular height)로 표시됩니다. 여백이 충분해서 화면에 컨텐츠의 내용을 보여줄 수 있는 경우 regular라 부릅니다.

---

3. 과제 및 실습

네비게이션 컨트롤러 / 탭바 컨트롤러 실습하기 및 감정 다이어리 만들기

• 탭 바에 열개 이상의 화면을 추가하고 그 중 4개에는 네비게이션 바 컨트롤러도 추가해보았습니다.
• 이 경우 실제 앱을 실행시켰을 때 하단에서 가장 오른쪽 항목이 More로 바뀌면서 누르면 테이블 뷰로 child view가 테이블 뷰 스타일로 보여집니다.
• Appearance를 standard하고 scroll edge로 바꿔가며 테스트를 진행했지만, 명확한 차이점을 찾진 못했습니다.
• 여러 프로젝트를 진행하면서 좀 터 테스트를 해봐야 할 것 같습니다..

---

• 큰 틀만 스토리보드로 구성하고 세부사항들은 코드로 설정해주었습니다.(이미지, 레이블 등)
• 감정 이미지를 클릭하면 숫자가 올라가는 것을 구현하기 위해 행렬을 만들고 이미지 하나당 대응을 해줬습니다.
• 그리고 IBAction 하나에 버튼을 9개 할당하고 스위치문을 활용해 어느버튼이 눌렸는지 구분해주었습니다.
• while문으로 반복되는 변수(IBOutlet 버튼 및 레이블 등)를 생성하려고 했으나 잘 되지 않아 앞으로 수행하는 과제에서 계속 시도해봐야 할 것 같습니다...

class ViewController: UIViewController {

    // MARK: - Properties
    
    @IBOutlet weak var oneImageButton: UIButton!
    @IBOutlet weak var twoImageButton: UIButton!
    @IBOutlet weak var threeImageButton: UIButton!
    @IBOutlet weak var fourImageButton: UIButton!
    @IBOutlet weak var fiveImageButton: UIButton!
    @IBOutlet weak var sixImageButton: UIButton!
    @IBOutlet weak var sevenImageButton: UIButton!
    @IBOutlet weak var eightImageButton: UIButton!
    @IBOutlet weak var nineImageButton: UIButton!
    
    @IBOutlet weak var oneLabel: UILabel!
    @IBOutlet weak var twoLabel: UILabel!
    @IBOutlet weak var threeLabel: UILabel!
    @IBOutlet weak var fourLabel: UILabel!
    @IBOutlet weak var fiveLabel: UILabel!
    @IBOutlet weak var sixLabel: UILabel!
    @IBOutlet weak var sevenLabel: UILabel!
    @IBOutlet weak var eightLabel: UILabel!
    @IBOutlet weak var nineLabel: UILabel!
    
    var countArray: [Int] = [0, 0, 0, 0, 0, 0, 0, 0, 0]
    
    // MARK: - Init
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureUI()
        
    }

    // MARK: - Helper Functions

    func configureUI() {
        configureLabels(oneLabel, emotion: "행복해", counts: 0)
        configureLabels(twoLabel, emotion: "사랑해", counts: 1)
        configureLabels(threeLabel, emotion: "좋아해", counts: 2)
        configureLabels(fourLabel, emotion: "당황해", counts: 3)
        configureLabels(fiveLabel, emotion: "속상해", counts: 4)
        configureLabels(sixLabel, emotion: "우울해", counts: 5)
        configureLabels(sevenLabel, emotion: "심심해", counts: 6)
        configureLabels(eightLabel, emotion: "아파해", counts: 7)
        configureLabels(nineLabel, emotion: "슬퍼해", counts: 8)

        let dic = [oneImageButton: 1, twoImageButton: 2, threeImageButton: 3, fourImageButton: 4, fiveImageButton: 5, sixImageButton: 6, sevenImageButton: 7, eightImageButton: 8, nineImageButton: 9]
        
        let dicSorted = dic.sorted { $0.1 > $1.1 }
        for (i, j) in dicSorted {
                guard let button = i else { return }
                configureButtons(button, image: j)
        }
    }
    
    func configureButtons(_ button: UIButton, image: Int) {
        button.setImage(UIImage(named: "sesac_slime\(image)"), for: .normal)
    }
    
    func configureLabels(_ label: UILabel, emotion: String, counts: Int) {

        label.text = "\(emotion) \(countArray[counts])"
        label.textAlignment = .center
    }
    
    // MARK: - IBActions
    
    @IBAction func emotionButtonTapped(_ sender: UIButton) {
        
        switch sender {
        case oneImageButton:
            countArray[0] += 1
            oneLabel.text = "행복해 \(countArray[0])"
        case twoImageButton:
            countArray[1] += 1
            twoLabel.text = "사랑해 \(countArray[1])"
        case threeImageButton:
            countArray[2] += 1
            threeLabel.text = "좋아해 \(countArray[2])"
        case fourImageButton:
            countArray[3] += 1
            fourLabel.text = "당황해 \(countArray[3])"
        case fiveImageButton:
            countArray[4] += 1
            fiveLabel.text = "속상해 \(countArray[4])"
        case sixImageButton:
            countArray[5] += 1
            sixLabel.text = "우울해 \(countArray[5])"
        case sevenImageButton:
            countArray[6] += 1
            sevenLabel.text = "심심해 \(countArray[6])"
        case eightImageButton:
            countArray[7] += 1
            eightLabel.text = "아파해 \(countArray[7])"
        case nineImageButton:
            countArray[8] += 1
            nineLabel.text = "슬퍼해 \(countArray[8])"
        default:
            break
        }
    }
}

---

4. 자료 출처

구글 검색어: image rendering mode in xcode -> https://sarunw.com/posts/what-is-image-rendering-mode-in-ios/

구글 검색어: userinteractionenabled in xcode -> https://developer.apple.com/documentation/uikit/uiview/1622577-userinteractionenabled

구글 검색어: clipstobounds in xcode -> https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds

구글 검색어: value changed event in xcode -> https://developer.apple.com/documentation/uikit/uicontrol/event/1618238-valuechanged

구글 검색어: uitabbar in xcode -> https://developer.apple.com/documentation/uikit/uitabbarcontroller

https://developer.apple.com/documentation/uikit/uitabbar

구글 검색어: UITabBarItem-> https://developer.apple.com/documentation/uikit/uitabbaritem

구글 검색어: stackview in xcode-> https://developer.apple.com/documentation/uikit/uistackview

구글 검색어: size class compact regular in xcode-> https://mobikul.com/size-classes-in-interface-builder-in-xcode/