iOS ) 텍스트뷰 테두리 둥글게/버튼 둥글게

안녕하세요!! 

오늘은 두가지를 알려드릴겁니다.

먼저 텍스트뷰의 테두리를 둥글게 하는 법을 알려드릴게요.

먼저, 텍스트뷰에 테두리를 그리는 법은 

<TextField에서 줄바꿈/TextField높이 조정/TextView 테두리>

에서 소개했었어요.

뭐였는지 기억나시나요?! 

myTextView.layer.borderWidth = 1.0

myTextView.layer.borderColor = UIColor.black.cgColor

myTextView.backgroundColor = .yellow

위 코드를 viewDidLoad()에 넣어주면 테두리가 생겼었죠?

하지만 테두리가 둥글지 않고 직각입니다.

저는 잘 보이도록 배경 색상도 넣어주었어요. 

(지금 궁금해진건데, UIColor.black.cgColor은 cgColor를 안넣어주면 오류가나고, 

.yellow는 그냥 써줘도 되고, UIColor.yellow.cgColor는 또 오류가 나네요..

이게 뭔;;나중에 찾아봐야겠어요.)

자, 이제 테두리를 둥글게 만들어 봅시다!!

myTextView.layer.cornerRadius = 10

이 코드를 viewDidLoad()에 넣어주면!!

짠!!!!

테두리가 둥글게 되었습니다 ㅎㅎㅎㅎ

자, 이제 두번째!

버튼을 둥글게 만들어보겠습니다.

버튼이라 함은 

저렇게 네모죠?

하지만 둥근 버튼이 더 예쁘고, 어울릴 때가 있겠죠?

어떻게 동그라미 버튼을 만드냐!!

자, 위에서 텍스트뷰를 둥글게 만들었을 때,

myTextView.layer.cornerRadius = 10

위 코드를 넣어주었죠?

위 코드를 좀 더 수정하면 완전히 동그랗게 만들 수 있을 것 같지 않나요?

ㅎㅎㅎ

그렇습니다.

 myButton.layer.cornerRadius = 0.5 * myButton.bounds.size.width

위 코드를 viewDidLoad()에 넣어주면!

?...

뭐죠 이 잎사귀는?;

왜 이렇게 된지 아시나요?

저도 처음에 이게 왜이러지 하고 한참을 헤맸답니다 ㅠㅠ

자, 메인 스토리보드에 가보시면 현재 버튼이 이렇게 직사각형이죠?

그것도 너비가 높이보다 넓은거요!

 myButton.layer.cornerRadius = 0.5 * myButton.bounds.size.width

저희는 myButton.bounds.size.width의 값을 0.5에 곱해줬죠? 

현재 높이(height)보다 너비(width)가 더 크기 때문에 

연산한 결과는 height로 연산했을 때보다 더 크게 나올 거에요.

참고로 위의 텍스트뷰에 cornerRadius를 10,30,50,70,100으로 

줘 본 결과에요.

(왼쪽에서 오른쪽 순)

큰 값을 줄수록 더 둥그레지죠?

100을 줬을 때도 똑같이 잎사귀? 모양이 되네요.

제가 추측해보건데, 이 둥그레질려고하는 힘?에 비해 높이가 작기때문에 생기는 모양 같아요.

위의 잎사귀모양이 된 버튼의 높이를 너비와 한번 맞춰볼게요.

자, 이렇게 정사각형이 되도록 해주고

실행시켜보면!

짠!!

동그란 버튼이 되었죠?

 myButton.layer.cornerRadius = 0.5 * myButton.bounds.size.width

이렇게 어찌보면 복잡한 코드일 수도 있는데

myButton.bounds.size.width는 

그냥 제 버튼의 너비를 의미하는 거에요.

그러니까 만약 67같은 2로 나누어지지 않는 수가 아니라면

그냥 바로 값을 넣어줘도 동그랗게 된답니다.

위 텍스트뷰를 예로 들어볼까요?

너비가 240이죠? 

(당연히 동그랗게 만들고싶으면 높이도 같게 해줘야겠죠?)

지금 생각해보니 

높이와 너비를 같게 해주지 않으면 원이 나오지 않는게 당연한거네요.

원의 정의가 

중심으로부터 테두리?까지의 거리가 일정한 점들의 집합

이잖아요?

당연히 너비와 높이가 다르면 중심으로부터 테두리까지의 거리가

일정하지 않게 되어버리므로 

원모양이 되지 않는 것 같네요.

계속 하겠습니다.

너비가 240이니 반으로 나눈 120을 넣어주면 되겠네요?

 myButton.layer.cornerRadius = 120

짠!!

이렇게 예쁜 원이 만들어진 것을 볼 수 있습니다!!

도움이 되었으면 좋겠어요:)