ํ 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๋ง์ผ๋ก ์ก์!