https://youtu.be/q7espFLVggQ

 

 

이번엔 다른 viewcontroller로나 class로 값을전달할수있는 NotificationCenter 사용 예제입니다.

 

탭바로 해봤는데 제 생각대로 잘되지않아 오래걸렸네요

 

사용한 소스는 아래와같습니다

https://github.com/wiwi-git/Use-NotificationCenter

 

wiwi-git/Use-NotificationCenter

swift, notificationcenter 튜토리얼 영상소스 . Contribute to wiwi-git/Use-NotificationCenter development by creating an account on GitHub.

github.com

 

별 다른 계획없이 시작하고 몇 달 쉬고 다시 코딩을 하려하니 갑작스레 막히는 부분들이 있습니다.

그런 부분도 그냥 영상에 있어요

 

별다른 편집툴이 없기도 하고, 귀찮기도해서 그냥 대부분은 안잘랐습니다.

 

자른부분은 중간에 화장실다녀온 시간과 이건 좀 보여드리면 위험하겠다싶은 내역부분은 잘랐습니다

 

나중에 이 영상을 바탕으로 텍스트로도 튜토리얼내역을 작성할 생각이긴한데.

 

솔직히 텍스트로 작성하는건 저번 튜토리얼1때 얼마나 귀찮고 시간이 오래걸리는 일인지 알아버려서 왠만해선 안할거같네요

 

https://www.youtube.com/watch?v=ASp2TFlNbPE&feature=youtu.be

 

 

타이핑한 코드는 깃헙에 업로드 되어있습니다.

 

https://github.com/wiwi-git/Use-RestApi

 

wiwi-git/Use-RestApi

rest api를 이용하여 앱에서 정보를 받거나 보내거나 하는 튜토리얼. Contribute to wiwi-git/Use-RestApi development by creating an account on GitHub.

github.com

 

 

flask를 이용해서 작은 rest api서버를 만들었는데

파이썬 자체를 잘 해보지않았고 저도 몇번 안해봐서 엄청 막혔네요 ㅋㅋ

 

파이참이라는 ide로 만들었고

그 이전에 이미 작성된 부분은 파이참으로 flask 웹서버 만들기 라는 강좌를 보고 따라한거라 영상에는 없습니다.

 

 

UI나 기능에 대해 어떻게 할지 상세히 생각하고 하지않고 그냥 일단 만들기시작한거라 도중 수정과 계획에 없던 커스텀한 팝업만들기도 해버렸네요.

 

값교환에 대해서는 영상에서는 꽤나 요상하게 한것같은데

다음영상에서 다룰 notification을 통해서 하는게 더 좋아보입니다.

 

별 생각없이 만들기도 했구요;; 

 

소스에대한 태클과 조언은 언제나 환영합니다

 

https://youtu.be/176q8ojdaEE

 

이전과 같은 앱을 만드는 영상입니다.

이전 강의 내용그대로 따라하는게 좋았겠지만

일일이 읽을 힘이 나지 않습니다...

 

그래서 완성품이였던 앱을 보고 따라 만드는식으로 진행하고있습니다

우선 버튼부분인데 1시간이나 지나버렸네요.

한달넘게 코딩을안하다가 하려니 뭔가 힘드네요

 

사실 퇴사하여 할일없는 니트가 되어 이것저것 올려보려고합니다.

그 첫발이 이거네요.

 

재취직하기 전까지 올릴생각인데 다른분께 조금이라도 도움이 되셨으면 좋겠습니다.

음성은 딱히 없네요.

 

이거 완성되면 다음은 간단한 서버도 같이 만들어서 맞물려 돌아가는걸 해볼까 생각중입니다.

내용은 생각했는데 결과물을 뭐로할지 고민되네요.

실력이 그다지 좋지못합니다.

 

코드가 이렇게 하면 더 좋다 등등의 충고는 매우많이 감사합니다.

 

 

 

 

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36

스톱워치 만들기 (4) : https://wiwi-pe.tistory.com/37

