이 글은 dots.여자부-새해 LT대회!#dotsgirls가 진행한 현장 코딩의 내용이다.이 현장 코드에서 다음과 같은 몇 가지 점에 중점을 두었다.

초보자라도 간단하게 응용 프로그램을 쓸 수 있다

UIStackView를 사용하여 UI를 쉽게 만들 수 있음

Timer의 시간 구동 처리 이해

따라서 테마의 사전 인코딩을 현장 인코딩한다.5분이면 돼요.

완성도

이런 타이머 프로그램을 만듭니다.

등거리로 배열된 부분이 많아 UIStackView로 UI를 만들고 싶다(UIStackView와 관련해서는 나중에 추가하고 싶다).

버전 정보

Swift:3.0.1
Xcode:8.2.1

실시간 인코딩 내용

프로젝트 작성

Xcode 제작 프로젝트를 시작합니다.

이번에는 특별히 복잡한 일을 하지 않으므로 Single View Application을 선택하십시오.

프로젝트 이름을 적당히 정하고 프로젝트 배치처를 설정한 후 준비를 마친다.

이 상태에서 실행(왼쪽 위 모서리)▶마커를 클릭하면(아무것도 하지 않았기 때문에) 흰색 화면이 나온다.

그래서 저는 UI부터 만들고 논리를 쓰고 싶습니다.

UI 부품 구성

이번에는 storyboard를 사용하여 GUI에서 UI를 만듭니다.Main.storyboard 이 파일을 클릭하면 이렇게 화면이 됩니다.빨간 상자 부분은 프로그램을 시작할 때 가장 먼저 표시되는 화면입니다.UI 부품을 여기에 놓으세요.

먼저 UIStackView를 구성하려면 오른쪽 아래에 있는 검색 창에서 를 찾아 드래그 앤 드롭(UIStackView가 무엇인지에 대한 추후 참조)합니다.

이렇게 되면 이 UIStackView는 화면 어느 위치에 두면 좋을지 몰라 제한을 추가했다.제약이란'A의view와 B의view의 너비가 같다'는 등 위치와 사이즈에 대한 규칙을 가리킨다.
그럼 우선 왼쪽 간격의 제한을 추가합니다.

StackView에서 왼쪽으로 control 키를 눌러 끌어 놓으면 이러한 내용이 표시됩니다.
왼쪽(Leading)의 여유를 조정하려면 Leading Space to Container Margin을 선택합니다.그러면 선이 표시됩니다.SuperView와 이 StackView 사이에 제한이 추가되었습니다.이 선을 선택하면 이 제한에 대한 정보를 오른쪽에 표시합니다.현재 112곳에 커미션이 설치된 것 같다.나는 이것을 10으로 바꾸려고 한다.

보기 힘들지만 온라인에는 숫자가 적혀 있다.구속 및 도면 위치의 편차 때문에 차분 값이 표시됩니다.
이어 상·우·하단에도 10개의 여백을 더했다.이렇게 된 기분이야.

이것은 얻기 어려운 기회이기 때문에 우리는 그림과 일치하는 것을 제한할 것이다.위 이미지의 오른쪽 아래에 있는 Update Frames 버튼을 클릭합니다.이제 구속이 그려집니다.

그럼 이 StackView에 UIlabel과 Vertical StackView를 추가합니다.아까의 방식으로 찾은 다음 드래그 앤 드롭 방식으로 왼쪽에 있는 객체를 찾습니다.
StackView에 두 개가 구성되어 있습니다.높이를 동일하게 하려면 StackView를 선택한 상태에서 Distribution을 Fill Equally로 변경합니다.

다음에 등거리로 단추를 배열합니다.아래 섹션에 구성된 Stack View에 3개의 버튼을 삽입합니다.검색 창에서 UIButton을 찾아 끌어 놓습니다.
Distribution 은 Stack View 를 선택한 상태에서 Fill Equally 로 변경됩니다.객체 정렬은 여기서 끝냅니다.

세밀한 배치 조정 을 하다

초 확대 표시 문자

레이블을 선택한 상태에서 왼쪽 메뉴에서 Font을 찾아 숫자를 변경합니다.이번에는 50.0을 적당히 쳤다.

초점 맞추기

마찬가지로 Label을 선택한 상태에서 왼쪽 메뉴에서 Alignment를 찾아 중앙 마커를 클릭합니다.

