인프런 커뮤니티 질문&답변

아요님의 프로필 이미지
아요

작성한 질문수

성공적인 진짜 iOS Design Guide - [Autolayout With Code]

6. ratio - 비율로 레이아웃 설정하기 - 1

비율로 레이아웃 설정하기 -1

작성

·

404

·

수정됨

0

14:12 부분 설명이 이상해요

width = 1.60377 x height (85:53) - 50

"여기서 1.6이라하는것은 내가 비율로설정한(85:53)인거고 1.6은 곱하기 height - 50 만큼 빼지는거고 그게 결정지어지는 값은 width다."

1.6 이 중복 된게 이상하고

설명하신것처럼

height 값을 구해보면 85 : 53 = -50 : x

(53 * -50) / 85 = -31.1764706이 나옵니다.
1.60377 x -31.1764706 = -49.9998883 이고,

여서 -50 더하믄 -99.999888 인데요?

실제 width 값은 110.67입니다.

height를 구하는 식이 85:53 = constant : x
즉, x(height) = (53 * constant) / 85 라는 소리신데 이해가 안가네요 ㅠㅠ

답변 3

0

아요님의 프로필 이미지
아요
질문자

답변감사합니다 선생님 :)

0

아요님의 프로필 이미지
아요
질문자

답변 감사합니다 제가 궁금했던점은
선생님이 말씀해주신
"여기서 1.6이라하는것은 내가 비율로설정한(85:53)인거고 1.6은 곱하기 height - 50 만큼 빼지는거고 그게 결정지어지는 값은 width다." 라는 대사에서 이해를 못한거같아요.

그리고 우선

height 값을 구하는 식이
85 : 53 = -50 : x 이 식은 53 * -50 - 95 = x 다 라고하셔서 이를 계산한 식을 질문에 적은것입니다.

답변으로 말씀해주신 것과 강의 내용을 대입해보면 width = 1.60377 * height + 10 width = (1.60377) x height(53 * -50 - 95 = x) 가 돼야하지않나요?

답변으로 말씀해 주시는것은 width , height 값이 주어졌을때 계산이 가능하다. 라는말이신가요?
width 를 100으로 고정한다 100 = 1.60377 * height + 10 이면 height = 90 / 1.60377 이 되네요

width , height 값이 주어졌을때 계산이 가능하다.

그리고

width = ratio * height이 식과

여기에 constant수치가 있으면 더하기만 하면된다.

width = ratio * height + constant

라는것만 기억하면 될까요?

iOS Developer - 이정님의 프로필 이미지
iOS Developer - 이정
지식공유자

width나 height둘 중 하나라도 정해지지 않으면 계산자체가 불가능해서 화면구성이 안됩니다.

 

여기서 width나 height의 수치가 정해지는건 비율 계산과는 상관없이 정하거나 정해지는 것입니다.

직접 constant값을 입력해서 고정된 값으로 정할수도 있는거고, 여백에 따라서 정해지기도 하는 것입니다.

비율계산을 말씀드린건 계산식에서 1.6이 어떻게 나온건지에 대한 설명이라고 이해하시면 되겠습니다.

 

그럼 이렇게 width나 height가 정해진 상황에서

width가 정해지면 식에 width를 대입해 계산하면 height가 얼마가 나올지 알게 되고,

height가 정해지면 식에 height를 대입해 계산하면 width가 얼마가 나올지 알게 되는 것입니다.

 

말씀하신 것 처럼 식만 기억하시면 되겠습니다.

0

iOS Developer - 이정님의 프로필 이미지
iOS Developer - 이정
지식공유자

안녕하세요

 

autolayout 설정에서 비율(ratio)을 85:53으로 설정할 때, 이는 너비(width)대 높이(height) 의 비율을 의미합니다. 이 비율을 수학적으로 표현하면, 너비를 높이로 나눈 값이 85/53이 되어야 합니다. 즉, 너비는 높이의 약 1.60377배가 됩니다. 이를 수식으로 나타내면 width = 1.60377 * height가 됩니다.

 

다시 말하자면 여기서 1.60377은 85를 53으로 나눈 값입니다. 이렇게 되는 이유는, 비율을 설정할 때 한쪽 길이를 다른 쪽 길이의 배수로 설정하기 때문입니다. 그 배수를 곱해야 한쪽길이에 맞춰 비율에 맞는 다른쪽 길이가 정해지기 때문입니다.

 

쉽게 말해 그냥 단순히 비율에 맞게 높이와 너비가 정해진다는 것입니다.

 

그런데 여기서 10이라는 constant 수치를 줬다고 가정하면 위 계산식에 그 10을 추가하면 됩니다.

그래서 width = 1.60377 * height + 10의 계산식이 나오는 것입니다.

그리고 이 공식을 autolayout화면에서 친절하게 보여주고 있다고 보시면 됩니다.

 

여기서 우리가 생각할 건 우리는 이미 width를 100으로 고정했다는 것이죠.

이 고정된 100은 width라는걸 계산식에 대입하면,

100 = 1.60377 * height + 10이 됩니다.

이 계산에서 height를 구하기 위해 치환하면,

height = (100 - 10) / 1 .60377 이라는 식으로 됩니다. 결과는 61.72 정도 나올거구요

여기서 주어진 계산식의 계산을 확인하기 위해 치환하는건 개발자가 직접 해야되겠죠?

 

그럼 반대로 height를 100으로 고정했다고 가정해 봅시다.

처음에 말한 width = 1.60377 * height 라는 계산식에서 height를 대입하면

width = 1.60377 * 100이 되겠죠?

그럼 width는 160.3정도 나올겁니다.

그럼 이때도 constant 10을 줘봅시다.

그럼 계산식은

width = 1.60377 * 100 + 10이 되는 것입니다.

계산해보면 width는 170정도 나오죠.

 

정리하면

width = ratio * height이 식만 잘 기억하시고

여기에 constant수치가 있으면 더하기만 하면됩니다.

width = ratio * height + constant이렇게 말이죠

 

이 강의에서는 1.60377이 왜 나왔는지에 대한 비율 설명과, 비율을 어떻게 적용하는지 설명한 것이고

그래서 이해하기 쉽게

뷰의 height가 정해지면 width에 constant값 만큼 그대로 더해진다고 설명한거고

뷰의 width가 정해지면 비율값으로 constant가 height에 정해진다고 표현한 것입니다.

 

끝으로 제 설명이 모호했던게 있었던 것 같습니다.

다시한번 이 챕터의 영상을 검토해서 수정해 보도록 하겠습니다.

 

 

 

아요님의 프로필 이미지
아요

작성한 질문수

질문하기