0711 새싹 6회차 정리

iOS 앱 개발자 데뷔 과정 6회차

 

 

 

 

#0. Memo

- 투명도를 조절하는 두가지 방법. Alpha vs Opacity

아래의 사진에서 파란색 View는 Alpha, 노란색 View는 Opacity를 조절했다.

Alpha는 객체 자체를 투명하게 만들기 때문에 View 내부에 포함되어있는 Label도 같이 투명해진 것을 볼 수 있다.

반면 Opacity는 색상의 투명도이기 때문에 객체의 속성과는 관련이 없어, Label에는 영향을 주지 않는다.

 

 

- 이미지가 파란색으로 나온다면? Rendering Mode (template vs original)

 가끔 시뮬레이터를 실행하면 이미지가 파란 색으로 나올 때가 있다.

해결하는 방법은 여러 가지가 있겠지만, 근본적으로는 이 부분을 체크해봐야 한다.

Assets에 이미지를 추가할 때 Rendering Mode라는 옵션이 있다.

template : 이미지의 본래의 색을무시하고 원하는 색으로 변경해 템플릿 이미지로 활용

original : 이미지의 원본을 그대로 사용

 

 

- AutoLayout / 여러개의 View들을 맞추는 법

만약 크기가 같은 View를 일정하게 나열하고 싶다면 이런

 

우선 전체 선택한 후 Leading, Trailing Space를 주어 일정한 간격을 주고 어디에 위치할 것인지를 정해준다.

 

그럼 아직 크기가 정의되지 않을 텐데, 이 때 Equal Widths를 주면 여백을 제외하고 가로의 비율을 객체들끼리 나눠가지게 된다. 

 

마찬가지로 두개 이상의 View를 선택한 후 모서리를 맞출 수 있다.

 

수평 혹은 수직에 위치하게 할 수 있고, 수평/수직의 기준선에서 얼마만큼 거리를 줄 지도 정할 수 있다.

 

Multiplier를 이용해 항상 같은 비율에 위치하게 하는것도 가능하다.

 

 

 

 

 

#1. Checklist

- Image Rendering Mode: original vs template (feat. tint color)

#0. Memo 이미지가 파란색으로 나온다면? Rendering Mode (template vs original) 참고

 

 

- View Property

isHidden (feat. stackView)

userInteractionEnabled (feat. gesture)

clipsToBound (feat. shadow, cornerRadius)

 

 

isHidden : 해당 View가 숨겨진다. StackView일 경우 빈 자리를 다른 View가 분배받아 재배치된다.

userInteractionEnabled : false일 경우 gesture 등에서 사용자 조작 이벤트가 발생하지 않는다.

clipsToBound : true로 설정하면 해당 View의 범위를 벗어나는 Sub View는 보여지지 않는다.

clipsToBound의 속성이 충돌하기 때문에, 일반적으로 conerRadius와 shadow는 동시에 사용이 불가하다.

 

 

- Event: Value Changed

Switch, Slider, DatePicker 등 사용자에 의해 상태가 변화되는 View들에 사용되는 이벤트이다.

 

 

- UITabBarController / UITapBar / UITapBarItem

UITabBarController : UINavigation보다 앞에 위치해야 하며, 연결된 View들을 하단에 Tab으로 보여준다.

UITabBar : 디스플레이 하단에 위치하며 Tap마다 다른 화면을 보여줄 수 있다.

UITabBarItem : TabBar를 구성하는 전용 버튼

 

 

- UINavigationController / UINavigationBar / UINavigationItem

UINavigationController : RootViewController를 포함하여 연결된 View들에 Navigation Bar를 띄워준다.

UINavigationBar : 디스플레이 상단에 위치하며 화면 전환과 같은 동작을 직관적으로 보여준다.

UINavigationItem : Navigation Bar에 사용 가능한 전용 버튼

 

 

- StackView

