4.3 그림을 그려보자

 

그럼 이걸 어떻게 하면 될까?

 

UIBezierPath에 대해서만 이야기 해볼거야

 

여기서는 객체지향 프로그래밍으로 하고 있으니까 그래

 

여기 path(경로)를 생성하고 뭔가를 그리기 위한 방법이 있어

 

삼각형을 한번 만들어 본다고 생각하자

 

일단 UIBezierPath 객체를 하나 생성하고

 

인자가 없는 초기화함수가 하나 있는데

 

우린 빈 path를 하나 만들꺼니까 이걸로 만들어 볼게

 

그 다음엔 이걸 움직여 볼거야

 

그래서 난 이것처럼 (80,50) 좌표로 옮길거야

 

화면 사이즈는 너비 160에 높이 250라고 보면 되겠지

 

그럼 (80,50)은 여기쯤 있겠지

 

그 다음에 여기 있는 위치로 선을 하나 그려줄거야

 

(140, 150)으로 말이지

 

원점(origin)은 좌상단이고 양의 값이 아래로 내려온다고 했었지

 

그리고 (10, 150)로 선 하나를 더 추가하는거야

 

마지막으로 path를 닫을건데 메소드는closePath( )야

 

이렇게 하면 첫 시작점으로 돌아가서 경로를 닫게 되겠지

 

짠! 삼각형 하나를 만들었어

 

여기 하나 놓친게 있는데

 

이걸 drawRect에 넣더라도 그림이 화면에 나타나지는 않아

 

drawRect에 이 코드 몇 줄을 넣어도 아무 일도 벌어지지 않아

 

여기까지 우리가 한 건 path를 생성한 것일 뿐이야

 

화면에 이대로 그리진 않았지

 

실제로 이대로 획을 긋거나 채우진 않은거야

 

그럼 어떻게 화면에 보여줄 수 있을까?

 

우선 획을 긋거나 채울 색상을 설정해야 해

 

내 삼각형이 빨간선에 초록색으로 채워지길 바란다면

 

초록색은 안을 채우는 색으로 설정하고 greenColor.setFill( )

 

빨간색을 획을 긋는 색으로 설정할게 redColor.setStroke( )

 

이것들을 UIColor에 보내고 있다는 것에 주목해

 

BezierPath에 보내지 않지

 

UIColor에 보내서 색을 설정하는게 좀 이상하긴 하지

 

뒤 슬라이드에서 UIColor, greenColor 같은 걸 알아볼거야

 

이렇게 해서 획(stoke)과 채우기(fill)를 설정했고

 

path의 선 너비를 3포인트로 설정했어

 

그리고 path.fill( ) 이라고 하면

 

초록색으로 채워진 게 보이지

 

바깥쪽으로 선이 없는 걸 봐

 

여기서 path.stroke( )를 해주면 바깥면에 선이 생기고

 

빨간색이면서 두께가 3인걸 볼 수 있을거야

 

이해하겠니?

 

뷰를 삼각형 뷰로 만드려면 이런 코드를 drawRect에 넣어줘

 

질문있니?

 

좋아

 

BezierPath로 좀 더 복잡한 걸 그릴 수도 있겠지

 

둥근 모서리의 사각형이나 원이나 그런 것들 말이야

 

특히 UIBezierPath의 다양한 초기화함수를 사용하면 되

 

물론 메소드로도 할 수 있어

 

그래서 UIBezierPath로 뭘 할 수 있는지 공부해야 할거야

 

할 수 있는게 많아

 

UIBezierPath에서 또 재밌는 것은

 

clipping path(경로를 깎아내기)로 설정할 수 있다는 거야

 

게임용 카드 모양을 생각해보자

 

게임용 카드의 모서리는 둥글지

 

코너부분이 날카롭지 않고 둥그렇게 깎여 있지

 

이걸 사용해서 UIBezierPath를 만들 수 있어

 

모서리가 둥근 사각형을 만들고 clipping path로 설정해

 

그리고 카드를 그리면 코너 부분은 그려지지 않게 될거야

 

둥근 모서리로 깎여나갈 거니까

 