스톱워치 만들기 (5) : https://wiwi-pe.tistory.com/38

스톱워치 만들기 (6) : https://wiwi-pe.tistory.com/39

스톱워치 만들기 (7) : https://wiwi-pe.tistory.com/40

스톱워치 만들기 (8) : https://wiwi-pe.tistory.com/41
스톱워치 만들기 (9) : https://wiwi-pe.tistory.com/42

 

iOS 개발 튜토리얼1 - 스톱워치 만들기 (9) 테이블뷰

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34 스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35 스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36 스톱워치 만들기 (4) : https://wiwi-pe...

wiwi-pe.tistory.com

 

드디어 대망의 완결편입니다.

어쩌다보니 이제서야 완결편을 쓰고있습니다

 

특히 중요하게 생각했던 9편, 테이블뷰쪽 설명이 너무나 넘기고 대충한게 많아서 안타깝네요.

 

오랜만에 다시 이어쓰려고 하니 뭘 안했는지도 기억이 안납니다...

 

그래서 변경하고싶은 세가지 부분을 변경하고 그만두려합니다

 

첫째

테이블뷰에서의 셀안의 이미지가 원래 하려고했던 앱이 아마도 라이트모드에서는 검은색이미지, 다크모드에서는 하얀색이미지였을겁니다.

아마도요;;

그 색상을 변경할것이고

 

둘째

테이블뷰의 라인이 생각보다 거슬립니다;;

그냥 없애버리죠

 

셋째

테이블뷰안의 셀에대한 특별한 이벤트들이 없습니다

하지만 눌러보면 눌러져요!

기본설정입니다 안눌려지게 할꺼에요

 

 

사실 이미지뷰 색상이 이미 지정되어있으실 분도있습니다;

뭐가 기본인지 이건 언제 했는지 기억안나지만 전 파란색으로 뜨고있으니 설정해줍니다

 

그럼 이미지뷰의 색상을 바꿔봅시다

코드로 변경해도되지만 

전 스토리보드가 더 편합니다.

오래만에 main.storyboard로 들어가봅시다

 

아래 사진처럼 셀의 이미지뷰를 선택한후 어트리뷰트 인스펙터의 창으로 들어간후 

뷰 란의 Background 부분을 해당처럼 Default로(색상없음)

Tint를 Label Color로 해주세요.

 

 

 

라벨컬러로 한것은 사실이게 기본 라벨의 텍스트색상입니다 그래서 라이트모드는 블랙, 다크모드는 화이트로 이미 지정되어있어요

그것과 동일하게 해줍겁니다. 참고로 이러한 색상하나에 두가지 상태를 지정해주는거는 따로 할수있으나 여기선 다루지않았습니다.

 

 

동영상은 볼때 광고들어가서 싫은데 이미지 용량제한이 가슴아프게하네요.

 

아무튼 3가지중 하나가 완료되었습니다.

 

만약 변경이 안되시는분은 이전편에서 Assets.xcassets 에서 이미지 속성 변경한게 제대로 되어있나확인하고

혹시나 이미지 속성에대해 따로 설정을 만진부분이 있는지 특히 코드로요 그부분을 확인해주세요

 

두번째와 세번째는 한번에 처리하죠!

다시 Main.storyboard로 갑니다.

그후 테이블뷰를 선택한후 어트리뷰트 인스펙터창을 엽니다

아래 사진처럼 separator 부분을 None으로

Selection 부분을 No Selection으로 변경해주세요

 

 

 

깔끔하게 됐네요

마지막이 되었으니

이프로젝트 전체를 깃허브에 올린 링크를 첨부합니다 ㅎ

 

https://github.com/wiwi-git/Simple_Stopwatch

 

wiwi-git/Simple_Stopwatch

Tutorial - 1탄! Contribute to wiwi-git/Simple_Stopwatch development by creating an account on GitHub.

github.com

 

* 실수로 프로젝트 파일의 대부분을 날려먹어서, 기존에있는거랑 없어진부분 채우고 하면서 조금 달라졌을수도 있습니다;

 

 

 

 

