Jiseob Kim

iOS Developer

Swift - ScrollView ๋ฟŒ์‹œ๊ธฐ

17 Mar 2021 » Swift, UI

ํ•˜ DragAnimation Final์„ ์ง„ํ–‰์ค‘์ด์—ˆ๋Š”๋ฐ,

์Šคํฌ๋กค๋ทฐ ์ƒ์„ฑ์ค‘์— ์ƒˆ๋กœ ๋ฐ”๋€ Content Layout Guides์„ ๋˜ ์•„ ์ด๊ฑฐ๋ญ๊ฐ€ ๋ญ์˜€์ง€? ํ•ด๋ฒ„๋ ค์„œ

์ด๊ฑฐ๋ถ€ํ„ฐ ์ง„ํ–‰.



์—ฌ๊ธฐ๋ณด๋ฉด Content Layout Guides ๋ผ๋Š” ๊ฒƒ์ด ์–ด๋Š์ƒˆ ์ƒˆ๋กœ์šด๊ฒƒ์ด ์ถ”๊ฐ€ ๋˜์—ˆ๋‹ค.


์ด๊ฑฐ ์ „์—๋„ ์Šคํฌ๋กค๋ทฐ ์ƒ์„ฑ์€ ๊ณต๋ถ€๊ฐ€ ํ•„์š”ํ–ˆ๋‹ค. ์ž์ฒด ์‚ฌ์ด์ฆˆ๋„ ์žก์•„์ค˜์•ผํ•˜๊ณ , ๋‚ด์šฉ๋ฌผ์˜ ์‚ฌ์ด์ฆˆ๋Š” ์–ผ๋งˆ์ผ์ง€๋„ ์žก์•„์ค˜์•ผํ–ˆ๋‹ค.

์œ„์˜ ์˜ต์…˜์„ ์ฒดํฌํ•ด์ฃผ๋ฉด, ์Šคํฌ๋กค๋ทฐ ํ•˜์œ„์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ 2๊ฐœ๊ฐ€ ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ์ด๊ฒƒ์€ ์œ„์— ๋งํ•œ๊ฒƒ๊ณผ ๊ฐ™์ด ๊ธฐ์กด์— ํ•„์š”ํ–ˆ๋˜ ์ž์ฒด ์‚ฌ์ด์ฆˆ, ๋‚ด์šฉ๋ฌผ ์‚ฌ์ด์ฆˆ๋ฅผ ๋ช…์‹œํ•œ ๋Š๋‚Œ์ด๋‹ค.



AutoLayout ์ ์šฉํ•˜๊ธฐ


1. ์Šคํฌ๋กค๋ทฐ ์ถ”๊ฐ€ํ•˜๊ธฐ


2. AutoLayout ์ƒํ•˜์ขŒ์šฐ ๊ฑธ๊ธฐ


3. ์˜ค๋ฅ˜ ๊ตฌ๊ฒฝํ•˜๊ธฐ(์ปจํ…์ธ  ๊ฐ’์„ ๋ชจ๋ฅด๊ฒ ๋‹ค! ๋ผ๋Š” ๋Œ€์ถฉ ๊ทธ๋Ÿฐ ์˜๋ฏธ)


4. ์Šคํฌ๋กค๋ทฐ ์•ˆ์— ๋‚ด์šฉ๋ฌผ(UIView) ์ถ”๊ฐ€ํ•˜๊ธฐ - ๋ชจํ˜ธ ํ•˜๋‹ค๋‹ˆ๊น ํ•ด์ฃผ๊ธฐ, ์—ฌ์ „ํžˆ ์Šคํฌ๋กค๋ทฐ ๋ˆ„๋ฅด๋ฉด 4๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋ณด์ธ๋‹ค.


5. ์ถ”๊ฐ€ํ•œ View์˜ ์ƒํ•˜์ขŒ์šฐ AutoLayout์„ Content Layout Guide ์˜ ์ƒํ•˜์ขŒ์šฐ์— ๊ฑธ์–ด์ค€๋‹ค.

(์ด ๋ถ€๋ถ„ ๊ท€์ฐฎ์€๋ฐ ใ…œ ์‰ฝ๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๊ถ๊ธˆํ•˜๋‹ค.)


6. ๋ทฐ์˜ Size Inspector์—์„œ Autolayout ๊ฐ’๋“ค์„ ๋ณด์ž, ์ด์ƒํ•œ ๊ฐ’์œผ๋กœ ๋“ค์–ด๊ฐ€์žˆ๋‹ค


์ด๋Š” 5์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์žก์•„์ค„ ๊ฒฝ์šฐ ํ˜„์žฌ์˜ ๋น„์œจ์— ๋น„๋ก€ํ•ด์„œ ๊ฑธ๋ฆฌ๊ฒŒ ๋œ๋‹ค.


7. 6์˜ ๊ฐ’๋“ค์„ ์ „๋ถ€ 1 ์œผ๋กœ ์ˆ˜์ •


8. ScrollView ์—๋Ÿฌ๋ฅผ ๋‹ค์‹œ ๋ณด์ž - ์ƒˆ๋กœ์šด ์—๋Ÿฌ๊ฐ€ ๋‚˜ํƒ€๋‚œ๋‹ค.