addClip( )은 꽤 멋진 UIBezierPath 메소드야

 

UIBezierPath는 또 부딛힘을 감지하기도 해

 

한 점이 삼각형 안에 있는지 없는지를 알 수 있는거야

 

삼각형을 그린 UIBezierPath가 있을 때

 

그 안에 한 점이 있는지 없는 지를 감지할 수 있어

 

이것도 꽤 멋진 메소드지

 

게임 같은 것에서 사람이 사각형이 아닌

 

특이한 모양을 터치해야 할 때

 

감지하는 메소드를 사용하기 좋지

 

더 많은 것들이 있는데 그건 문서로 확인을 해보도록 해

 

UIColor로 넘어가보자

 

전 슬라이드에서 UIColor, greenColor 같은 걸 봤었는데

 

이게 어떤 종류의 메소드였지?

 

지난 수업에서 한 것 기억나니?

 

greenColor는 무슨 메소드일까?

 

타입 메소드일까 인스턴스 메소드일까?

 

이건 타입 메소드야

 

왜냐하면 우린 UIColor라고 하는 타입에 보내고 있으니까

 

UIColor는 클래스고 여기로 보내고 있지

 

그러니까 UIColor 클래스 안에는

 

static Class func greenColor( ) 라고 정의되어 있겠지

 

그리고 초록색처럼 잘 알려진 색을 선택하는 것 말고도

 

원하는 대로 색상을 생성할 수도 있어

 

RGB(Red,Green,Blue)에 대한 초기화 함수도 있고

 

HSB(Hue, Saturation,Brightness)도 있지

 

또 패턴으로 된 색을 만들수 도 있어

 

뭔가를 그릴 때 너희가 가진 이미지로 패턴을 만들어서

 

그 패턴으로 그려낼 수 있는거야

 

꽤 멋지지

 

뷰는 backgroundColor(배경색)를 가지고 있어

 

계산기 앱에서 버튼의 배경색을 설정할 때 본 적이 있지

 

스토리보드 우측의 attribute inspector 창에서

 

스크롤을 아래로 내렸던 걸 기억해봐

 

attribute inspector는 객체지향이고 상속받은 모든 걸 보여줘

 

버튼의 배경색을 설정하기 위해 UIView 단계까지 내려가야 했지

 

UIButton은 UIView를 상속받았으니까

 

UIColor에서 재밌는 것은 투명도를 설정할 수 있다는 거야

 

뒤가 비쳐 보이게 하는 것이지

 

alpha라는 건데

 

그림 그리는 영역에서 alpha라는 용어를 몇명이나 들어봤니?

 

절반이 채 안되는 군

 

alpha는 투명도를 표현하는 거야

 

alpha값이 0이면 완전 투명한 거야

 

밝은 빨강색이 있는지 alpha값이 0이면 아무것도 보이지 않겠지

 

완전히 투명해져서 다 비쳐 보이니까 가리는게 없겠지

 

alpha값이 1이면 완전 불투명한거야

 

완전 불투명한 것 뒤로 단 1픽셀도 보이지 않는 것을 말해

 

0과 1사이는 비쳐보일 수 있는 다양한 정도를 가리키겠지

 

이걸 alpha라고 해

 

색상을 만들수도 있는데

 

colorWithAlphaComponent 메시지를 보내는 노란색이 있어

 

이건 타입 메소드일까? 인스턴스 메소드일까?

 

타입 메소드라고 생각하는 사람 손들어 봐

 

인스턴스 메소드라고 생각하는 사람 손들어 봐

 

어느 쪽에도 손을 들지 않는군

 

인스턴스 메소드라고 손을 들었다면 그게 맞아

 

이건 인스턴스 메소드야

 

왜냐하면 우리는 색상의 인스턴스를 가져오기 위해

 

타입 메소드인 yellowColor를 사용했잖아

 

그리고 절반으로 투명한 노란색 버전을 얻으려고

 

이 인스턴스 메소드를 보냈으니까

 

그래서 이건 절반만큼 투명한 노란색이야

 

이걸로 뭔가를 그리면 뷰를 그려내도

 

뒤에 있는게 비쳐 보일거야

 