다들 수고하셨어요~

 

아... 다신 이런짓 하기싫네요.

짧게짧게 쓰기만해야겠습니다........ 너무 길었어 

 

 

 

 

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36

스톱워치 만들기 (4) : https://wiwi-pe.tistory.com/37

 

iOS 개발 튜토리얼1 - 스톱워치 만들기 (4) AutoLayout, Constraint

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34 스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35 스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36 iOS 개발 튜토리얼1 - 스톱워치 만들기 (..

wiwi-pe.tistory.com

 

이 튜토리얼의 4번까지 무사히 마치셨다면 드디어 이번편에서 화면구성이 완성됩니다.

원래 생각했던 진도는 1편에서 화면이 완성되고 2편에서 코딩으로 끝내는 짧은 튜토리얼을 생각했는데

어느새 5편째 쓰고있네요............

 

그럼 바로 UI수정에 들어갑시다.

 

4편 마지막에서 라벨에대한수정이 들어간다고 했는데

사실 라벨이 하나더 추가됩니다!

 

만드려고하는 앱화면에서 소수점 크기가 다른부분을 다른 라벨로 붙여주려고합니다.

사실 라벨하나로 이러한일을 할 수 있습니다.

오히려 그렇게하는게 더 깔끔하게 보일수도 있어요.

제가 시간이 많아서 두개로 나눴을때와 하나로 했을때를 비교하는 내용도 넣었으면 좋겠습니다만 

이런부분도 그냥 넘어갈게요. 

 

이 튜토리얼로 공부하고 계시는분은 그 차이에대해 꼭 돌려보시기 바랍니다.

 

그럼 우선 아래 사진처럼 라벨을 하나더 추가해줍시다.

 

 

추가 하셨으면 이제 기존 라벨의 텍스트를 .0를 뺀 00:00으로 수정해주시고 새롭게 추가한 라벨에 .0(이하 소수점라벨)을 넣어줍시다.

그리고 소수점 라벨의 폰트크기를 키워줄거에요.

타임라벨의 크기를 100으로 잡았으니 딱 반절, 소수점 라벨의 폰트 크기를 50으로 잡아줍시다. 

 

 

이제 소수점 라벨을 다른 오브젝트들처럼 제약조건을 잡아줄거에요. 아래 사진과 같이 추가해줍시다.

네, 리딩값만 넣어줬어요!

 

보통 위치라는건 x값과 y값이 정해져있어야합니다.

그러니까 최소 두개의 기준이있어야 위치가 잡힌다는거에요

단순 위치만 말하자면입니다 

스토리보드에서 오토레이아웃을 잡을때 신경써야할부분은 

시작점(x,y)과 너비 높이 입니다

리딩을 잡았으면(x값) 탑이나 바텀을 잡아 Y값에대한 정보가 필요한겁니다.

라벨은 안에있는 글자크기에 맞춰져서 크기를 계산하기에 유동적으로 변화하는 상황이아니라면 크기값은 따로 안줘도됩니다 ㅎ

 

아무튼 x값에대한 제약조건을 걸어줬으면 

이제 y값에대한 제약조건을 걸어줄거에요

 

처음봣던 앱화면의 디자인대로 옆의 타임라벨의 밑줄을 맞춰줄겁니다.

소수점 라벨을 선택한상태로 command키를 누르면서 타임라벨을 선택해 총 소수점라벨,타임라벨 두개를 선택해주세요.

그리고 스토리보드화면의 하단 버튼중 2번째버튼( 기존 Constraints를 추가했던 버튼의 좌측버튼)을 눌러서 First Baselines를 체크해서 추가해줍시다 아래사진처럼요

 

 

최종적으로 소수점 라벨에 붙을 제약조건은 아래와같습니다.

Horizontal, 가로축에대한 제약조건(x축값은) 타임라벨바로붙어있구요

Vertical, 세로축에대한 제약조건(y축값은) 타임라벨의 First Baseline과 같습니다.,

 

이 베이스 라인에대한 꽤나 좋게 설명이 되있는 글이 있어 첨부합니다!

https://www.prolificinteractive.com/2016/03/08/all-about-that-baseline-3/

 

All About That Baseline - Understanding Baseline in Digital Design

Design software can compose the baseline automatically to ensure perfect spacing between lines to easily communicate designs to developers.

www.prolificinteractive.com

이제 라벨에대한 화면이 끝난것같지만

사실 조금 달라요.

 

이게 지금 하고있는 앱의 아이폰11 화면이구요

 

이게원래 만들려고했던 앱의 아이폰11화면입니다.

 

 

대충그은 가운데선이지만 딱봐도 만드려는 앱은 소수점부까지 합쳐서 가운데정렬이 되어있지요?

 

이것을 해결하는방법은 두 라벨을 하나의 뷰에 넣고 뷰를 가운데정렬하거나

 

타임라벨의 가운데로 정렬한 제약조건을 살짝 수정하는겁니다

 

저는 제약조건을 수정해줄거에요.

 

소수점라벨의 시뮬레이터상의 너비를 보면

사이즈 인스펙터에 보면 너비가 44로 나옵니다

".0" 이라는 텍스트를 넣었을때 딱 맞는 크기는 44너비라는거에요

이 너비의 반절만큼만 타임라벨을 왼쪽으로 움직이면될듯보입니다.

 

그럼 타임라벨의 가운데정렬을 시킨 제약조건을 더블클릭해서 수정모드로 들어간후 왼쪽으로 22만큼 옴겨주도록 설정해봅시다

 

위 사진은 타임라벨에 넣어진 제약조건들입니다(사이즈 인스펙터 하단부분) 

여기서 수정해야할것은 Align Center X to: Superview 부분이에요

이를 더블클릭해주고

 

 

이렇게 -22로 적어줍시다.

이게 Frist Item과 Second Item 순서가 바뀌어있을수 있어요

그러면 +22입니다

두 객체 사이의 거리를 설정하는게 기본이기에 항상 방향은 넣어지는 아이템순서에따라 바뀔수있기에 스토리보드화면에서 변경되는것을 확인해보고 저장합시다

 

그러면 이제 아이폰11화면으로 실행해보면 아래와같이나옵니다

 

음 아주 마음에 듭니다 

 

색이 제대로 들어갔는지 (시스템 색상으로 설정되어있어야합니다)

확인해볼게요 다크모드로 변경해보죠

 

시뮬레이터의 홈바를 눌러 바탕화면으로 간뒤 설정앱으로 들어가줍시다

위 사진의 Developer 혹은 한글로되어있으면 

같은 망치 아이콘에 개발자 라고 되어있는 메뉴에 들어가주세요

 

 

그러면 상단에 Dark Appearance라는 항목이 있습니다 이 항목의 스위치를 켜주세요

 

그러면 위화면과같이 다크모드로 변경됩니다

이제 다시 만들고있는 앱화면으로 돌아가보면 

 

전부다 글씨가 보이네요

 

맘에듭니다 ㅎ

 

글씨가 안보이시는분은 해당 오브젝트의 색상이 

Default 아니면 앞에 System이 붙은 색상인지 확인해보세요.

아 Label Color도 자동으로 변경됩니다 ㅎ

 

물론 이는 애플에서 정해주는 스타일이라 나중에 나는 다크모드에서는 다른색으로 변경하고싶어! 라고 하시는분들은

이러한 색상조합을따로 만들수있어요.

이에대한 부분은 다른튜토리얼에서 다뤄봤으면 좋겠네요 ㅎ

 

위에서는 그냥바로 시뮬레이터에서 다크모드로 실행해봤습니다만 

사실 스토리보드에서 대강? 다크모드를 확인할 수 있습니다 ㅎ

스토리보드 하단에 보시면 View as: iPhone11 이라고 적힌 부분이있습니다 이를 누르면 

아래사진처럼 스토리보드의 디바이스를 바꿀수있어요 그리고 그옆에 Interface Style을 빗금이 그어진 애로 변경하면

 

 

아래와 같이 다크모드에서 어떻게 보이나 대강 알아 볼수있도록 스토리보드가 변경됩니다

하지만 이는 다른 요인으로 변경될 수 잇으니 정확이 확인해보시려면 앱을 직접 실행시켜봐야겠죠?

 

 

아무튼 오늘은 짧게 끝내겠습니다

그리고 드디어 앱화면이 완성된것에 대한 박수를 보낼수있게되었어요!

 

 이제 다음편은 드디어 이 각 화면에대한 기능을 만들어볼겁니다 .

다음편에 봐요~

 

 

 

 

 

 

 

 

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

 

저번 2편까지 무사히 끝내셧다면 앱이 시뮬레이터로 무사히 실행이 되었으나

앱에 아무것도 없었을겁니다.

 

이제 앱에 채워넣을 차례입니다.

 

1편에서 본 만들려고하는 앱의 화면을 다시한번 보자면

 

 

위 에서 부터 차례대로

시간을 표시하는 부분 

랩타임을 표시하는 부분

그리고

 

시작 버튼

랩타임 체크 버튼

정지 버튼

초기화 버튼

 

이런식으로

 

크게 

시간표시, 랩타임표시, 버튼부분 세부분으로 나눠져 있습니다.

 

우리는 이 화면을 구성하기위해 애플에서 제공해주는 오브젝트들로 붙여넣을꺼에요

 

설명은 뒤에서 하고 우선 넣을것들 나열하자면

 

UILabel

UITableView

UIButton

 

이렇게 세종류와 

추가로

UITableViewCell 이라는 녀석이 이 앱화면을 구성하게 됩니다.

 

 

 

 

 

 

화면 구성을 시작하기전에 에디터에 보여지는 방식을 저랑 맞추겠습니다.

 

에디터메뉴에 아래 사진처럼 체크해주세요!

 

 

다시 앱화면 구성에 대해서 이야기하겠습니다.

 

우선 UILabel에 대해 이야기하자면

U는 내버려두고 Label을 사전(파파고)에 검색하면 

아래와 같이 나옵니다

 

label[ˈleɪbl]명사

  • 1.(종이 등에 물건에 대한 정보를 적어 붙여 놓은) 표
  • 2.(사람물건의 성격 등을 묘사하는) 딱지
  • 3.음반사, 레이블

다들 아시다 싶이 그냥 라벨이에요

라벨을 라벨이라 부르지못하고 레이블이라 불러야한다지만 저는 앞으로도 라벨로 부르겠습니다........

 

이 UILabel은 애플이 이렇게 설명하고있습니다.

 

A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.

 

텍스트를 포함하고, 뭐 각종 속성들을 넣어 제어할 수 있다고하네요

 

라벨이라는 이름답게 글씨를 표시해주는애 입니다. Text를 표시해주는애인데 

이 앱에서는 다루지않을 다른 텍스트를 표시해주는 녀석들도 있습니다.

 

TableView는 다음에 설명을 할것이고 버튼을 이야기하자면

누구나 다 예상하시듯이 버튼입니다

 

애플은 이 버튼 오브젝트를 아래와같이 설명해주고 있어요

 

You can set the title, image, and other appearance properties of a button. In addition, you can specify a different appearance for each button state.

 

제목, 이미지 기타 속성을 넣고 각 상태따라 다른게 설정을 해줄수있다!

이 상태가 매우 중요합니다.

 

각 오브젝트들에 대해 자세히 다루지는 않을테니 더 궁굼하신분은 애플디펠로퍼의 도큐먼트 페이지들을 봐주세요

 

그럼 

 

우선은 라벨을 넣어서 실행해보죠

 

프로젝트화면의 좌측의 프로젝트 네비게이션에서 Main.storyboard를 누르시면 가운데 화면이 마치 아이폰 시뮬레이터같은 모양으로 변경됩니다.

 

이 하얀 녀석을 마우스로 클릭하면 네비게이션 옆에 있는, Structure Area의 View가 선택되었다고 하일라이트가 될겁니다

앞으로 이 뷰 안에 표시할애들을 넣어줄거에요.

 

뷰안에는 이미 Safe Area가 속해있는데

이는 실제적으로 있는 것이 아니라 실제 화면만 보여질곳, 상단 스테이터스바와 하단 홈바를 제외하고 있는 가운데에 남겨진 영역에 대해 알려주기위한 일종의 가이드라인입니다

 

앞으로 이 가이드 라인에 대한 도움을 많이 받을거에요

 

위 사진의 보라색 실선부분, + 버튼 또는 키보드로 command + shift + L 을 누르면 아래와같은 창이 뜹니다

 

위에 사진처럼 우측에 설명칸이 나와 있을 수도 있고 없을수 도 있습니다.

설명창을 펼치거나 혹은 닫고싶으시면 팝업창 상단의 검색바 옆의 두번째 창모양 버튼을 누르시면되요

 

이제 창에서 보이는 Label을 아까 선택했던 뷰로 드래그 하고 드롭 해주세요

 

그럼 아래와 같이 드롭한 장소에 라벨이 하나 생겼을겁니다.

 

그리고 이 라벨을 더블클릭하면 이 텍스트를 수정할 수 있게됩니다!

아래 사진처럼요

 

 

그리고 옆의 

인스펙터영역이 아래와 같이 5번째가 선택되어 딱봐도 이 라벨에 대한 설정을 변경 할 수 있는 창이구나! 라고 알만하게 여러 속성을이 있습니다

 

이 어트리뷰트 인스펙터창에서 텍스트를 수정하거나, 색상, 정렬 크기 등등 많은걸 수정 할 수 있어요

 

 

스토리보드를 통해 작업을하면 기본적으로 이런식으로 뷰에 필요한 오브젝트를 넣고 설정을해주는 식으로 화면을 구성하게 됩니다.

 

 

 

 

이제 아까 라벨을 추가한것처럼

 

라이브러리버튼(+버튼)을 눌러서 저희가 사용하려하는

 

테이블뷰, 버튼들을 배치해줍시다

 

추가로 넣으려는 오브젝트들은 아래와같습니다 

 

항목을 잘 선택하셔서 드래그 앤 드롭해주세요

아래와같이요!

그리고 이제 

각각의 오브젝트들을 선택하시면 각 사각형이 크기가 수정가능하게 변하는데 이를 잘 조절하여 최대한 만드려는 앱과 비슷하게 만들어줍시다.

 

이제 글자 크기와 색상을 맞춰줄꺼에요.

우선 라벨의 속성은 아래와같이 설정해줄겁니다

라벨을 선택하고

우측의 인스펙터즈 창을 어트리뷰트 인스펙터로 변경되는것을 확인한후

font 는 system 100.0

Alignment 는 가운데로 설정합니다

 

그후 버튼의 색상과 글자크기를 변경할겁니다

우선 Stop버튼을 눌러서 아래와같이 변경해줍시다

그러면 아래와같이 스톱버튼이 변했을거에요.

 

 

나머지 버튼들도 만드려고하는 앱의 화면처럼 변경해줍시다.

 

Start Button , Check Button

font를 30포인트로 올리고 변경없음

 

Reset Button

font를 30포인트로 올리고 Text Color 를 Label Color로 설정

 

아래의 사진과 같이되면 됩니다

 

뭔가 조금 정렬이 안맞고 크기도 잘안맞는거 같고 그렇죠?

그 부분은 다음 포스트에서 다루겠습니다!

 

오늘 우선한것을 command + r 키 또는 실행버튼으로 시뮬레이터로 돌려보세요

아래와같이 나온다면 이번 튜토리얼도 성공입니다

 

 

 

그럼 다음 포스트에서 봐요~

+ Recent posts