์ปจํ…์ธ ์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋ชจํ˜ธํ•ด! ๋Š” ์‚ฌ๋ผ์กŒ๋‹ค. ๋Œ€์‹ ์— ์œ„์™€ ๊ฐ™์ด Xย Width ๊ฐ’ ์žก๊ณ  Yย Height๋„ ํ•„์š”ํ•˜๋‹ค๊ณ  ๋‚˜์˜จ๋‹ค.


9. ์ปจํ…์ธ ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์žก์•„์ค€๋‹ค.

๊ฐ€์žฅ ์ผ๋ฐ˜์ ์œผ๋กœ ์„ธ๋กœ ์Šคํฌ๋กค์ด ๋˜๋Š”๊ฒƒ์ด ๋งŽ๋‹ค. ์ด๋•Œ Width๋Š” ์Šคํฌ๋กค๋ทฐ์™€ ๋™์ผํ•˜๊ฒŒ, ๋†’์ด๋Š” ์ปค์Šคํ…€ํ•˜๊ฒŒ.


์ด๋•Œ, ์šฐ๋ฆฌ๋Š” ์ƒ๊ฐ์„ ํ•ด์•ผํ•œ๋‹ค. ์ปจํ…์ธ  ๋ ˆ์ด์•„์›ƒ์„ ์žก์•˜๊ณ  ํ•„์š”ํ•œ๊ฑด ํ”„๋ ˆ์ž„์˜ ์‚ฌ์ด์ฆˆ๋‹ค.

๋”ฐ๋ผ์„œ, ๋†’์ด๋Š” ์ˆ˜๋™์œผ๋กœ ์žก์•„์ฃผ๊ณ  ํญ์€ ์Šคํฌ๋กค๋ทฐ์˜ ํ”„๋ ˆ์ž„๊ณผ ๊ฐ™๊ฒŒ! ๊ฑธ์–ด์ฃผ๋ฉฐ, ์ด๋•Œ ์ดˆ๋ฐ˜์— ๋‚˜์˜จ Frame Layout Guide๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.



ํญ์€ Frame Layout Guide์™€ ๋™์ผํ•˜๊ฒŒ, Height๋Š” 400์œผ๋กœ ์žก์•„์ฃผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋˜๋ฉฐ ์—๋Ÿฌ๊ฐ€ ์‚ฌ๋ผ์ง„๋‹ค.



์—ฌ๊ธฐ๊นŒ์ง€๋งŒ ํ•ด๋„ ์ถฉ๋ถ„ํžˆ ์Šคํฌ๋กค๋ทฐ ์‚ฌ์šฉํ•˜๋Š”๋ฐ๋Š” ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค.


๋‹ค์ŒํŽธ์€ ์กฐ๊ธˆ ์‹คํ—˜์„ ํ•˜๋ คํ•œ๋‹ค.

์™œ ์ด์ „ ์Šคํฌ๋กค๋ทฐ ์‚ฌ์ด์ฆˆ ์žก๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด ํ”„๋ ˆ์ž„ ์ž์ฒด๋Š” ScrollView์˜ Width๋‚˜ ๋‹ค๋ฅธ Width๋ฅผ ์•ˆ์žก๊ณ  Frame Layout Guide๋ฅผ ์ผ์„๊นŒ? ๋ผ๋Š” ์ƒ๊ฐ์„ ์‹œ์ž‘์œผ๋กœ ๋‹ค๋ฅธ๊ฒƒ๊ณผ๋„ AutoLayout์„ ์žก์•„๋ณผ ์˜ˆ์ •์ด๋‹ค.


๋‹ค์Œ ํŽธ์˜ ๊ฒฐ๋ก ์„ ์–˜๊ธฐํ•˜๋ฉด, ๋‹ค ๊ฐ€๋Šฅํ•˜๋‹ค ์ด์ „๊ณผ ๊ฐ™์ด ๋‹ค๋ฅธ๊ฒƒ๊ณผ AutoLayout์„ ๊ฑธ์–ด๋„ ๋œ๋‹ค.

์ดˆ๋ฐ˜์— ์–˜๊ธฐํ•œ๊ฒƒ์ฒ˜๋Ÿผ ์ปจํ…์ธ  ์‚ฌ์ด์ฆˆ์™€ ์ž์ฒด ์‚ฌ์ด์ฆˆ๋ฅผ ๋ช…์‹œํ•œ๋‹ค๋Š” ๋Š๋‚Œ์„ ์ฃผ๊ธฐ์œ„ํ•ด Frame Layout Guide๋ฅผ ์ถ”๊ฐ€ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

์• ํ”Œ์˜ ์˜๋„๋Š” ์•„๋งˆ ์ด๊ฒƒ ๊ฐ™๋‹ค.

์‚ฌ์ด์ฆˆ๋ฅผ ์žก์„๋•Œ ์Šคํฌ๋กค๋ทฐ๋ฅผ ์•ˆ๋ฒ—์–ด๋‚˜๊ณ  Content Layout Guide์™€ Frame Layout Guide๋งŒ์œผ๋กœ ์žก์•„!