Set the value of this property totrueto enable the control orfalseto disable it. An enabled control is capable of responding to user interactions, whereas a disabled control ignores touch events and may draw itself differently. Setting this property tofalseadds thedisabledflag to the control’sstatebitmask; enabling the control again removes that flag.
The default value of this property istruefor a newly created control. You can set a control’s initial enabled state in your storyboard file.
UIButton에 대해 설정할 수 있는데 엄청 많지만
이렇게 버튼은 세개만 다룰겁니다.
우선 startButton에 tag를 지정할겁니다
태그는 일종의 이름으로서 클래스내부에서 startButton이라는 버튼의 주민등록번호같은 역할을합니다
이렇게 태그를 넣어주는이유는 MainVC라는 클래스에서 사용되는 버튼들이 눌려졌을때에대한 동작을 하나의 함수로 몰아주려고하는데
이따 하나의 함수에서 여러개의 버튼을 구분하기위한 방법중하나입니다.
물론 이 버튼에 쓰여있는(버튼 라벨)글이나 여러가지방법으로 구분이 가능할수도 있겟습니다만
저는 태그를 통해 하려고해요
소스를 다음과같이 수정해줍시다
viewDidLoad()의 주석을 지우고 그자리에
startButton.tag = 10
을 넣어주세요. ( Tag의 설명에 있듯이 태그값은 정수만 가능합니다 )
overridefuncviewDidLoad() {
super.viewDidLoad()
startButton.tag = 10
}
태그는 지정해주었고 이제 startButton이 눌러졌을때의 기능을 만들겁니다
viewDidLoad() 함수가 끝나는 '}' 다음에
다음과같이 적어주세요
@objc func buttonAction(_ sender:UIButton) {
print(sender.tag)
}
@objc 라는의미는 스위프트 이전에 iOS앱만드는데 사용했던언어인 objective C에서 사용된 라이브러리
혹은 각종 클래스에서 사용할 수 있게 만드는 마법의 키워드입니다
이 키워드로 인해 swift와 objective c는 좋은 사이를 유지하면서 발전가능해집니다
위에서 스토리보드의 오브젝트들과 코드를 연결해주면서 자동으로 연결되었던 라인들을 보시면 짐작하시겠지만
스위프트4에서는 기본적으로
상수or변수 이름:타입 = 값
형태로 변수를 선언합니다
이 형태는 함수의 파라미터에서도 그대로 사용됩니다.
buttonAction이라는 함수는 sender라는 이름의 파라미터를 가지고있는데
이는 변하지않는 상수 형태이며 UIButton이라는 타입인 파라미터라고 쓴겁니다.
sender 앞에 ' _ ' 라고 적은것은
외부에서 함수를 부를때 buttonAction( 값 ) 형태로, 파라미터이름을 표시하기 싫을때 _ 라고 표시합니다.
이를 _ 대신 다른, 예를 들어 A라 적었으면 buttonAction(A: 값) 형태로 호출을 해야합니다.
외부에서 보여지는 파라미터의 닉네임을 정해줄수 있는거에요
buttonAction은 꼭 파라미터를 _ sender:UIButton 으로 줘주세요 ( 여기 프로젝트에서 한정입니다 ^^)
다른 언어 특히 파이썬을 해보신분은 buttonAction함수안에 있는 내용이 상당히 익숙할건데
그래서 startButton에 addTarget의 가장첫파라미터는 target: 값 이라 적지않고
바로 self라는 값을 넣어준겁니다.
이 타겟의 파라미터에 대한 설명을 애플은 아래와같이 문서에 적어놨습니다.
target The target object—that is, the object whose action method is called. If you specify nil, UIKit searches the responder chain for an object that responds to the specified action message and delivers the message to that object.
요약해 호출되는 객체를 지정하는 것이라는데 저는 아직 self 밖에 해보질않아 다른것을 지정해줄때도 있는것인지 모르겠습니다!
혹시 이글을 보시는분들중에 아시는분계시다면 꼭 공유해주셨으면 좋겠네요
그렇게 다음 action은 지정해줄 함수를 말하는데
#selector가 objective c로 만들어진것인지
액션메소드가 꼭 @objc가 붙어야 인식이됩니다.
그다음은 for 라는 파라미터는 버튼의 상태, 어떤 이벤트가 발생했을때 이 액션메소드(buttonAction)가 실행되는가인데
다른 UIControl를 상속하는 오브젝트들의 이벤트까지 같이 들어있기에 꽤 많이 있습니다
아래의 사진과같은곳이죠. 정렬과 크기에 대한 내용을 담고있어서 그런가 아이콘부터가 자모양이죠?
위 사진은 Label을 선택한후 오른쪽영역인 익스펙터즈화면에서 6번째아이콘인 사이즈 인스펙터화면입니다
x와 y의 좌표부터 사이즈 그리고 다룰 레이어아웃에 관한 정보를 보여주고 추가 수정,삭제를 할수 있는 공간입니다.
어제까지의 프로젝트를 그대로 시뮬레이터만 바꿔서 실행해봅시다!
지원할수 있는 가장 작은 사이즈를 iphone xe라 하면 시뮬레이터를 iphone xe로 변경하고 실행해보세요
이런...
저희가 원래 원했던 모양이 아닙니다.
오늘은 이 부분을 해결할것이고, 이에대한 해결이 포스트위에서 말씀드린 사이즈 인스펙터창을 확인하면서 진행될겁니다.
우선 가장위에있는 라벨먼저 고쳐보죠.
라벨을 잘보시면 원래 의도했던 소수점 내용이 화면에 가려서 안보여요
라벨자체도 가운데에있는게 아니라 치우쳐있군요
처음에 라벨을 사이즈및 위치를 선정할때 아이폰11 사이즈를 보면서 했기에 사실 앞쪽(왼쪽) 여백에 대한 문제는 아이폰11사이즈의 화면의 시작점입니다
우리는 화면크기가 바뀌어도 일정한 비율을 유지했으면 좋겠는데
이를 지정하는게 바로 앵커입니다
앵커는 다른 UI쪽을 다루는 내용을 해보신분들은 아시겠지만 UI를 다루지않았으면 갑자기 무슨이야기야 라고 하실수 있으니 별로 좋은 단어는 아니겠네요.
앞으로 이를 Auto Layout, 이라 할것이고 이를위해 추가해야할 애들을 Constraint라 할겁니다.
물론 이를 코드로 다루다보면 앵커라는 단어를 쓰지만 이 튜토리얼에서는 코드로 오토레이아웃을 다루는일을 하지않을겁니다.
이런 단어를 처음 듣는 분은 그냥 아 이런게 있구나 정도로만 생각해두시고 스토리보드창에서 손쉽게 마우스 몇번 클릭으로 추가할 수 있다는것만큼은 기억해주세요
라벨을 스토리보드(Main.storyboard를 선택하고 중앙에 위치한 화면)에서 선택하고 아래의 사진에있는 버튼을 눌러주세요
중앙영역 하단에 "├ ⎕ ┤" 라고적힌 버튼 부분입니다
이 버튼을 누르면 사지너럼 말풍선이 뜨는데 여기에서 상단(앞으로는 탑이라 부르겠습니다) 좌측(앞으로는 리딩이라...) 우측( ... 트레일링 ...) 하단(... 바텀 ...)의 띄여지는 위치와 높이(Height) 너비(Width)를 고정하거나 가로세로에 대한 비율을 고정(Aspect Ratio) 시키는등의 제약을 걸수 있습니다
Contraint(제약,제한,통제)의 단어뜻처럼말이죠
그러면 아래 사진처럼 라벨에 대한 Constraint를 걸어주세요
조금 특이하게 탑과 바텀 그리고 높이만 지정해줬어요 그리고 하단의 Add 3 Constraints 버튼을 눌러주시면됩니다
하단의 사진을 보면
Height Equals: 119.5
Bottom Space to: Table View
Equals: 16
Align Top to: Safe Area
Equals: 16
이 추가가 된것을 확인할 수 있습니다 방금 추가한거에요
추가로 이야기하자면 버튼의 Add라는 이름답게 만약 창이 닫아지고 다시 같은 탑이나 바텀같은 내역을 지정해주면 그것또한 추가가되지 변경이 되지않습니다 변경하시려면 아래사진의 사이즈인스펙터에서 변경할 내역을 더블클릭하셔서 수정하시면되요
Height Equals: 119.5 를 더블클릭해서 수정모드로 들어가는 화면은 바로 아래화면입니다
First Item 과 Relation 그리고 Constraint 변경으로 이 높이제약조건을 변경할수 있어요
Priority는 이 제약조건이 다른 제약조건에의해 지켜지지못할거같을때, 혹은 변경이되어야할때 누구를 우선순위로 잡을것이냐를 지정해주는건데 이 내용은 다루지 않겠습니다.
위의 높이 제약조건 변경화면은 높이이기에 Second Item항목이 없는데
위치(탑,바텀,리딩,트레일링)제약조건일 경우 A가 B로부터 16떨어져야한다 라는같은 지정을위해 Second ITEM 항목이 추가됩니다
라벨에대한 제약조건을 더욱줘봅시다.
지금은 탑, 높이 바텀만 줬으니 리딩,트레일링을 줘야할것같지만 저는 화면이 어찌됐던 이 내용이 가운데에 있었으면 좋겠습니다
이럴때 추가하는게 아래 사진에 나와있는 Alignment Constraint 입니다 가운데 정렬을 원하므로 Horizontal in Container를 체크하고 Add를 눌러줍시다
Horizontal과 Vertical은 영단어 그대로 가로이냐 세로이냐입니다 그외 애들은 직접 예를 보여드려야 이해가 되실듯하지만 이 튜토리얼에서는 다루지않기에 넘어갑니다.
그렇게 라벨에 들어갈 제약조건(constraint)를 다 추가해줬지만 스토리보드화면에서는 빨간색으로 테두리와 스토리보드 영역의 좌측상단에는 빨간불(위 사진의 하얀색 실선테두리 상자) 이 들어와있습니다.
이를 눌러보면 어떤 제약조건이 문제가 생겼는지 알수 있습니다 한번 들어가보세요
내용을 보면 라벨 아래에있는 애들에 대한 제약조건이 없어서 발생하는 문제입니다.
여기에있는 각 항목의 빨간불을 눌러 이 xcode가 제안하는 Constraint를 넣거나 삭제하거나 수정할 수 있지만 이는 권장하지 않습니다.
그럼 테이블뷰와 아래 버튼들에 대한 제약조건을 마져 걸어봅시다.
테이블뷰에 넣을 제약조건은 다음과같습니다
잘 보시면 탑에 대한 제약조건을 걸지않았는데 이는 우측영역 사이즈인스펙터에 보면 이 테이블뷰위에 있을애인 라벨이 바텀 제약조건으로 이미 이 테이블뷰의 탑 제약조건이 추가가 되어있는걸(Top Space to: 00:00.0) 확인할 수 있고 이와 겹쳐지지않게 탑 제약조건은 추가하지 않는것입니다.
추가하고나면 90높이로 변경되어 원래 원하던 모양이 아님을 알 수 있습니다. 이는 사실 살짝 변경을 해주기 위해 우선적으로 추가해준거에요.
위 사진에 있는 Height Equals: 90 을 더블클릭해 수정페이지로 들어가줍시다.
그리고 Relation의 Equal 부분을 아래사진처럼 Greater Than or Equal로 변경해줍시다
이 Relation의 내용을 그대로 읽어보면 감이 잡히실건데
다른 제약조건이나 화면크기 변화로 인해 크기가 최소 90이상은 유지해주세요라고 제약을 건겁니다.
이 90은 나중에 추가해줄 랩타임 기록의 한줄정도 표시해줄 사이즈에요.
그래서 화면이 최소로 작아지면서 위(라벨) 아래(버튼)의 위치에 눌려도 최소 90은 보장해줘라! 라고 제약조건을 건겁니다.
A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.
텍스트를 포함하고, 뭐 각종 속성들을 넣어 제어할 수 있다고하네요
라벨이라는 이름답게 글씨를 표시해주는애 입니다. Text를 표시해주는애인데
이 앱에서는 다루지않을 다른 텍스트를 표시해주는 녀석들도 있습니다.
TableView는 다음에 설명을 할것이고 버튼을 이야기하자면
누구나 다 예상하시듯이 버튼입니다
애플은 이 버튼 오브젝트를 아래와같이 설명해주고 있어요
You can set the title, image, and other appearance properties of a button. In addition, you can specify a different appearance for each button state.
제목, 이미지 기타 속성을 넣고 각 상태따라 다른게 설정을 해줄수있다!
이 상태가 매우 중요합니다.
각 오브젝트들에 대해 자세히 다루지는 않을테니 더 궁굼하신분은 애플디펠로퍼의 도큐먼트 페이지들을 봐주세요
그럼
우선은 라벨을 넣어서 실행해보죠
프로젝트화면의 좌측의 프로젝트 네비게이션에서 Main.storyboard를 누르시면 가운데 화면이 마치 아이폰 시뮬레이터같은 모양으로 변경됩니다.
이 하얀 녀석을 마우스로 클릭하면 네비게이션 옆에 있는, Structure Area의 View가 선택되었다고 하일라이트가 될겁니다
앞으로 이 뷰 안에 표시할애들을 넣어줄거에요.
뷰안에는 이미 Safe Area가 속해있는데
이는 실제적으로 있는 것이 아니라 실제 화면만 보여질곳, 상단 스테이터스바와 하단 홈바를 제외하고 있는 가운데에 남겨진 영역에 대해 알려주기위한 일종의 가이드라인입니다
앞으로 이 가이드 라인에 대한 도움을 많이 받을거에요
위 사진의 보라색 실선부분, + 버튼 또는 키보드로 command + shift + L 을 누르면 아래와같은 창이 뜹니다
위에 사진처럼 우측에 설명칸이 나와 있을 수도 있고 없을수 도 있습니다.
설명창을 펼치거나 혹은 닫고싶으시면 팝업창 상단의 검색바 옆의 두번째 창모양 버튼을 누르시면되요
이제 창에서 보이는 Label을 아까 선택했던 뷰로 드래그 하고 드롭 해주세요
그럼 아래와 같이 드롭한 장소에 라벨이 하나 생겼을겁니다.
그리고 이 라벨을 더블클릭하면 이 텍스트를 수정할 수 있게됩니다!
아래 사진처럼요
그리고 옆의
인스펙터영역이 아래와 같이 5번째가 선택되어 딱봐도 이 라벨에 대한 설정을 변경 할 수 있는 창이구나! 라고 알만하게 여러 속성을이 있습니다
이 어트리뷰트 인스펙터창에서 텍스트를 수정하거나, 색상, 정렬 크기 등등 많은걸 수정 할 수 있어요
스토리보드를 통해 작업을하면 기본적으로 이런식으로 뷰에 필요한 오브젝트를 넣고 설정을해주는 식으로 화면을 구성하게 됩니다.
이제 아까 라벨을 추가한것처럼
라이브러리버튼(+버튼)을 눌러서 저희가 사용하려하는
테이블뷰, 버튼들을 배치해줍시다
추가로 넣으려는 오브젝트들은 아래와같습니다
항목을 잘 선택하셔서 드래그 앤 드롭해주세요
아래와같이요!
그리고 이제
각각의 오브젝트들을 선택하시면 각 사각형이 크기가 수정가능하게 변하는데 이를 잘 조절하여 최대한 만드려는 앱과 비슷하게 만들어줍시다.
모달을 띄우면 기존엔 풀스크린으로 깔끔히 보이던게 ios13에서는 상단에 이상한 모양의 카드? 형식처럼 모달이 표시된다.
멘붕상태에 빠지고 구글신님께 문의를해보니
"""
iOS 13.0부터 iOS에서는 UIModalPresentationAutomatic이 기본값이고, 이전 버전에서는 UIModalPresentationFullScreen입니다.
기본적으로 UIViewController는 UIModalPresentationAutomatic을 UIModalPresentationPageSheet로 해석하지만 다른 시스템 제공보기 컨트롤러는 UIModalPresentationAutomatic을 다른 구체적인 프리젠 테이션 스타일로 해석 할 수 있습니다.
