포스트

Clima (1)

게시 업데이트
By Dongik Song
10 분읽는 시간

Main Storyboard를 보게되면 날씨 아이콘이 있는데 SF Symbol 이다.

iOS13에서 새로 추가 되었다.

관련 링크 https://developer.apple.com/sf-symbols/

SF Symbol어플을 설치하면 여러 심볼들을 확인 할 수 있다.

보통 목록에 엄청나게 많은 이미지들이 있기 때문에, 우리가 미리 어플을 통해 확인하고 입력해서 쉽게 찾을 수 있다.

우리가 다크모드를 사용할때 custom을 하게 되면 색이 바뀌지 않지만,

System Color를 사용하면 다크모드 지원이 된다.

그렇다면 내가 원하는 색상을 하고 다크모드를 지원하게 하려면 어떻게 해야할까?

다크모드 지원하는 색상 만들기

Assets.xcassets를 선택하고 아래 +를 클릭하여 이미지를 추가할 준비를 하자.

그리고 우측에 Insector tap을 가면

이렇게 선택할 수 있다.

그러면 우리가 light, dark 모드에 대한 색상을 정의를 할 수있게 된다.

내가 원하는 색상으로 하고싶다면 custom에서 palette를 통해 색상을 따오거나, 아니면 만들고 그다음 드래그를 하여 추가하자.

그리고 다시 Assets로 돌아와서 내가 원하는 색으로 바꿔두고 이렇게 네이밍을 할 수 있다.

그리고 다시 스토리보드로 돌아가서 색상을 고르면?

이렇게 내가 설정한 색상을 선택 할 수 있게된다.

바뀌지 않던 색상이

이렇게 다크모드로 해도 바뀌게 된다!

참고로 다크모드 변환은 아래에 있다.

다크모드에 따른 배경을 변경하기

여태 png, jpg같은 이미지 파일로 했는데, 이미지만을 가지고있는 pdf파일 역시 호환이 된다.

pdf파일을 사용할때는 드래그를 해두고, 벡터 이미지로 사용하기위해 해당 부분을 체크해주고 scale역시 single scale로 해준다.

벡터 이미지란?

점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식, 특성상 이미지의 크기를 늘리고 줄여도 손상되지 않는다. 다만 사진과 같은 복잡한 그림을 표현하려면 컴퓨터에 엄청난 부담을 주기에 웹에서는 잘 사용 하지 않는다.

이렇게 설정을 해주었다.

single scale로 해두어서 2x 3x 에 대한 이미지는 설정할 필요가 없어졌다.

UITextField 사용하기

text로만 검색해도 바로 나온다.

기본적으로 UITextField는 다크모드를 지원한다.

