[UIKit] 코드리뷰의 하루,, (lineBreakStrategy, lineBreakMode, isUserInteractionEnabled(), isOpaque(), scrollToRow(), needsDisplayOnBoundsChange)

 

오늘은 집중이 잘 안되는 날이었다. 그래서 새로운 뷰를 짜는 것보다는 올라와 있는 PR에 대해 코드리뷰하느라 바빴던 날이다.
코드리뷰가 밀리기도 했고,,,, 우리팀원들의 코드는 참 배울게 많다!👍

 

도대체 코드리뷰를 얼마나하길래 몇시간이 걸려?

이만큼...의 코드리뷰를 했다면 믿겠는가  으하하하핳아ㅡ하하핳하ㅏㅎ하ㅏ하 재밌따!
그래도 코드리뷰를 대충 가져갈수는 절대 never naver 안되니까,,, 최대한 정성들여서 했다. 코드리뷰를 하면 할 수록, 팀원들의 컨벤션이 점점 맞아가고, 한명이 짠 코드처럼 될 수 있을 것 같았다.

지금 시작한지 일주일 됐는데 벌써 이렇게 맞춰지고 있으니! 
결국 잘하는 사람 한 명의 코드를 위주로 따르게 되는 거 같긴하다. 
나중엔 내가 리드해볼 수 있었으면 좋겠따!

부가적인 이야기로,, 내가 우리팀원 갓듀의 코드를 보고 남긴 코멘트,, 

제발 이번 플젝 끝날때는 두선생님 코드에서도 p1, p2 할만큼 중요한 리뷰를 남길 수 있길!

자 이제 그만 떠들고 배운거 차근차근 적어보자.

 

---

 

내가 오늘 주로 리뷰한 PR은 사람 터치 이벤트에 따라서 뷰가 이동하는 기능이라던지, 스크롤이 자동으로 컨트롤되는 기능 등에 대해서 리뷰했다. 그래서 코드를 읽으면서 하나하나 몰랐던것을 찾아보았고, 그와 관련된 코드들이 아래 많을 것이다! (아닌 것도 있음 ~.~)

 

🟣 UILabel에서 lineBreakStrategy와 lineBreakMode의 차이가 있을까?

오늘 팀원의 코드에서 UILabel에 대한 속성값으로 두 가지를 봤다. 두가지 모두 줄이 넘어갈 때 어떻게 break 하냐에 중점을 두는 코드인것 같은데, 두개의 구체적인 역할과 차이점이 궁금해졌다.

(근데 결국 공식문서에도 나와있지 않기 때문에,, 어떤 차이가 있는지 발견하지 못했습니다,, 그냥 차이가 있다~~ 이렇게만 나와있어 완전 불친절해.... 경험만이 살길... 경험을 통해 배우게된다면, 수정하러 오겠습니다 ㅠㅠ)

lineBreakStrategy

🍎 단락을 배치하면서 줄을 끊는 전략.
The strategy for breaking lines while laying out paragraphs.  (공식문서)

line break mode 와 다르다고 나와있따. ..

'컨테이너와 맞지 않는 text의 줄에 대해서 조절하는 lineBreakMode'와는 다르다 

이게 무슨말이지 ;;

 

 

어쨋든 이 메서드는, UILabel 내부에서 줄이 끊기게 될 때 어떻게 끊기게 할 건지에 대한 전략을 옵션으로 줄 수 있다. 특히 한글은 "이렇" "게" 끊기게 되면 문장이 되게 어색해 지는데, 이떄 lineBreakStrategy에 있는 .hangulPriority를 사용해서 줄바꿈을 이쁘게 할 수 있다.

하기 전

하고난 후

if #available(iOS 14.0, *) {
    paragraphStyle.lineBreakStrategy = .hangulWordPriority
}

이렇게 한글 줄바꿈을 적용할 수 있다. 귀여워 hangul,,,, 
근데 이 한글 줄바꿈 기능은 ios 14이상에서만 가능하기때문에 저렇게 분기처리를 해줘야한다. 

그리고 아래 블로그를 보면, ios 14 이상에서는 딱히 처리를 해주지 않아도 한글도 잘 분리되서 나온다고 한다. 상황에 맞게, 적용이 안될때 사용해보자!!

 

lineBreakMode

🍎 컨테이너에 맞지 않는 단락의 줄 바꿈 모드입니다.
🍎 레이블의 텍스트를 줄 바꿈하고 자르는 기술이다.
The mode for breaking lines in the paragraph that don’t fit within a container. (공식문서)
The technique for wrapping and truncating the label’s text. (두번 째 공식문서, 왜 두개양?? )

