Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<4주차> hugging, resistance에 대해서 설명하시오. #21

Closed
namsoo5 opened this issue Nov 20, 2020 · 8 comments
Closed

<4주차> hugging, resistance에 대해서 설명하시오. #21

namsoo5 opened this issue Nov 20, 2020 · 8 comments

Comments

@namsoo5
Copy link
Collaborator

namsoo5 commented Nov 20, 2020

No description provided.

@khyunjiee
Copy link
Member

Content Hugging & Compression Resistance

IntrinsicContentSize

컨텐츠의 고유 사이즈 (UILabel, UIButton, UIImageView 등은 만들 때 너비와 높이를 지정하지 않아도 고유 사이즈가 설정된다.)
대부분의 뷰들은 intrinsicContentSize를 가지며, 표시되는 내용이 변경될 때 intrinsicContentSize도 함께 변경된다.
하지만, UIView와 같은 컨테이너 역할을 하는 일부 컨텐츠들은 intrinsicContentSize가 없기 때문에 오토 레이아웃을 설정해주지 않으면 오류가 일어난다.

  • Content Hugging & Compression Resistance : intrinsicContentSize를 갖고 있는 컨텐츠에서 설정 가능

Content Hugging

고유 사이즈의 최대 크기에 제한을 두는 것으로, 크기가 그 값보다 작아질 수 있다.
즉, 최대 크기보다 더 커지지 않는다.

Compression Resistance

고유 사이즈의 최소 크기에 제한을 두는 것으로, 크기가 그 값보다 커질 수 있다.
즉, 최소 크기보다 더 작아지지는 않는다.

Content Hugging과 Compression Resistance에서 Priority가 중요하다.

A, B 두 개의 UILabel 에서 A보다 B의 Content Hugging 우선순위가 높다면 A의 크기가 커진다.
B의 우선순위가 높으므로 작아질 수 있다고 해석되기 때문이다.

또, 한 개의 버튼의 width값의 우선순위가 Compression Resistance의 우선순위보다 작다면 width로 설정한 값보다 버튼의 width가 커진다.
Compression Resistance의 우선순위가 높으므로 커질 수 있다고 해석되기 때문이다.

@iJoom
Copy link
Collaborator

iJoom commented Nov 25, 2020

Content Hugging and Compression Resistance


Content hugging : 최대 크기에 대한 제한 / hugging이라는 말 그대로 안는다는 것을 연상하면 된다. 베게를 안으면? 원래의 크기보다 작아진다.

Compression resistance: 최소 크기에 대한 제한 / 원래의 크기보다 더 커지거나 많은 부분을 표현할 수 있다.

(트레일링의 priortiy보다 compression resistance의 priority가 높으면 ..처럼 표현이 안되는 부분도 표시된다.)


intrinsicContentSize UIKit의 UIView의 인스턴스 프로퍼티

View 자체의 속성을 고려한 View의 자연 크기 , 의역하자면 View 자체 본질의 크기

var intrinsicContentSize: CGSize { get }

intrinsicContentSize가 존재해야, UIButton, UILabel 등의 View들이 Width와 Height 값을 가질 수 있는겁니당.
(공식문서 해석)예를 들어 변경된 높이를 기반으로 레이아웃 시스템에 변경된 너비를 동적으로 전달할 방법이 없기 때문에, intrinsic size 는 콘텐츠 프레임과 반드시 독립적 이어야합니다.



예시

height 50, width 100 인 Label 2개가 있다고 생각하고, 두 Label이 content hugging이 251이라면 지금과 같은 크기를 유지합니다.
하지만, 왼쪽의 Label의 content huggin 값을 250으로 수정하면, 왼쪽의 label의 크기가 더 커집니다.
Why? - hugging의 값이 오른쪽 라벨이 더 커지므로, 주어진 크기보다 작아질 수 있는 hugging이 오른쪽 Label에 적용되기 때문

주어진 크기보다 표시되는 text가 길어진 Label -> EX( AB...Z)
width의 constraint 값을 980정도로 바꿔서 Compression resistance(1000)값보다 작게 설정해주면
Compression resistance가 적용되서 EX(ABCDEFZ)로 표시됨.

