Git Product home page Git Product logo

til's Introduction

TIL

Today I Learned

til's People

Contributors

cchanmi avatar

Watchers

 avatar

til's Issues

Cell Init

코드로 Cell을 만들면 init을 생성해 주어야 합니다.

인터페이스 빌더에서는 자동으로 초기화를 해 주지만, 코드에서는 인터페이스 빌더를 사용하는 것이 아니기 때문.

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

addTarget을 이용한 이벤트 처리

addTarget이란?

UIControl 클래스 안에 있는 인스턴스 메서드이다.
UIButton이나 UITextField와 같이 사용자가 직접 컨트롤할 수 있는 객체에 접근하여서 특정이벤트가 발생할 때마다 작성한 메서드를 동작하도록 만들 수 있다.


사진과 같이 로그인, 비밀번호를 입력하였을 때 버튼 활성화 이벤트 처리를 해 주자.

    private func addActionToTextField() {
        self.userNameTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
        self.passwordTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
    }
    
    @objc func textFieldDidChange(sender: UITextField) {
        self.loginButton.isEnabled = (userNameTextField.hasText && passwordTextField.hasText) ? true : false
    }
  • target 파라미터 : 설정한 메서드가 호출되는 개체. UIControl를 갖고 있는 상위 View를 특정하기 때문에, 보통 self로 둔다.
  • action 파라미터 : #selector()를 이용하여서 이벤트가 발생할 때마다 동작하는 메서드를 선언해 주는 파라미터
  • for 파라미터 : 어떤 이벤트가 발생할 때마다 선택된 메서드를 실행할 것인지. 지금 코드에서는 editingChanged라고 적혀 있어서 두 텍스트필드에 값이 들어온다면 이벤트가 발생하게 될 것이다.

두 텍스트 필드에 값이 들어왔을 때 버튼 활성화

textViewPlaceHolder

TextViewPlaceHolder

  • textView란?

여러줄의 text를 받아야 할 때 사용하고, 스크롤이 가능합니다. TextView는 PlaceHolder 기능을 지원하지 않습니다. 같은 기능인 TextField와의 차이점을 비교하자면, TextField는 한 줄 입력이 가능하고, PlaceHolder의 기능을 사용할 수 있습니다.

그렇다면 textView에 PlaceHolder 기능을 사용하고 싶다면 어떻게 해야 할까? 일종의 트릭을 사용하여 구현할 수 있습니다. UITextFieldDelegate를 채택하여 커스텀을 해야 합니다.


  1. extension으로 textViewDelegate를 채택하여 두 개의 함수를 선언해 줍니다.
extension CreatePostViewController: UITextViewDelegate {

// 텍스트뷰가 편집이 시작되었을 때, 텍스트뷰의 내용을 지우고
// 검은색 글씨로 입력하게 한다.
    func textViewDidBeginEditing(_ textView: UITextView) {
        if textView.textColor == UIColor.opaqueSeparator {
            textView.text = nil
            textView.textColor = UIColor.black
        }
    }

// 텍스트뷰의 편집이 끝났을 때, 텍스트뷰가 비어있다면,
// 회색 글씨의 내용을 작성해 주세요라는 text로 내용을 입력시켜 놓는다.
    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text.isEmpty {
            textView.text = "내용을 작성해 주세요"
            textView.textColor = UIColor.opaqueSeparator
        }
    }

그리고 뷰컨에 textViewPlaceHolder에 대한 함수를 작성해 주고 호출합니다.

방금 선언해 주었던 TextView에 대한 delegate를 뷰컨에서 처리하도록 하고, 처음 화면이 뜨면 textView의 내용을 회색 글씨로 “내용을 작성해 주세요"으로 보여 주게 합니다.

func textViewPlaceHolder() {
        postTextView.delegate = self
        postTextView.text = "내용을 작성해 주세요"
        postTextView.textColor = UIColor.opaqueSeparator
    }

처음 화면이 떴을 때.

스크린샷 2022-06-20 오후 9 52 55

입력을 시작할 때

스크린샷 2022-06-20 오후 9 14 34

Modal에 대해 알아보자

Modal이란?

사용자가 보고 있는 화면 위에 다른 화면을 띄워서 시선을 끌게 하는 방법입니다.
네비게이션 컨트롤러와 같이 흐름이 이어져야 하는 화면보다는 주로 흐름이 딱 끊어져서 눈에 딱 들어와야 하는 화면을 보여 주는데 사용합니다.
그리고 사용자의 입장에서는 화면 아래의 내용을 계속 보고 싶어 하기 때문에, 길게 이어지는 컨텐츠보다는 짧게 보여 줄 수 있는 컨텐츠를 담는 것이 더 좋습니다.

그러니까 대충 ... 짧고 굶직한 컨텐츠를 보여 줄 때 사용한다는 말이군? 🤔


Presentation Style