뭐야 그래서 lineBreakStrategy와 뭐가달라;; 하고 있는데 이것도 마찬가지로 명확하게 다르다고 큼지막하게 나와있다.

왜인지 모르겠지만, 공식문서에 두 가지 버젼의 discussion 이 있다. ;; 

https://developer.apple.com/documentation/uikit/nsparagraphstyle/1529937-linebreakmode

Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uilabel/1620525-linebreakmode

Apple Developer Documentation

두 개다 "NSLineBreakMode" 타입이다. 동일한것인듯? 두개의 해석을 조합해서 lineBreakStrategy와 뭐가다른지 살펴보자.

• 이 속성은 말줄임표 (...) 로 말을 줄이거나, text를 잘랐을때와 같이 container에 맞지 않는, 레이아웃이 벗어나는 text들에 대해서 제어하는 프로퍼티다.
• 이것은 '시스템이 단락 내부에서 줄바꿈을 제어하는 lineBreakStrategy'와는 다르다.
• 스타일이 지정된 텍스트를 사용하는 경우, 새 값을 할당해주면 전체 문자열에 대해서 줄바꿈 모드가 적용된다. 

 

그래서 lineBreakStrategy와 lineBreakMode의 차이점은?

음 사실, 두개의 차이점에 대해서 자세하게 알지 못하겠다. 그래서 그냥 그 내부에 어떤 속성이 있는지에 따라서 필요에 맞게 사용하면 되지 않을까?

우선 lineBreakStrategy에는 아래와 같은 속성이 있다. hangulWordPriority가 신선했고, 한국인이 타겟인 앱을 만들때 유용하게 사용될 것 같다.

 

다음은 lineBreakMode에서 자주 사용되는 속성들이다. 

 

뭔가 이렇게 속성들을 비교해보니까, 어떤 상황에서 쓰이는지는 대충 알겠다. 적절하게 사용하면될것 같다. 그리고 차이점도 조금 보인다. lineBreakStrategy는 대부분 '단락'을 기준으로 줄바꿈 기준, 단어를 기준으로 줄을 바꾸는 기준을 세운다. 근데 lineBreakMode의 속성들을 보면 컨테이너를 기준으로 표시되고 안되고, 넘어가고 안넘어가고 이런것에 대한 기준을 정하는 것 같다. 

 

컨테이너가 뭘까? 인터넷에 뭘 쳐야하는지 몰겟지만,, 일단 문맥상 UILabel, 그니까 그 속성을 담고있는 무언가(뷰)를 의미하는 것 같다. 

 

🟣 scrollToRow() 란

인덱스 경로가 식별하는 행이 특정 위치에 있을 때까지 tableView를 스크롤 한다.

https://developer.apple.com/documentation/uikit/uitableview/1614997-scrolltorow

Apple Developer Documentation

 

공식문서는 왜 말이 어려울까 ;;; 
UITableView의 scrollToRow() 메서드는 '특정 셀로 스크롤 시키기'위한 메서드이다. 특정 상황에서 특정 테이블뷰의 위치로 이동하게하는것!!

원하는 위치의 indexPath를 지정해서  scrollToRow 기능을 사용할 수 있다. 파라미터는 아래처럼 세 가지로 받는다. at에다가 indexPath를 입력해서 특정 위치를지정해주고, at은 특정위치의 어느 포지션으로 갈지 적어주면 된다. 그리고 animated 여부에 따라 스크롤 애니메이션도 표현할 수 있따. animation : false 라면, 애니메이션 없이 툭. 하고 그 위치로 이동하게 된다. 

self.tableView.scrollToRow(at: endIndex, at: .bottom, animated: true)

 

참고자료 https://0urtrees.tistory.com/54

 

🟣 isUserInteractionEnabled() 란

유저의 이벤트가 event queue로부터 무시되고 삭제됐는지를 판단하는 bool 값

https://developer.apple.com/documentation/uikit/uiview/1622577-isuserinteractionenabled

Apple Developer Documentation

 

즉, UserInteractionEnabled == false를 하면, view에 대한 touch, press, keyboard, focus event 등 모든 것들이 이벤트 대기행렬 (queue)에서 삭제되고 무시된다. 반대로 true 이면, 모든 이벤트는 정상적으로 뷰에 전달된다.  default는 true이기 때문에 false로 설정해주지 않는 이상 작성하지 않아도 된다.

하지만 매번 항상 always always true 값을 갖는건 아니다.
animation을 적용하는 동안에는 이 프로퍼티의 값이 false / true 상관없이 모든 이벤트 처리가 disable된다고 한다. 애니메이션이 진행되고 있을때 어떠한 터치이벤트가 동작하지 않는 과정이 있었을 것인데, 그런 경우가 여기에 해당한다. 

