LEEO TIL Dev Log

테이블뷰와 셀프 사이징 테이블뷰을 활용한 간단한 앱입니다. 엄청 간단한 앱이라 금방 만들겠네 했었는데, 생각보다 모르는 부분이 많아서 이번 기회에 배운 내용들을 하나씩 정리 하려고 합니다. 구현을 하면서 막혔던 이슈들에 대한 정리로 서술됩니다. 전체 코드는 이곳 에 있습니다. 먼저 앱이 동작하는 것을 보시고, 아 이런 건 이렇게 만들어야지가 바로 떠오르신다면 이 글을 볼 필요가 없습니다! 앱의 동작은 이곳 에 있습니다. 앱의 구조 앱은 크게 2개의 화면으로 되어있습니다. 하나는 아티스트들을 나열하는 테이블 뷰와 클릭 했을 때 상세 내용을 보여주는, 상세 테이블 입니다. 상세 페이지로 이동하기 위해서 네비게이션 바에 넣어주었습니다. 커스텀 네비게이션 바 앱의 가장 첫 화면에서 보이는 네이게이션 바를 그리면서 문제가 생겼습니다. 스토리보드에서 navigationBar의 스타일 옵션중에 prefersLargeTitles 을 true로 설정하고 배경색을 주고 폰트까지 설정한다음 화면을 보니. 원하는 모습이 나오지 않았습니다. 원래 원했던 것은 위까지 다 차있는 모습이었는데, navigationBar 부분만 색상이 찼습니다. 당연히 navigationBar의 부분의 배경색만 바뀌는게 맞습니다. 내가 원하는대로 바꾸려면 커스터마이징을 해주어야 합니다. 그리고 그 커스터 마이징을 하기 위해서는 UINavigationBarAppearance 를 공부해야했습니다. 자세한 정리는 아래에 참고에 써 놓도록 하겠습니다. 블로그에 정리하는 것도 좋지만 잘 정리된 내용을 정독하는 방법도 개인적으로는 효율적이라고 생각합니다. let myColor = UIColor(red: 118.0 / 255.0 , green: 158.0 / 255.0 , blue: 71.0 / 255.0 , alpha: 1.0 ) let appearance = UINavigationBarAppearance() appearance. backgroundColor = myColor app...

30개의 프로젝트를 만들고 있다가, 중간에 멈춰버린 프로젝트입니다. 이유는 간단했습니다. 테스트 코드를 어떻게 짜야하는지도 모르는데 TDD로 프로젝트를 시작했다가 낭패를 보았습니다. 이 프로젝트를 진행하면서 Test는 어떻게 할 수 있는 것이고 어느 부분을 할 수 있는지 나중에 공부하기로 미뤄두었습니다. 메인페이지 Test 페이지를 뺴면 그리 복잡한 앱은 아닙니다. 가장 메인에 테이블 뷰 하나를 만들어 줍니다. 그리고 우측 상단에 새로운 TodoList의 아이템을 추가할 수 있는 뷰를 하나 추가해주고, 마지막으로 투두 리스트를 눌렀을 때, 상세 내역이 보이도록 하는 디테일 뷰가 필요합니다. 기능 구현 추가는 원래 서버에 저장하고 잘 불러오는지에 대해서도 추가해야 하지만, 간단하게 앱내의 저장영역에 저장했습니다. 너무 길어지다 보니 애정도 떨어지고, 개발에 대한 흥미도 떨어지면서 완성을 제대로 하지 못했습니다. 나중에 기회가 된다면 다시 잘 만들고 싶은 앱 입니다. 테이블 뷰 이 이전 앱 부터 테이블 뷰를 쓰는 방법은 익혀왔고, 딱히 이 앱에서 더 특별한 것은 없어서 이렇게 간단히 구현하고 앱 구현을 마칠까 합니다.

[Swift-30-Projects]03. IOS 클론코딩 FacebookMe 테이블 뷰를 이용해서 화면을 구성해보자. 앱 뜯어보기 한 화면의 테이블 뷰이다. 상단에는 네비게이션 바가 있고 Facebook이라고 적혀있다. 5개의 섹션으로 이루어져 있다. 프로필셀로 이루어진 섹션, 여러 정보들을 보여주는 섹션, 즐겨찾기 섹션, 설정과 정책 섹션, 로그아웃 섹션. 페이지 이동 할 수 있는 부분에는 화살표가 있고, 로그아웃은 중앙에 정렬되어있다. 기능은 구현하지 않고 껍데기만 구현해본다. 네비게이션 바 상단 네비게이션 바를 띄운다. 이번 프로젝트는 스토리보드를 쓰지 않고 진행한다. 하나의 테이블 뷰 이기 때문에 스토리보드를 쓰는 것 보다는 테이블 뷰를 보기 좋게 짜는게 구조화 되어 이해하기 쉬울 것 같다. ** 스토리보드 없이 코딩하는 방법 **을 이용해서 화면을 하나 띄운다. 다만 주의해야 할 점은 네비게이션 바 위에 뷰를 하나 띄운다는 점이다. title을 설정해주고, navigationController?.navigationBar.barTintColor 로 네비게이션 바의 색을 지정해주면 끝! 테이블 구조 전체 섹션은 5개이다. 각 섹션별로는 1,7,1,3,1개의 로우가 있다. 몇 몇 개의 로우를 제외하면, disclosureIndicator가 있다. 테이블 셀은 눌리고 나면 선택해제가 바로 되어야 한다. 프로필 섹션 프로필의 셀 모양은 subtitle이다. 다양한 셀 모양 을 알아두자. 텍스트라벨과, 이미지, 디테일텍스트라벨을 입력해주면 완성 기능 섹션 여러가지 기능이 있는 섹션이다. 셀의 스타일을 subtitle로 만들어주고 이미지와 타이틀을 넣어준다. FAVORITE 헤더의 길이를 길게하기위해, 아무 내용도 없는 셀을 하나 추가해서 2배로 긴 헤더를 만들어 주었다. 설정 섹션 기능 섹션과 마찬가지로 이미지와, 내용을 넣어준다. 로그아웃 섹션 글의 색상을 red로 바꿔주...