여기서 여러 기능을 설정 할 수 있다.

  1. Content Type
    • 텍스트 필드 안에 들어갈 내용의 타입을 선택한다.
    • 코드 작성 field.textContentType = .creditcardnumber
  2. Capitalization

    • 알파벳 문자열을 입력할 시 첫 글자를 자동으로 대문자로 처리하는 기능, 총 3가지 기능이 있으며

    • None : 대문자로 변환 X
    • Words : 각 단어의 첫글자만
    • Sentences : 문장의 첫글자만
    • Characters : 전체를 대문자로 - 코드 작성 field.autocapitalizationType = .words
  3. Correction
    • 자동 입력 기능
    • 코드 작성 (독특하게 yes/no) field.autocorrectionType = .no
  4. Smart Dashes
    • -를 여러번 이어 썼을때 하나의 줄로 만들어줌.
    • 코드 작성 (이것도 yes/no) field.smartDashesTypes = .yes
  5. Smart Insert
    • 복사 붙여넣기를 했을때 왼쪽에 한칸이 자동으로 공백이 생기는 기능
    • 코드 작성 field.smartInsertDeleteType = .yes
  6. Smart Quotes
    • ’ “ 이게 따옴표와 (아포스트로피) 로 바뀜 field.smarteQuotesType = .no`
  7. Spell Checking
    • 내장된 사전을 바탕으로 스펠링을 체크해주는 기능
    • 코드 작성 field.spellCheckingType = .yes
  8. Keyboard Type
    • 원하는 입력 양식에 맞춰 나오게하는 키보드
    • 흔히 우리가 카드번호를 입력한다고하면 숫자만 뜨는 넘패드도 여기서 설정한다.
    • 코드 작성 field.keyboardType = .numberPad
  9. Keyboard Look
    • 라이트 / 다크모드
  10. Return Key
    • 리턴키의 스타일을 정할 수 있다.
  11. Secure Text Entry
    • 암호처럼 보안이 필요한 글자를 입력할시 ** 이런식으로 가려지는 기능

PlaceHolder는 우리가 입력하기전 희미하게 어떤 text를 입력할지 간략하게 보여주는 기능을 한다.

코드내에서 TextField는

1
2
3

@IBAction func searchPressed(_ sender: UIButton) {
        print(searchTextField.text)
    }

여기서 text는 디스플레이에 보여지는 그 텍스트이다

실행해보자

만약 textField를 눌렀는데 키보드가 나오지 않는다면 Command + K 를 하거나,

시뮬레이터에서 I/O → Keyboard → Toggle Software Keyboard 를 하면 된다/

현재 키보드에 단어를 입력하고 돋보기를 누르면 print가 된다.

하지만 return키를 누르면 프린트가 되지 않는다.

return을 눌러도 작동되게 만들기

class 다음에 UITextField (protocol) 를 추가한다. class WeatherViewController: UIViewController, UITextFieldDelegate {

UITextFieldDelegate 란?

키보드 입력 및 전반적인 TextField 편집과 관련된 기능을 수행하는 프로토콜이다.

그리고 viewDidload에 다음을 추가한다.

1
2
3
4
5

override func viewDidLoad() {
        super.viewDidLoad()
        
        searchTextField.delegate = self
    }

이것은 TextField가 viewController 에게 유져가 타이핑을 시작했다는 전달의 의미로 받아들이면 되겠다.

self는 뷰컨트롤러를 참조한다.

그리고 다음과 같은 함수를 만든다.

이 함수들은 UITextFieldDelegate 프로토콜이 가지고 있는 함수들이다.

바로 유져가 리턴버튼을 눌렀을때에 대한 처리를 이 함수에서 한다.

실제로 작동하는지 다음과 같이 적었다.

1
2
3
4

 func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        print(searchTextField.text!)
        return true
    }

테스트 결과 아주 잘 나온다.

하지만 키보드가 사라지지 않는다.

검색버튼이나, return을 눌렀을때 키보드가 사라지게 하기.

searchTextField.endEditing(true) 이걸 추가하자.

입력을 다했을때 키보드를 사라지게 해준다.

searchPressed, textFieldShouldReturn 두 함수에 추가해주자.

입력후 버튼을 눌렀을때 text를 Reset시키기

위의 이미지만 보아도 입력해도 textField에는 그대로 남아있다.

검색이나 리턴을 누른 후, 글자가 모두 초기화 되게 만들어보자

1
2
3

 func textFieldDidEndEditing(_ textField: UITextField) {
        searchTextField.text = ""
    }

이 함수는 뷰컨트롤러에게 유져가 입력을 끝마쳤다는 신호를 전달하고, 그때 “” 함으로써, text값을 초기화 하는것이다.

이렇게 버튼을 누르면 textField의 값이 사라지게 되었다.

마지막으로 유용한 Delegate 방법이 있다.

바로 textFieldShouldEndEditing 이다.

return type은 bool이다.

이 함수는 유져가 타이핑을 하지 않고 버튼을 누르게 되었을때 즉 텍스트 필드가 “” 인 상태에서 어떠한 안내를 해줄 수 있는 장치이다.

지금은 placeholder의 내용을 바꿔 주었다.

1
2
3
4
5
6
7
8

func textFieldShouldEndEditing(_ textField: UITextField) -> Bool {
        if textField.text != "" {
            return true
        } else {
            textField.placeholder = "Type something Here"
            return false
        }
    }

그렇다면 textField는 도대체 어디서 온걸까?

우선 should가 들어간 함수들은 delegate에게 물어본다.

shouldReturn은 리턴을 눌렀을때 어떻게 할지 물어본다.

shouldEndEditing은 텍스트 필드에 대한 입력이 중단되었을때 중단할지 물어본다.

Udemy, Clima
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.