iOS ์•ฑ ๊ฐœ๋ฐœ ๊ณต๋ถ€/TIL

7์ฃผ์ฐจ_iOS ์•ฑ ๊ฐœ๋ฐœ ์ˆ™๋ จ_3~4์ผ์ฐจ_Standard๋ฐ˜ AutoLayout_TIL

yeggrrr๐Ÿผ 2024. 4. 11. 21:05
728x90


<TIL>
์–ด์ œ๋Š” ๊ตญํšŒ์˜์› ์„ ๊ฑฐ์ผ์ด๋ผ ๋‚ด๋ฐฐ์บ  ์‰ฌ๋Š” ๋‚ ์ด์—ˆ๋‹ค.๐Ÿ˜ƒ
(3~4์ผ์ฐจ ๋ผ๊ณ  ์ œ๋ชฉ ์ ์€ ์ด์œ )

์ด๋ฒˆ ์ฃผ์ฐจ ๊ฐœ์ธ๊ณผ์ œ '์œ„์‹œ ๋ฆฌ์ŠคํŠธ ๋งŒ๋“ค๊ธฐ'๋Š” ์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€์— ์˜ฌ๋ฆฐ ๋‚ด์šฉ์—์„œ
์•„์ง ์ถ”๊ฐ€์ ์ธ ๊ณต๋ถ€๋Š” ๋ชปํ–ˆ๋‹ค.
(๋‚ด์ผ ์ด์–ด์„œ ํ•  ์˜ˆ์ •!!)

์ˆ˜์š”์ผ์— ์›๋ž˜ ์žˆ๋˜ ์Šคํƒ ๋‹ค๋“œ๋ฐ˜ ์ˆ˜์—…์ด ๋ชฉ์š”์ผ๋กœ ์˜ฎ๊ฒจ์ ธ์„œ
์˜ค๋Š˜์€ ์Šคํƒ ๋‹ค๋“œ๋ฐ˜ ์‚ฌ์ „๊ณผ์ œ๋ฅผ ํ–ˆ๋‹ค.
์‚ฌ์ „๊ณผ์ œ๋Š” 1์ฃผ์ฐจ๋•Œ ์ง„ํ–‰ํ–ˆ๋˜ ์˜คํ† ๋ ˆ์ด์•„์›ƒ ์žก๊ธฐ์˜€๋‹ค.


์‚ฌ์ „๊ณผ์ œ๋Š” ์ˆ˜์—… ์ „์— ๋‹ค ์™„๋ฃŒํ•ด์„œ,
์ˆ˜์—…์„ ๋“ค์œผ๋ฉด์„œ ํ•œ ๋ฒˆ ๋” ๋ณต์Šตํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์ˆ˜์—…์ด ๋๋‚˜๊ณ ๋‚˜์„œ ํ•ด๋‹น ์…€์„ ํ…Œ์ด๋ธ”๋ทฐ์™€ ์—ฐ๊ฒฐํ•˜์—ฌ
๋นŒ๋“œ ํ›„ ์‹คํ–‰ํ–ˆ์„ ๋•Œ ๋ ˆ์ด์•„์›ƒ์ด ๋ง๊ฐ€์ง€๋Š” ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ ์ˆ˜์ •ํ–ˆ๋‹ค!
๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ ์•ฑ์— ์žˆ๋Š” ํƒญ๋ฐ”๋ฅผ ์ถ”๊ฐ€ํ•ด๋ดค๋‹ค.

์šฐ์„ , ์•„๋ž˜์— ์‚ฌ์ „๊ณผ์ œ ๋‚ด์šฉ์„ ์ ์€ ํ›„
์ง์ ‘ ์‹ค์Šตํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•  ์˜ˆ์ •์ด๋‹ค!

 



Standard๋ฐ˜ 3์ฃผ์ฐจ ์‚ฌ์ „๊ณผ์ œ

1. ์•ฑ ์Šคํ† ์–ด

 

2. ๋‹น๊ทผ๋งˆ์ผ“


3. ์นด์นด์˜คํ†ก ํ”„๋กœํ•„


์‚ฌ์ „๊ณผ์ œ ์‹ค์Šต ๋‚ด์šฉ
(+์ถ”๊ฐ€ ์‹ค์Šต)