[0710 1주차 마무리] (https://eun-dev.tistory.com/7) Stack View 참고

 

 

- SizeClass: Compact vs Regular

Size Class에서는 iOS 인터페이스의 화면 영역을 분류하고 너비, 높이를 나누어 표현한다.

Regular Class : interface의 너비 혹은 높이가 비교적 크다.

Compact Class : interface의 너비 혹은 높이가 비교적 작다.

위의 iPone X의 그림에서 알 수 있듯이 같은 길이라도 가로인지, 세로인지에 따라 Size Class가 다를 수 있다.

기기별 Size Class는 Human Interface Guidelines에서 확인할 수 있다.

 

 

 

 

#2. Assignment

- 네비게이션 컨트롤러와 탭바 컨트롤러 실습하기

- 탭바가 10개라면 어떻게 보일까?

(노가다 현장)

탭바가 너~무 많아지면 왼쪽 사진처럼 따로 표시된다.

 

 

- 과제 EmotionDiary Project UI 구성하기

참고 자료(좌), 결과물(우)

우선 오토 레이아웃부터 구성하는데, 이게 의외로 쉽지 않았다.

StackView를 활용해 위치와 크기를 잡는것까진 아주 쉬웠는데, 버튼의 이미지 크기와 타이틀 위치가 마음처럼 변경되지가 않는 것이었다.

 

Inset을 활용하자는 생각까지는 쉽게 갔지만...ㅎㅋ...

 

이런 요상한 시행착오를 여러번 겪은 후에야 겨우 레이아웃이 끝났다.

 

레이아웃은...끝났는데...

 

이제 버튼을 누를 때마다 숫자가 올라가게 해야되는데...

 

현재시각 am 2:47

겨우겨우 컴파일에러 다 지웠다 싶었더니 1초만에 런타임 에러가 나버린다...

어찌저찌 고쳐가며 여러 방법을 시도해도 계속 다른 에러가 나고, 이 코드는 print는 다 나오는데 타이틀이 안바뀐다ㅠ

추가 - 방금 안 엄청난 사실

Attributed로 해놓으면 Settitle이 안먹음..

레이아웃 할때 그냥 눌러봤던건데 이렇게 될줄이야...

아무거나 건드리지 말자. 건들거면 읽어보고, 생각해보고 건들자.

 

 

현재시각 am 3:13

드디어 해결했다!!!!!!!

이쯤 되면 오기로 하고있던거라, 비효율적이건 뭐건 상관없다ㅠㅠ 내 시간은 헛된게 아니었구나...

우선, currentTitle이 계속 바뀌기 때문에 index를 이용해서 앞 3글자까지 문자열을 잘라서 가져왔다.

자른 문자열을 result라고 하고, result를 key로 하는 dictionary를 만들어 value를 +1씩 업데이트 해준다.

마지막으로 setTitle를 통해 업데이트된 value를 key와 함께 보여준다.

 

 

 

 

# 그 외

- CornerRadius의 응용! 한쪽만 깎는 법

우선 예시 코드를 먼저 살펴보자.

tempView.layer.maskedCorners = [.layerMinXMaxYCorner]
tempView.layer.cornerRadius = 20

여기서 [] 안에 들어갈 값은 둥글게 만들고 싶은 꼭짓점의 위치에 따라 다르다.

아래 그림을 참고하면 이해가 쉽다 :)

 

 

- NavigationViewController / TabViewController 연결

NavigationViewController를 첫 화면과 연결할 때는 RootViewController로 연결해야 한다.

 

TabViewController도 마찬가지로 Relationship Segue으로 연결하면 된다.

 

 혹은 ViewController를 선택한 후 Embed를 통한 연결도 가능하다.

 

 

 

 

 

- 프로젝트 폴더 관리

나중에 한 프로젝트에 여러개의 폴더를 관리하게 되면, 제대로 연결이 안 되거나 바로바로 반영이 안 될때가 있다고 한다.

그럴 땐  Build Phases에서 확인하고 관리할 수 있다.

 

 

 

 

# 더 공부하고 싶은 부분... 오늘은 늦었으니 이만 잡시다 

shadow에 대해...