UILAbel, UIButton에 대한 기본 문자열 지정

이제 "Label"및 "Button"같은 문자열이 있으므로 변경하겠습니다.두 번 클릭하면 입력할 수 있으니 각각 고쳐 쓰세요.

객체 링크

현재storyboard의 대상은 코드와 전혀 관련이 없는 상태이기 때문에 링크를 진행합니다.먼저 화면을 다음 상태로 설정합니다.왼쪽 상단의 단추 상태가 같으면storyboard와 코드 두 가지를 볼 수 있습니다.왼쪽은 마인입니다.storyboard, 오른쪽은 ViewController입니다.swift를 구성했습니다.

먼저 UIlabel을 연결합니다.control 키를 누르면서 UILAbel의 상단 방향 코드의viewDidLoad 위에서 드래그합니다.그리고 다음 화면입니다.

Name에 timerLabel을 추가하고 connect 단추를 누르십시오.그럼 다음 코드가 생성될 겁니다.@IBOutlet weak var timerLabel: UILabel!연결이 종료되었습니다.마찬가지로 startButon, stopButon, resetButton도 연결된다.

필요한 변수 준비

타이머 프로그램을 만들 때 필요한 변수입니다.이벤트가 발생한 Timer와 시간 표시를 트리거할 때 사용할 Flat을 준비합니다.

private var timer = Timer()
private var count = 0.0

시작 타이머 처리 쓰기

마침내 구체적으로 처리하는 단계에 이르렀다.
우선 아까와 같이storyboard에서 코드 파일로 드래그하십시오.

동작을 정의했기 때문에 이번에는 Name뿐만 아니라 Connection을 Action으로 변경해야 합니다.Connection과 Name을 만지작거리며 connect를 누르면 다음 코드가 생성될 것입니다.

@IBAction func startTimer(_ sender: Any) {
}

그러면 이 방법에서 start 버튼을 눌렀을 때의 처리를 적어주세요.isValid를 사용하면 타이머가 현재 움직이고 있는지 확인할 수 있습니다.따라서 이동하지 않으면timer에는 다양한 설정이 들어간다.이번 상황은 업데이트 타임머를 0.1초마다 반복해서 부르는 방법으로 계산한다.따라서 아래 코드는 다음과 같다.

@IBAction func startTimer(_ sender: Any) {
    if !timer.isValid {
        timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(ViewController.updateTimer), userInfo: nil, repeats: true)
    }
}

이것만 복사했을 뿐, 업데이트 Timer 방법을 아직 만들지 않았기 때문에 욕을 먹을 수 있다.그래서 업데이트 Timer 방법을 만듭니다.이 방법은 0.1초에 한 번씩 호출되어 초의 수치로 표시됩니다.따라서 아래 코드는 다음과 같다.

@objc private func updateTimer() {
    count += 0.1
    timerLabel.text = String(format: "%.1f", count)
}

String(format: "%.1f", count)의 부분에서'count의 포맷은 소수점 1위의 포맷으로 문자열로 수정할 수 있다'는 것을 알 수 있다.
이렇게 하면 가산점을 받을 수 있다.

쓰기 중지 타이머 처리

처음과 같이 storyboard에서 코드로 드래그합니다.이번에는 Name에 stop Timer를 미리 입력합니다.

timer 처리를 정지하기 때문에, Timer 클래스의 invalidate 방법을 사용하여 정지합니다.따라서 아래 코드는 다음과 같다.

@IBAction func stopTimer(_ sender: Any) {
    if timer.isValid {
        timer.invalidate()
    }
}

타이머 재설정 작업 쓰기

마지막으로 리셋하고 0부터 시작합니다.마찬가지로 storyboard에서 코드로 드래그합니다.Name은 resetTimer를 원합니다.
타이머 처리를 중지하거나 타이머 표시를 0으로 재설정할 수 있습니다.그래서 다음 코드는

@IBAction func resetTimer(_ sender: Any) {
    timer.invalidate()
    count = 0.0
    timerLabel.text = String(format: "%.1f", count)
}

이렇게 하면 최소한의 타이머 프로그램이 완성된다.

소스 코드

대단한 코드는 안 썼지만 여기 있어요.
https://github.com/akatsuki174/UILiveCoding

최후

간단한 응용 프로그램이라면 이렇게 코드를 쓰지 않을 것이다.그러니 iOS 애플리케이션 개발에 꼭 도전해 보세요.