Programming/iOS

[Swift Tutorial] Swift UI Layout ์•ˆ์ „ ์˜์—ญ / ํ™”๋ฉด ์ „์ฒด ์ฑ„์šฐ๊ธฐ

Space_Jin 2023. 10. 8. 16:04
728x90
๋ฐ˜์‘ํ˜•

# Swift ์—ฌ๋ฐฑ ์—†์• ๊ธฐ / ํ™”๋ฉด ์ „์ฒด ์ฑ„์šฐ๊ธฐ

1. ์ œ์•ฝ ์กฐ๊ฑด ์ถ”๊ฐ€ํ•˜๊ธฐ

์ถ”๊ฐ€ํ•œ view๋ฅผ ์„ ํƒ ํ›„ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ์˜ ์ œ์•ฝ์‚ฌํ•ญ ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ•ด์„œ view์˜ ์ œ์•ฝ์‚ฌํ•ญ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

๋ถ‰์€ ํ™”์‚ดํ‘œ๋กœ ํ‘œ์‹œ๋˜์–ด์žˆ๋Š” ์„ ์„ ํด๋ฆญํ•˜์—ฌ ๋‹ค๋ฅธ view์™€ ์ƒ๋Œ€์ ์ธ ๊ฑฐ๋ฆฌ ์ œ์•ฝ์„ ๋งŒ๋“ ๋‹ค.

4๋ฉด์„ ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด ๊ฑฐ๋ฆฌ ์ œ์•ฝ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. (์œ„ ์‚ฌ์ง„์€ ๊ฑฐ๋ฆฌ ์ œ์•ฝ์„ 0์œผ๋กœ ๋งŒ๋“ฆ)

 

์ œ์•ฝ ์‚ฌํ•ญ์„ ์ถ”๊ฐ€ํ•œ ๋ชจ์Šต

๊ฑฐ๋ฆฌ ์ œ์•ฝ์„ 0์œผ๋กœ ํ–ˆ์Œ์—๋„ ์—ฌ๋ฐฑ์ด ์ƒ๊ธด ์ด์œ ๋Š” ๊ฑฐ๋ฆฌ ์ œ์•ฝ์ด ์ƒ๋‹จ์˜ ๋…ธ์น˜๊ฐ€ ์Šคํฌ๋กค ๋ฐ”๊ฐ€ ํฌํ•จ๋˜์–ด์žˆ๋Š” ์•ˆ์ „์˜์—ญ(Safe area)๊ณผ ์ด๋ค„์กŒ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๊ฐ€๋กœ ํšŒ์ „ ๋ชจ์Šต

ํŒŒ๋žœ์ƒ‰ view๋ฅผ ์ „์ฒด ํ™”๋ฉด์œผ๋กœ ์ฑ„์šฐ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ด๋Ÿฌํ•œ ์ œ์•ฝ์‚ฌํ•ญ์„ safe area๊ฐ€ ์•„๋‹Œ ์ „์ฒด view๋กœ ๋งž์ถฐ์ฃผ๋ฉด ๋œ๋‹ค.

 

2. ์ œ์•ฝ ์‚ฌํ•ญ ๊ฐ์ฒด ๋ฐ”๊พธ๊ธฐ

์œ„ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ์™ผ์ชฝ view controller์—์„œ constraints(์ œ์•ฝ์‚ฌํ•ญ)์„ ํด๋ฆญํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ œ์•ฝ์‚ฌํ•ญ์„ ์„ ํƒํ•œ๋‹ค.

์˜ค๋ฅธ์ชฝ ์‚ผ๊ฐ์ž ๋ชจ์–‘์˜ Size inspector๋ฅผ ์„ ํƒ ํ›„ Second item์„ safe area์—์„œ super view๋ฅผ ์„ ํƒ ํ›„ ์ œ์•ฝ์‚ฌํ•ญ ๊ฑฐ๋ฆฌ(constraint distance)๊ฐ€ 0์ธ๊ฒƒ์„ ํ™•์ธํ•˜๊ฑฐ๋‚˜ 0์œผ๋กœ ๋ฐ”๊พธ์–ด์ค€๋‹ค.

4๋ฉด์˜ ์ œ์•ฝ์‚ฌํ•ญ์„ ๋ชจ๋‘ ๋™์ผํ•˜๊ฒŒ ๋ฐ”๊ฟ”์ฃผ๋ฉด ์—ฌ๋ฐฑ์ด ์—†์ด view๋ฅผ ํ™”๋ฉด์— ๊ฐ€๋“ ์ฑ„์šธ ์ˆ˜ ์žˆ๋‹ค.

๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ํ™”๋ฉด์— ๊ฐ€๋“์ฐฌ ๋ฐฐ๊ฒฝ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•