@iJoom iJoom added the 인준 label Nov 25, 2020
@namsoo5
Copy link
Collaborator Author

namsoo5 commented Nov 25, 2020

hugging
상대적으로 작아지려고 하는 세기

resistance
상대적으로 커지려고 하는 세기

둘의 차이
hugging - 공간이 남을 때 어떤것을 줄이고 늘릴 것인지
(수치 높을수록 줄어듬)

resistance - 공간이 부족할 때 어떤것을 줄이고 늘릴 것인지
(수치 높을수록 늘어남)

[참고링크](https://nsios.tistory.com/98

@namsoo5 namsoo5 added the 남수 label Nov 25, 2020
@dongminyoon
Copy link
Collaborator

dongminyoon commented Nov 26, 2020

일단 오토레이아웃에서 사용되는 값이다. 여기서 Priority을 설정할 수 있는데 기본으로 제공해주는 IntrinsicContentSize을 이용해서 오토레이아웃을 잡고 싶을 경우 사용할 수 있다.

Content Hugging : IntrinsicContentSize의 최대 크기에 제한을 두는 것이다. 이것의 우선순위가 상대방보다 더 커지면 비교 대상보다 더 작아질수도 있다. 즉, 자기의 IntrinsicContentSize의 최대 크기에 제한이 걸리면 상대보다 작아지고 상대가 남은 공간을 채우게 된다. 그렇기 때문에 하나가 빈 공간을 채워야하는 경우 사용할 수 있다.

Compression Resistance : IntrinsicContentSize의 최소 크기에 제한을 두는 것이다. 만약 이 우선순위가 상대보다 더 크게 되면, IntricsicContentSize보다 더 작아질 수 없게 제한이 걸린다. 즉, 상대방보다 커지게 된다. 이 경우는 겹쳐져 있는 경우 누가 자기 자신의 크기를 유지할 지 사용한다.

IntrinsicContentSize란?

컨텐츠 고유사이즈라고 하는 것이다. UILabel, UIButton, UIImageView등에 객체를 만들 때, 직접 사이즈를 적용하지 않아도 나오는 것을 보았을 것이다. 
이 이유가 이 프로퍼티 때문이다. Label은 text에 맞게 이 값이 자동으로 조절되고 ImageView 역시 그렇다. 그러나 콘테이너 뷰 역할을 하는 뷰들은 고유 사이즈가 없다. 
그렇기 때문에 UIView을 넣고 오토 레이아웃을 중앙으로만 잡으면 오류가 나는 이유가 그 이유다. 고유 사이즈를 모르기 때문이다.

@choidam
Copy link
Member

choidam commented Nov 27, 2020

Content hugging, Compression resistance 모두 AutoLayout Priority 값입니다.

  1. Content hugging
    최대 크기 에 대한 제한으로, 주어진 크기보다 작아질 수 있음을 의미합니다. Hugging priority 가 높을 수록 해당 컨텐츠는 폭이 커지는 것을 우선적으로 저항하게 됩니다.

  2. Compression resistance
    최소 크기 에 대한 제한으로, 주어진 크기보다 커질 수 있음을 의미합니다. 주변의 다른 아이템들이 최대한 축소될 수 있을 때까지 기다린 다음 영향을 받기 시작합니다.

@choidam choidam added the label Nov 27, 2020
@elesahich
Copy link
Collaborator

진짜 처음 공부하는 것이고 면접때 물어봤으면 모른다라고 답했을듯 먼저 공부를 해보고 답변하겠습니다
https://eunjin3786.tistory.com/43
를 참고했습니다

image
두 라벨이 있고 두 라벨은 모두 위/왼쪽/오른쪽 40씩 constraint를 주었다 그랬더니~
그려진 제약조건으로는 만족을 못시키고,

image
Content Priority가 모호하다고 한다. 그럼 먼저 Content Priority를 공부해보자~!

Content Priority

Content priority에는 두 종류가 있다.

  1. content hugging
    우선순위가 높으면 크기 유지, 우선순위가 낮으면 크기가 늘어남 :
  2. Compression resistance.
    우선순위가 높으면 크기 유지, 우선순위가 낮으면 크기가 작아짐

두개가 반대인것 같은데, Compression이 압축이라는 뜻 -> 압축 -> 민다 -> 작아짐 이므로
그 반대인 허깅은 늘어나는것으로 기억하기로 했다. 그리고 우선순위가 낮은 경우에 낮은 객체가 변화 발생.

그럼 위와 같은 경우에서 priority를 변화시켜 보겠습니당
A와 B의 Hugging Priority가 251인 상태에서,
A를 250으로 낮추어 보겠습니다.

예상 : 250으로 우선순위가 낮아졌으니 낮아진 객체가 커질것이다 (Hugging은 커진다)
image

놀랍게도 에러가 사라지고 다음과 같은 그림이 됩니다! 우와~-

그럼, Compression resistance를 조작해 봅시다.
Compression resistance는 공간이 부족할 때 무엇이 줄어들지 설정해주는 것입니다. 다음 예제를 봅시다!
image

이렇게 두 라벨에 엄청 긴 라벨을 넣어주었습니다.
ㄱㄴㄷㄹㅁㅂㅅ vs ABCDEFG

그럼 에러가 변경되는데, Compress Priority를 변경해주라는 에러가 나옵니당 우와
image

그럼, 한 라벨의 Compress Priority를 변경해주면,
예를 들어 A라벨의 Compress Priority를 750에서 751로 하나 올려주면 (우선순위가 올라갔죠)
예상 : 우선순위가 높은 A는 가만히 있고, 우선순위가 상대적으로 낮은 B는 줄어들게 될 것 같아 (*IntrinsicSize만큼)

image

가만히 있지는 않고 B가 줄어든만큼 늘어나게 되네요!
신기하고 유용합니다. AutoLayout이 잘 못만든것 같으면서도 잘 만든것 같기도 하고~!

정리 :

  1. content hugging
    우선순위가 높으면 크기 유지, 우선순위가 낮으면 크기가 늘어남 :
  2. Compression resistance.
    우선순위가 높으면 크기 유지, 우선순위가 낮으면 크기가 작아짐

두개가 반대인것 같은데, Compression이 압축이라는 뜻 -> 압축 -> 민다 -> 작아짐 이므로
그 반대인 허깅은 늘어나는것으로 기억하기로 했다. 그리고 우선순위가 낮은 경우에 낮은 객체가 변화 발생.

요렇게 정리가 됩니다. 끝.

@Juhyeoklee
Copy link
Collaborator

이 둘을 알기 전에 먼저 알아야 할 것은 고유 컨텐츠 크기(Intrinsic Content Size)이다.

Intrinsic Content Size

뷰의 고유 컨텐츠 크기는 뷰가 갖는 원래의 크기, Label의 고유 컨텐츠 크기는 Label의 텍스트 크기이고, 이미지의 고유 컨텐츠 크기는 이미지 자체의 크기이다.

Content hugging Priority

컨텐츠 고유 사이즈 보다 뷰가 커지지 않도록 제한하는 우선도이다.
다른 제약사항보다 우선도가 높으면 뷰가 컨텐츠 사이즈보다 커지지 않는다.

Content compression resistance priority

컨텐츠 고유 사이즈보다 뷰가 작아지지 않도록 제한한다.
다른 제약사항보다 우선도가 높으면 뷰가 컨텐츠사이즈 보다 작아지지 않는다.

@5anniversary
Copy link
Collaborator

오토레이아웃을 잡게 되는경우 content에 대해 hugging과 resistance에 대한 우선순위를 잡게 되는데요

간단하게 알아보자면

hugging priority의 우선순위가 높은 경우 -> 해당 object 크기 유지!! 낮으면 크기가 늘어남

compression resistance priority의 우선순위가 높은 경우 -> 해당 object 크기 유지!! 우선순위가 낮으면 크기가 작아짐!!

hugging -> 공간이 남을 경우에 무엇을 늘려줄지 정해주는 개념!!!

compression -> 공간이 부족할 경우 무엇을 줄여주는지 정해주는 개념!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment