UIKit) ios에서 Text 다루기
UILabel, UITextField, UITextView 알아보기
오늘 알아볼 세가지 클래스들은 앱을 개발할 때 문자를 처리해주는 주요 개체이다.
세가지 모두 UIView 내부의 클래스들에 상속 받고있는 클래스이기에 접두어로 UI를 붙여 사용한다.
class UILabel: UIView
class UITextField: UIControl
class UITextView: UIScorllView
고정 된 문자나 앱의 사용자가 읽기 쓰기 등 편집기능을 할 수 있게 구현할 수도 있다.
UILabel
UILabel은 한 줄 이상의 정보텍스트를 표시하는 view이다.
두가지로 나뉘는 데 한 줄을 나타내는 Single-line Label과
여러줄로 나타내는 Multi-line Label이 있다.
라이브러리 창을 열면 제일 위에보이는 주요 개체중 하나이다.
스토리보드를 통해 Label에 적용할 속성을 바꿀때에는 이곳에서 바꾸면 된다.
- Text - 원하는 Text를 입력하면 Label에 표시된다.
Attributed를 선택하면 문자열에 다양한 속성을 추가할 수 있다.
- Color - Text의의 색상을 바꿔준다,
- Font - Text의의 크기, 종류, 스타일을 바꿀 수 있다.
- Dynamic Type - 사용자 설정에 따른 폰트 크기 변경을 할 수 있다.
- Alignment - Text를 정렬해주고 기본값은 네츄럴이다. (나라별 문자 읽는 방법을 숙지하면 좋다.)
- Lines - 지정된 라인 수 많큼 보여지고 0으로 하면 최적화된 라인 수를 보여준다.
- Bihavior - 이 속성의 Enabled 체크를 해제하면 그레이 색상으로 변하며 문자가 비활성화 된다.
- Line Break - Text가 길 경우 속성에서 선택된 부분을 생략해준다.
- AutoShrink - 기본값으로 Fixed Font Size가 지정되어있고, 라인 수에 모든 텍스트를 출력할 수 있도록 폰트 사이즈를 자동으로 바꿔준다.
Tighten letter spacing - 문자 사이의 간격이 줄어들고 동일한 프레임에 조금 더 많은 텍스트를 표시해준다.
코드를 통해 Label의 속성을 변경해 보았다.
TextField
Text Field는 사용자로부터 입력을 받을 때 사용하는 대표적인 컨트롤이며 Single-line에 최적화되어있다.
Text Field는 많은 속성들을 가지고 있지만 몇 개의 부분은 Label과 동일한 속성을 가진다.
주요 속성들을 한번 알아보자!
Placeholder
플레이스홀더에 사용자에게 설명해줄 Text를 입력해주면
위에 보는 움짤 처럼 사용자의 Text 입력과 동시에 사라진다.
여러 앱들에서 자주 보이는 기능이고 많이 사용된다!!
Tip - 시뮬레이터에서 키보드가 올라오지 않는다면 커맨드키 + K 를 통해 사용할 수 있다.
이 외에도 속성을 통해 Text Field의 테두리를 변경할 수 있고,
Text Field에 이메일이나 아이디, 비밀번호 또는 전화번호등을 입력할 떄
KeybordType에서 사용자가 편리하게 키보드를 사용하기위해 최적화 해주는 속성도있다.
비밀번호를 입력할 때 Text Field상에 비공개 처리하는 방법도 있다.
이번에는 Text Field에 Text를 입력하고 버튼을 누르면 Label이 입력받은 값으로 변겨되는 것을 구현해 보자.
이제 아웃렛과 액션의 연결은 보자마자 구분할 수 있는 실력이 된거같다!!
텍스트필드를 활용하는 아주 간단한 예제를 만들어 보았다.
사실 예전 로그인 화면 구현하기라는 Alert에 관한 포스팅에 활용해 본적이 있다.
Text Field에 입력된 값을 가져오는 코드는 필수이다.
바인딩 부분에서 text속성을 통해 입력된 값을 가져온다는 점을 기억하자!!
Text Field의 테두리 속성은 세가지가 있는데 기본으로 지정된 속성은
높이의 제한이 정해져있고 나머지 두 속성은 높이 조절이 가능하다.
그래서 프레임에 접근하는 값이 바껴지므로 잘 숙지하고 있어야 한다.
빈테두리의 속성은 커스터마이징을 할 때 주로 사용한다.
// viewDidLoad() 안에 코드로 border 변경
textField.borderStyle = .none
Overlay View
Clear Button은 말그대로 Text Field의 Text를 지워주는 버튼을 생성해준다.
이는 사용자의 편의성을 위한 속성이다.
위 네가지 상황에 맞게 설정해주면
이렇게 텍스트를 입력했을때나 아니면 항상 버튼이 생성되게 설정할 수 있다.
Clear when editing begins를 체크하면 편집모드가 시작될때 입력된 값이 있다면 자동으로 삭제된다.
삭제버튼 처럼 Text Field 내에 표시되는 뷰를 Overlay View라고 한다.
Text Field는 왼쪽 오른쪽에 각각 하나씩 Overlay View를 추가할 수 있다.
스토리보드에서는 삭제버튼의 표시방식만 설정이 가능하고 직접 Overlay View를 표시하려면 코드구현이 필요하다.
왼쪽에 버튼을 Overlay View로 추가하는 코드이다.
만약 버튼을 오른쪽으로 생성한다면 기존의 삭제버튼은 생성되지 않는다.
TextView
Text View는 사용자로부터 입력을 받을 때 사용하는 컨트롤이며 Multi-line에 최적화되어있다.
UIScroll 클래스를 상속받고있어 스크롤을을 지원하며 Text를 출력하는데도 자주 활용한다.
TextField와 공통된 속성이 많이 있고 Text View만의 속성도 가지고 있다.
Behavior 속성에서는 두가지 속성이 기본적으로 체크되어있다.
Editable이 체크되어있으면 편집이 가능하고, 출력용으로 제한할 때 체크를 해제하면 된다.
Selectable이 체크되어있으면 Text의 범위를 지정하고, 선택을 할 수 있다.
textView는 내부에 Text 여백을 설정할 수 도있다.
기본적으로 Top과 Bottom이 8포인트로 되어있고, left와 Right는 0포인트로 설정되어있다.
위에 코드처럼 속성을 통해 여백을 지정해 주면 된다.
Text View에는 이미지를 추가할 수도 있다.
NSTextAttachment를 통해 이미지와 데이터를 Text View에 추가할 수 있다.
-
NSTextAttachment를 인스턴스를 생성 후 이미즈를 할당해 준다.
-
이미지를 시작부분에 추가하기 위해 textStorage속성을 통해 내부 저장소로 접근한다.
-
insert(at:)메서드를 통해서 추가할 인덱스를 지정한다.
Text View는 Text에 포함된 다양한 형식의 문자를 인식할 수 있다.
Data Detectors에는 인식 가능한 속성들이 표시되어있다.
편집에 활성화 되어있는 상태에서는 사용할 수 없다.
위에서 보았던 Behavior의 Editable을 체크해제해야 한다.
Text View는 Data Detectors에서 설정한 항목들을 자동으로 인식해서
해당 항목을 클릭하면 가장 적합한 앱에서 표시해준다.
위에 실행한 앱에서는 Link, Phone Number, Address를 체크하고 실행한 것이다.
Comments