[Swift-30-Projects] 02. IOS 클론코딩 Stopwatch Stopwatch 앱 뜯어보기 화면 절반은 뷰, 절반은 테이블 뷰 뷰의 절반은 디스플레이, 나머지는 제어 버튼 테이블 뷰는 기록 셀이 들어가야 함 기능 한 페이지 짜리 앱이다. 초기 상태 : [LAB, START], START 버튼을 누르면 [LAB, STOP] LAB은 기록. STOP 누르면 [RESET, START] 시작 버튼을 누르면 스톱워치가 가야한다. 랩을 누르면, 기록이 저장되어야한다. 화면 구성 storyBoard로 구성할 수 있는 만큼 함. 싱글 뷰를 하나 만들고 하위에 스탑워치를 위한 뷰, 시작 종료를 위한 버튼2개, 기록을 나타낼 테이블 뷰를 넣는다. 뷰에는 라벨을 2개 넣어 기본 경과 시간과, 랩간 차이를 보여주는 라벨을 넣는다. 조작 버튼은 누를 때 마다 스탑워치의 상태를 변경한다. 테이블 뷰를 하나 만들고, 테이블 뷰 안에는 랩 버튼을 누를 때마다 셀을 넣어준다. 버튼동작 [스타트, 랩, 리셋, 스탑 버튼] 다른 기능은 생각하지 않고 버튼의 동작과, 스탑워치의 진행 상태값만 고려하여 구현한다. 초기는 [LAB, START] 상태로 둔다. START -> [LAB, STOP] -> [RESET, START] RESET 버튼을 누르면 초기화 상태. LAB 버튼을 누르면, 테이블에 시간 기록. 시간 시작, 멈춤, 초기화 isPlaying 이 true인 상태 즉 기록이 되는 중 에만 시간이 가고 false인 상태에서는 멈춰야한다. 데이터를 위해 타이머 모델을 하나 만들어준다. 필요한 내용은 타이머객체와 시간카운터이다. 타이머는 문서 를 보고 만든다. 0.035 초마다 시계를 업데이트 해줄 것이고 계속 반복하기 때문 mainStopwatch.timer = Timer.scheduledTimer(timeInterval: 0.035, target: self, sel...

[Swift-30-Projects] IOS 클론코딩 GoodAsOldPhones Good As Old Phones 앱을 구조 살피기 앱 레이아웃 구성 Products Details Contact Us 앱을 구조 살피기 화면은 크게 2개의 Tab Bar로 구성되어있다. Products 와 Contact Us. 상품의 목록을 나열하는 Products는 테이블 뷰로 이루어져있다. 각각의 상품을 입력하면, 상세페이지로 넘어간다. 상세페이지에는 카트에 추가할 수 있는 버튼이 있다. Contact Us 페이지는 하나의 UIView이며, 연락처가 적혀있다. 앱 레이아웃 구성 앱 동선은 Storyboard를 이용해서 구성해준다. 먼저 크게 Tab Bar 컨트롤러로 두 화면을 갈라준다. 그리고 각각의 Tab Bar의 Item의 이름을 Products와 Contact Us로 변경해준다. 간단한 Contact Us 페이지에는 UIView를 넣어준다. Products 페이지에는 Navigation Controller와 TableView를 추가해준다. TableView의 Cell 선택시에는 UIView로 이동할 수 있도록 해준다. Contact Us 간단한 페이지 부터 구현한다.(개인취향이기 때문이다.) Custom Class로 ContactUsViewController를 추가해주고 하나 생성해준다. override func viewDidLoad() { super.viewDidLoad() setupScrollView() setupContents() } ContactUsViewController를 만들어준다. Storyboard에서 해당 UIView를 컨트롤 할 컨트롤러로 UIViewController를 지정해준다. 뷰가 로드되는 시점에 스크롤 뷰를 하나 생성하고, 뷰를 하나 생성한다. 뷰에 스크롤뷰를 추가하고, 스크롤 뷰에 뷰를 서브뷰로 추가한다. func set...