뒤에 있는 상위뷰(superView)같은 다른 뷰가 보일 수도 있겠지

 

뷰에서 투명도가 들어간 것을 그린다면

 

투명한 색상을 그린다면

 

뷰안에서 이 opaque 변수를 false로 설정해주어야 해

 

성능 최적화를 위해서 시스템은 뷰가 불투명할거라고 가정해

 

투명하게 그리지 않아

 

투명한 것들이 겹치게 되었을 때

 

무엇을 뒤에서 비쳐 보이게 할지 등을

 

시스템이 일일이 파악해야 한다고 생각해 봐

 

그런 합성 작업이 프로세서 파워와 메모리를 잡아먹어

 

그래서 일단 모든 것들은 불투명하다고 가정하니까

 

그렇게 잡아 먹을 필요도 없지

 

투명하게 그리려고 한다면

 

시스템에게 불투명하지 않다고 알려주기 위해

 

opaque를 false로 설정하도록 해

 

또 하나 재미있는 것은 전체 뷰를 투명하게 만들수도 있어

 

뷰 자체의 alpha 프로퍼티를 설정해주면 되

 

전체 뷰를 그린다면 삼각형을 그린다고 해보면

 

투명도를 0.5로 설정하면 절반으로 투명한 삼각형이 되는 거야

 

불투명하게 삼각형을 그렸더라도

 

추후에 절반으로 투명한 삼각형을 갖게 되는거지

 

alpha값을 0.5로 설정해주었으니깐

 

alpha를 사용하면

 

뷰를 점차 희미해지게 하는 것 같은 효과를 주는데 정말 유용해

 

가끔은 시간이 흐르면서 뷰가 점점 희미해지도록 하고 싶잖아

 

움직임(animate)을 줄 때 말이지

 

alpha는 움직임을 줄 수 있는 것들 중 하나이지

 

animating에 대해선 몇 주 뒤에 이야기 해볼거야

 

어쨌든 alpha는 그런 것들을 하기에 훌륭한 녀석이야

 

그럼 뷰의 투명도와 투명하게 그렸을 때

 

어떻게 작동하는지에 대해서 이야기 해보자

 

불투명한 뷰가 없고 투명하게 그린다고 했을 때

 

모든 하위뷰를 보여주는 하위뷰(subView)의 리스트는

 

하위뷰 리스트의 첫번째 뷰를 맨 뒤로 보내는 순서로 되어 있어

 

그 다음게 그 앞으로 오는 식이야

 

이런 순서로 비쳐 보일거야

 

이해했니?

 

그러니까 하위뷰의 리스트 순서가 중요한거야

 

하위뷰의 리스트는 하위뷰를 추가해가면서 만들어지는데

 

addSubView를 할 때 앞에 놓여지게 되는거야

 

insertSubViewAt이라는 또다른 메소드가 있는데

 

너가 원하는 위치에 넣도록 해줘

 

하위뷰를 뒤에 넣고 싶을 때 insertSubViewA: 0 이라고 하면

 

뒤에 넣어 줄거야

 

하위뷰간의 순서가 중요하다는 걸 알면 되

 

뷰를 완전히 숨길 수도 있는데

 

hidden을 true라고 설정하면 되

 

hidden을 true라고 하면 어떠한 터치 이벤트로 받지 않아

 

그린게 나타나지도 않지

 

뷰 계층에는 여전히 들어가 있지만 마치 없는 듯이 표현 되

 

이런게 왜 필요할까?

 

어떤 버튼이 특정 상태일 때만 보이는 뷰가 있을지도 모르지

 

거기에 뷰를 두고 hidden으로 두었다가(숨겼다가)

 

버튼이 어느 상태가 되었을 때 숨긴 걸 드러내는 거야

 

사실 이런 걸 할 때는 alpha로 드러내는 걸 표현할거야

 

당황스럽게 툭 하고 나오는게 아니라 스르륵 나타나도록 말야

 

그래도 우선은 뷰를 숨기기위해서 hidden을 사용하긴 할거야

 

예를 들어 뷰가 보이기 전까진

 

터치 이벤트를 받지 않게 하고 싶을 때가 있을테니까