<Main.Storyboard UI>


1. ์ƒ๋‹จ์— searchBar ๋„ฃ๊ธฐ

2. mainStoryboard์— TableView๋ฅผ ๋„ฃ๊ธฐ
3. ์™ผ์˜ค์œ„์•„๋ž˜ constraints 0์œผ๋กœ ์žก์•„์ฃผ๊ธฐ
4. Prototype Cells 1๋กœ ์„ค์ •
5. Cell Identifier ์„ค์ •

(ํ•˜๋‹จ Tab Bar๋Š” ๋ฐ‘์—์„œ ๋‹ค์‹œ ์ •๋ฆฌํ•  ์˜ˆ์ •)





1. ์•ฑ ์Šคํ† ์–ด

์™„์„ฑ ํ™”๋ฉด

์‚ฌ์ „๊ณผ์ œ ์š”๊ตฌ์‚ฌํ•ญ๋Œ€๋กœ ์œ„์™€ ๊ฐ™์ด
appStoreTableViewCell์„ ๋”ฐ๋กœ xib ํŒŒ์ผ๋กœ ๋งŒ๋“ค์–ด์„œ ์‹ค์Šต์„ ์ง„ํ–‰ํ–ˆ๋‹ค.

์™ผ์ชฝ์„ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋“ฏ StackView๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์˜คํ† ๋ ˆ์ด์•„์›ƒ์„ ์žก์•˜๋‹ค.

โ‘ 
์ œ์ผ ์ƒ๋‹จ์— imageView์™€ Label 2๊ฐœ ๊ทธ๋ฆฌ๊ณ  button์„ StackView๋กœ ๋ฌถ์—ˆ๋‹ค.

(Label 2๊ฐœ๋ฅผ ๋จผ์ € StackView Asis๋ฅผ Vertical๋กœ ๋ฌถ์€ ํ›„,
imageView & StackView(Label 2๊ฐœ) & button ์„ Horizontal๋กœ ๋ฌถ์œผ๋ฉด ๋œ๋‹ค.)

- imageView๋Š” Aspect Ratio๋ฅผ 1:1 ํ•ด์ฃผ๊ธฐ
- ์ „์ฒด StackView Constraints ์žก์•„์ฃผ๊ธฐ (top, leading, trailing)
- ๋ฒ„ํŠผ์€ Style์€ Gray, Background Configuration์—์„œ Corner Style์„ Capsule

โ‘ก
์ค‘๊ฐ„์— ๋ณ„์  ํ‘œ์‹œ๋Š” imageView 5๊ฐœ์™€ Label, imageView์™€ Label, imageView์™€ Label

์ด๋ ‡๊ฒŒ ๊ฐ๊ฐ StackView๋กœ ๋ฌถ๊ณ , StackView 3๊ฐœ๋ฅผ ํ•œ ๋ฒˆ์— ๋˜ StackView๋กœ ๋ฌถ์–ด์ฃผ์—ˆ๋‹ค.

- ์ „์ฒด StackView Distribution์€ Fill Equllay
- ์ „์ฒด StackView Spacing 20
- ๊ฐ๊ฐ์˜ StackVeiw Alignment Center, Distribution Fill
- ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์˜คํ† ๋ ˆ์ด์•„์›ƒ ์žก์•„์ฃผ๊ธฐ
(leading, trailing, bottom, top)

โ‘ข
๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์€ imageView 3๊ฐœ๋ฅผ Horizontal StackView๋กœ ๋ฌถ์–ด์ฃผ์—ˆ๋‹ค.

- ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์˜คํ† ๋ ˆ์•„์•„์›ƒ ์žก์•„์ฃผ๊ธฐ
(leading, trailing, bottom, top)


์ฝ”๋“œ๋กœ ํ•ด๋‹น ์…€ ์—ฐ๊ฒฐํ•˜๊ธฐ!


<Tab Bar ์ถ”๊ฐ€ํ•˜๊ธฐ>

Viewcontroller ํด๋ฆญ ํ›„, ํ•˜๋‹จ์— Embed ํด๋ฆญํ•˜์—ฌ
Tab Bar Controller ํด๋ฆญํ•˜์—ฌ ์ถ”๊ฐ€!