나는 애니메이션이 진행되고 있을 때도 이벤트를 동작하게 하고 싶으면, 애니메이션 옵션으로 allowUserInteraction을 주면 된다고 한다.

참고자료 https://www.zehye.kr/ios/2021/08/12/iOS_isUserInteractionEnabled/

 

🟣 needsDisplayOnBoundsChange 란

bound 사각형이 변경될 때 레이어 컨텐츠를 업데이트해야 할지 나타내는 Boolean 값

https://developer.apple.com/documentation/quartzcore/calayer/1410923-needsdisplayonboundschange

Apple Developer Documentation

 

true로 설정된다면, 속성이 변경할 때마다 자동으로 메서드를 호출해준다. 기본값은 언제나 false 이다. 우리 뷰에서는 해당 메서드를 블러처리하는 부분에서 사용됐다. 아무래도 블러처리,, 된 것을 화면이 바뀌면 올려주고 하는과정이 필요해서 상태가 바뀜에따라 올려주어야하니까 사용하지 않았을까? ,,, 설명이 참 부족하다 인터넷에는!! !ㅠㅠ 듀선생한테 물어봐야징

 

🟣 isOpaque() 란

팀원의 코드에서 약간 투명 재질의 블러처리 화면을 만드는 task가 있었다. 그때

self.isOpaque() = false
self.layer.isOpaque() = false

가 등장했고, 뭔지가 궁금해졌다.

👉 view가 불투명한지, 투명한지에 대해서 결정하는 Bool 값이라고 한다.

A Boolean value that determines whether the view is opaque.

<공식문서> https://developer.apple.com/documentation/uikit/uiview/1622622-isopaque

위 말 그대로 투명도를 조절하기 위한 값이라고 볼 수 있겠다.

이 값을 false로 처리하면, 완전히 투명한 뷰가 된다. 반대로 true로 설정하면, drawing 시스템이 view를 완전히 불투명하게 처리한다고 한다. 그럼 성능을 향상시킬 수 있다고 공식문서에 나와있는데? 왜? 그럴까?? 왜 성능이 향상될까?

isOpaque() = false 일 때 성능이 향상하는 이유!!

뷰의 불투명도를 나타내기 때문에, 뷰의 그려진 부분에 대해서 뒤에 해당하는 뷰들은 전부 그려지지 않는다. 그래서 성능을 향상시킬 수 있다고 한다 ! 아하 암막커튼 같은거구나~~~ 

그럼 투명도를 조절하는 opacity와는 뭐가 다를까?

opacity는 불투명도를 조절한다. 즉,  0.0 (투명) 값부터 1.0 (불투명) 범위 내에 있는 값이어야 하며, 벗어나는 값은 최소 값 또는 최댓값으로 고정된다. (즉 0과 1로 고정된다는 말!) 

아하 !! isOpaque() 는 완전 투명 / 불투명의 여부를 불값으로 표현하는거고, opacity는 불투명도를 조절할떄 사용하겠구나 라고 알 수 있겠고, 상황에 따라 달리 사용하면 되겠구나 생각된당 ^___^ 

alpha 도 뷰의 투명도를 조절한다.

투명도를 조절하는 것 중, alpha라는 값도 있다고 한다. opacity와 같게 0.0(투명)부터 1.0(불투명)한 값으로 조절할 수 있다. 뷰 자체의 투명도를 나타낸다는데,,,, 그럼 구체적으로 opacity와는 차이점이 뭘까 ㅋㅋㅋ

아!!! 갑자기 생각난건데, 보통 opacity는 색상에 대한 불투명도를 줄때 함께 조절할 수 있었다. alpha가 왜 '뷰 자체의' 라는 말을 강조했나 생각해보면, 뷰 자체의 불투명도를 조절할때는 주로 alpha를 사용하고 색상값에 대한 불투명도를 조절할때는 oapcity를 사용할 수 있겠다!

alpha값을 0으로 두어서 hidden 과 같은 효과를 내기도 한다고 한다!! 

🙌🏻 정리하자면 

1. isOpaque() 는 뷰가 투명한지, 불투명한지에 대한 Bool값으로 정의한다.
2. Opacity는 0.0(투명)~1.0(불투명)까지 값으로 나탸낼 수 있고, 주로 색상에 대한 붍투명도를 조절할 때 사용한다.
3. alpha는 0.0(투명)~1.0(불투명)까지 값으로 나타낼 수 있고, 뷰 자체의 투명도를 조절한다. 뷰에 대한 alpha값을 0으로 주면, hidden과 동일한 기능을 하게 구현할 수 있다.