modal로 화면 전환을 할 경우, 화면의 모양을 설정해 줄 수 있습니다.

  • .fullScreen : 화면 전체에 새로운 뷰를 보여 주는 방식입니다.
  • .currentContext : fullScreent이 화면 전체를 덮는 방식이라면, currentContext는 present를 호출한 뷰를 기준으로 새로운 뷰를 보여 주는 방식입니다. 뷰가 스크린보다 작을 때 주로 사용합니다.
  • .overFullScreen, .overCurrentContext : 새로 생성하는 뷰의 알파(투명도)를 조정하여서 기존의 뷰를 볼 수 있는 스타일입니다. 위의 두 방식은 기존의 뷰의 context를 삭제해 버리고 새로운 뷰를 띄우지만, 이 방식은 기존의 뷰를 남겨 두고 그 위에 뷰를 덮기 때문에 투명도를 조절하여 새로운 뷰 아래 기존의 뷰를 볼 수 있습니다.
  • .PageSheet : 뷰의 가로를 늘리지 않고 그대로 보여 주는 방식입니다.
  • .FromSheet : 화면의 가장자리에서 상화좌우 모두 여백을 가지고 있는 방식입니다.
  • Popover : 추가 정보, 추가된 것에 대한 추가 옵션 등을 나타내는데 iPad에서 사용되는 방식이라고 하네요.

image

image

currentContext 방식 예시

구현 예시 코드

    @objc func dissolveImage() {
        let letterViewController = LetterViewController()
        letterViewController.modalPresentationStyle = .fullScreen
        self.present(letterViewController, animated: true, completion: nil)
    }

Transision Style

추후에 실습 영상 첨부
새로운 뷰로 전환될 경우, 애니메이션을 설정해 줄 수 있습니다.

  • .coverVertical : 화면 밑에서 새로운 뷰가 수직으로 올라오는 전환 스타일입니다.
  • .flipHorizontal : 화면을 수직선을 기준으로 뒤집는 전환스타일입니다.
  • .crossDissolve : 화면 전체가 흐려지면서 빠르게 새로운 화면이 나오는 전환 스타일입니다.
  • .PartialCurl : 책의 한 페이지를 위로 넘기는듯한 전환 스타일입니다.

구현 예시 코드

   @objc func dissolveImage() {
        let letterViewController = LetterViewController()
        letterViewController.modalTransitionStyle = .crossDissolve
        self.present(letterViewController, animated: true, completion: nil)
    }

ViewController Life-Cycle

ViewController Life-Cycle

생명주기는 Not Running 상태에서 Inactice, Active 과정을 거쳐 Suspended까지 변화를 가진 다음에 다시 Not Running 상태로 돌아가는 흐름을 가지고 있습니다.

ViewController의 생명주기는 장면(Screen)의 전환과 복귀에 밀접하게 연관되어 있습니다. 새로운 화면으로 전환하거나, 이전 화면으로 복귀하는 과정에서 ViewController 객체의 소멸과 생성이 이뤄지기 때문입니다.

앱을 처음 실행하거나 새로운 장면으로 전환할 때에는 그 장면을 담당하는 ViewController의 객체가 새로 생성됩니다. 생성된 객체가 메모리에 로드되어 자신의 역할을 하게 되고, 주어진 역할을 끝내고 나면 앱은 이전 화면으로 복귀하고, 생성되었던 ViewController 객체는 메모리에서 해제되면서 소멸하게 됩니다.

화면 상태에 따라 메모리를 효율적으로 관리하기 위해서는 ViewController의 생명주기를 잘 이용하고 세부적인 제어가 필요합니다.

예를 들어, 타이머나 스톱워치의 경우 화면에서 지속적으로 남은 시간 또는 경과 시간을 갱신해서 표시해야 합니다. 하지만 만약에 이 화면이 다른 화면에 덮인 상황이라면, 굳이 화면을 갱신하고 있을 필요가 없습니다. 그리고 다시 화면이 표시될 때 한꺼번에 계산해서 경과 시간을 처리해 주면 됩니다. 이런 상황을 생명주기를 통해 제어할 수 있고, 메모리 또한 효율적으로 관리할 수 있습니다.

image

  • Appearing : ViewController가 스크린에 등장하기 시작한 순간부터 등장을 완료하기 직전까지의 상태.
  • Appeared : ViewController가 스크린 전체에 완전히 등장한 상태.
  • Disappearing : ViewController가 스크린에 가려지기 시작해서 완전히 가려지기 전까지의 상태.
  • Disappeared : ViewController가 스크린에 완전히 가려졌거나 혹은 퇴장한 상태.

Animation

Animation

  • 애니메이션은 클로저를 기반으로 작성한다
  • 애니메이션이 가능한 속성은 정해져 있다.
    -> 좌표, 레이아웃 관련값 : frame, bounds, center
    -> 모양 관련 값 : transform
    -> 색상 관련 값 : alpha, backgroundcolor
UIView.animate(withDuration: TimeInterval, 
			  delay: TimeInterval, 
			  options: UIView.AnimationOptions,
                	animations: () -> Void
                    completion: ((Bool) -> Void)?)
  1. withDuration (필수) : 몇 초 동안 애니메이션이 진행될 것인지 결정한다. ex) 3.0이면 3초 동안 실행.
  2. delay : 몇 초 후에 애니메이션이 진행될 것인지 결정한다. ex) 3.0이면 3초 뒤에 실행
  3. options : 애니메이션의 옵션을 결정한다.

대표적으로 많이 쓰이는 옵션 리스트

옵션 기능
allowUserInteraction 애니메이션 도중 터치 활성화
repeat 애니메이션 무한 반복
autoreverse 반대로도 실행 가능 (repeat이랑 같이 사용해야 함)
curveEaseInOut(기본값) 애니메이션이 느리게 시작한 다음, 진행에 따라 애니메이션 속도가 빨라짐
cureveEaseOut 애니메이션이 빠르게 시작되고, 끝날때쯤 느려진다.
curveLinear 애니메이션 속도가 균일함

속도를 지정할 수 있는 옵션
-> 더 많은 옵션들은 애플공식문서

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.