๊ทธ๋ฆฌ๊ณ  ์›ํ•˜๋Š” tab Bar ๊ฐฏ์ˆ˜๋งŒํผ Viewcontroller ์ถ”๊ฐ€ํ•˜๊ณ ,
Tab Bar Controller์—์„œ Control๋กœ ๊ฐ๊ฐ์˜ ViewController์— drag&drop!

view controllers๋กœ ์—ฐ๊ฒฐํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

์•ฑ ์Šคํ† ์–ด ์•ฑ๊ณผ ๋น„์Šทํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ฐพ์•„์„œ ์„ค์ •ํ•ด์คฌ๋‹ค.


์‹คํ–‰ํ•ด๋ณด๋ฉด, ์œ„์™€ ๊ฐ™์ด ์™„์„ฑ!!

์ฝ”๋“œ์—์„œ Cell์˜ ๊ฐฏ์ˆ˜ ๋ฆฌํ„ด๊ฐ’์„ 5๋กœ ์ค˜์„œ 5๊ฐœ๊ฐ€ ๋‚˜์™”๋‹ค.
TableView๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ Scroll์ด ๊ฐ€๋Šฅํ•˜๋‹ค. 



2. ๋‹น๊ทผ๋งˆ์ผ“


๋งˆ์ฐฌ๊ฐ€์ง€๋กœ xib ํŒŒ์ผ์„ ์ƒˆ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค.
- imageView๋Š” Aspect Ratio 1:1
- ๊ฐ€์žฅ ์œ„์— Label 1๊ฐœ , ์ค‘๊ฐ„ Label 2๊ฐœ, ๊ฐ€์žฅ ์•„๋ž˜ Label 2๊ฐœ
๊ฐ๊ฐ ์•ฑ ์Šคํ† ์–ด ๋•Œ ์ฒ˜๋Ÿผ StackView์•ˆ์— StackView ๋ฌถ๊ธฐ
- ๊ฐ€์žฅ ์œ„์— Label์€ Lines๋ฅผ 2๋กœ ์„ค์ •(์ตœ๋Œ€ 2์ค„๊นŒ์ง€ ๋ณด์ด๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ)
- ํ•˜๋‹จ ์™ผ์ชฝ Label(๊ฑฐ๋ž˜์™„๋ฃŒ)์€ ์•„๋ž˜ Drawing์—์„œ Hidden ์ฒดํฌ! (๊ฑฐ๋ž˜ ์™„๋ฃŒ์ธ ๊ฒฝ์šฐ์—๋งŒ ๋ณด์ด๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ)
- ์œ„์—์„œ ์˜ค๋ฅธ์ชฝ์— Button ์ถ”๊ฐ€ํ•˜๊ณ  ์˜คํ† ๋ ˆ์ด์•„์›ƒ ์žก๊ธฐ(top, trailing)
- ์•„๋ž˜์—์„œ ์˜ค๋ฅธ์ชฝ์— imageView์™€ Label StackView๋กœ ๋ฌถ๊ณ  ์˜คํ† ๋ ˆ์•„์›ƒ ์žก๊ธฐ(trailing, bottom)


3. ์นด์นด์˜คํ†ก ํ”„๋กœํ•„

 - ๊ฐ€์žฅ ๋’ท ๋ฐฐ๊ฒฝ: imageView (safe area - trailing, leading 0 / super view - bottom, top 0)
- ์™ผ์ชฝ ์ƒ๋‹จ: button / ์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ: button 3๊ฐœ stackView๋กœ ๋ฌถ๊ธฐ 
- ํ•˜๋‹จ์— ๊ตฌ๋ถ„์ค„์€ view (trailing, leading 0 / height 1)
- ๊ตฌ๋ถ„์ค„ ์œ„: imageView, label 2๊ฐœ Vertical StackView
- ํ•˜๋‹จ ๋ฒ„ํŠผ: imagView&Label Vertical StackView ๋ฌถ์–ด์„œ ๊ฐ๊ฐ 2๊ฐœ๋ฅผ ๋‹ค์‹œ StackView ๋ฌถ๊ธฐ


 

728x90