4. Code 와의 연결

 
다른 프로그램/언어들도 그렇듯이 우리가 배치한 요소들(이미지, 텍스트레이블, 버튼)들을
제어하고 변화를 주기위해서 이들을 담기위한 변수(?)를 만들어 줍니다.

위의 UI 요소들은 Interface builder (이하 IB라고 부르겠습니다)를 사용하지 않고 순수히 코딩으로만 가능하지만,
우리는 IB를 사용하여 만들었으므로, IB에서 실제 코드와 연결될때 매칭될 변수 정보를 만들어주어야 합니다.

인터페이스 빌더에서 화면의 흰바탕(MainView)를 클릭해서 Inspector 창에 Main View 의 identity 가 나타나도록
합니다. (다른 UI요소를 클릭하면 해당 요소의 identity 가 나오므로 주의)


Class Outlets 에서 + 를 눌러 다음과 같이 추가합니다. 버튼세개와 sadi 로고 이미지, 텍스트레이블에 대한
변수들 입니다. 따라서 이름은 마음대로 하셔도 됩니다. 단 Type 은 int, char, float 와 같은 변수의 타입이므로
알맞게 해당 타입을 적어주셔야 합니다.



다음에는 Class Actions 에서 다음과같이 각 버튼이 눌렸을때 불려질 함수명를 적어줍니다.
역시 이름은 마음대로 하셔도 됩니다. 타입은 id로 놔둡니다.



최종적으로 다음과 같은 화면입니다.



이제는 우리가 작성한 변수들을 각 UI요소들과 연결 해주면 됩니다.
두번째 탭 (Connections)를 클릭해보면 다음과 같이 우리가 작성한 변수와 함수(Action)들이 목록에 나타나 있습니다.


각 변수의 우측에 동그라미가 달려있는데, 이것을 클릭한채로 드래그 하셔서 해당 UI요소에 연결해 줍니다.


Action의 경우도 해당 버튼에 연결해주면 되는데, 이때 버튼의 어떤 경우에 불리게 할 것인지 메뉴가 뜹니다.
우리는 터치가 되었을때 Action 이불리도록 할 것이므로 Touch Down 을 선택해 줍니다.



모두 연결하면 다음과 같습니다.



이제 UI요소 배치, 변수 작성, 1:1 연결까지 다 마쳤으므로 실제 코드 생성을 하면 됩니다.
File - Save 하셔서 한번 저장을 일단 해주시고,
File - Write Class Files 를 눌러 실제 클래스파일을 생성합니다.



다음과 같이 우리가 이름지었던 MainView 라는 이름으로 저장이 됩니다.
(혹시 UIWindow 나 엉뚱한 이름이 나오면 화면에서 흰바탕 MainView 가 아닌 다른 요소가 선택된
상태로 Write Class 파일을 눌러서 그렇습니다.)



다음과 같은 물음이 나오는데, 물론 프로젝트에 파일을 추가할 것이므로 체크를 하고 Add 합니다.


이제 Interface Builder 에서 할일은 끝났습니다. 종료하시고 Xcode 로 갑니다.
다음과 같이 생성된 MainView.h 와 MainView.m 파일이 잘 들어와 있습니다.




5. Code 작성

우선 MainView.h 파일을 보면 다음과같이 되어있습니다.
IB에서 작성했던 변수들과 함수명들이 잘 들어와있습니다.
단, 우리가 UIView 를 MainView 로 이름을 바꾸었으므로, UIView 를 상속하도록 수정을 해야합니다.



MainView : 다음의 주석부분을 지우고 다음과 같이 UIView 로 고쳐줍니다.



이제 MainView.m 파일로 가보면 다음과 같이 우리가 정의해놓은, 각 버튼이 눌렸을때
불릴 함수들이 있습니다. 이제 기능을 구현해 넣으면 되겠죠.



다음과 같이 각 버튼이 눌렸을때 텍스트 label 에 텍스트를 표시하도록 합니다.
labelText.text 와 같은 모양은 플래시의 액션스크립트나 프로세싱에서도
많이 보아오셨던 것이라 쉽게 이해하실 수 있을겁니다.
특이한 점이라면, 문자열앞에 골벵이 @를 붙여야 합니다. (문서들 참조)



이제 Build and Go를 눌러 실행해 봅니다.



각 버튼을 누르면 해당 텍스트가 잘 표시 됩니다.

마지막으로 터치기능을 추가해 sadi 로고를 손가락으로 움직여 보겠습니다.
Xcode 의 Help 메뉴에서 Documentation 을 선택합니다.



우측 상단의 검색창에서 Touches 라고 쳐보면 다음과같이 터치관련 API 가 여러개 나옵니다.


우리는 터치된 손가락을 움직일때 이미지가 따라서 움직이게 할 것이므로 touchesMoved 를 선택합니다.
선택해서 나온 설명에서 바로 보이는 함수명
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
을 그대로 긁어서 복사합니다.


그리고 Xcode 로가서 우리의 MainView.m 파일에 다음과 같이 붙여넣기 한후
괄호를 열고 닫아서 함수로 만들어 줍니다. { }
즉 터치 이벤트가 일어나면 시스템(iPhone OS)에서 이 함수를 불러주는 것이므로, 우리가 이 함수안에
무언가 기능을 만들어 놓으면, 터치가 될때마다 그 기능이 실행이 되겠지요.



위의 touchesMoved 함수안에 다음과 같이 내용을 구현합니다. (복사해서 붙여넣으세요)
단, imageSADI 는 자신이 정한 sadi logo 이미지에 대한 변수이름으로 바꿔주셔야겠죠?

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

    for (UITouch *touch in touches) {
        if (CGRectContainsPoint([imageSADI frame], [touch locationInView:self])) {
            imageSADI.center = [touch locationInView:self];
        }
    }
}

내용을 보면 touchesMoved라는 함수가 불려질때 touches 라는 오브젝트 안에 터치에 대한
좌표등의 정보가 들어있습니다. 이때 for 문으로 각 touch 정보들을 꺼내서
우리는 imageSADI 의 frame (이미지 크기라고 이해하면 됩니다) 안에 touch의 좌표가
들어 있는가를 판단해서 있다면 터치가 이미지 크기 안에서 이루어 진 것이므로
이미지의 center 좌표를 터치좌표로 대치한다는 내용입니다.

이것이 손가락이 움직일때 반복적으로 불리고 이미지좌표가 터치좌표로 덮어써지므로
드래그가 되는것 처럼 보이겠죠.



이미지를 터치해서 움직여보면 잘 따라 다닙니다.

*아이콘 파일 지정
Resources 폴더에 보시면 Info.plist 라는 파일이 있습니다. 여기서 Icon file 의 값을 icon.png 로 주시면 됩니다.



이외에 메모리 관리를 위한 처리를 해주어야 하는 부분이 추가적으로 있습니다만
일단은 여기까지로 마무리 하도록 하겠습니다.

다른 UI요소 (Slider)를 추가하고 이미지의 알파값을 바꿔보는 것 까지 했었습니다만,
그부분은 다음시간에 한번 다시 간단하게 같이 해보도록 하겠습니다.

수고하셨습니다 ^^

 




Posted by 알 수 없는 사용자