<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 ๋ฌถ๊ธฐ
'iOS ์ฑ ๊ฐ๋ฐ ๊ณต๋ถ > TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
7์ฃผ์ฐจ_4์ผ์ฐจ_์ฑ ๊ฐ๋ฐ ์๋ จ_๊ฐ์ธ๊ณต๋ถ_TIL (2) | 2024.04.18 |
---|---|
7์ฃผ์ฐจ_2์ผ์ฐจ_์ฑ ๊ฐ๋ฐ ์๋ จ_ScrollView & Pull to Refresh_TIL (0) | 2024.04.16 |
7์ฃผ์ฐจ_iOS ์ฑ ๊ฐ๋ฐ ์๋ จ_2์ผ์ฐจ_TIL (0) | 2024.04.09 |
7์ฃผ์ฐจ_ํค์ค์คํฌ ๋ง๋ค๊ธฐ_1์ผ์ฐจ_์ฒซ ํ ํ๋ก์ ํธ ๋ง๋ฌด๋ฆฌ_TIL (0) | 2024.04.08 |
5์ฃผ์ฐจ_iOS ์ฑ ๊ฐ๋ฐ ์ ๋ฌธ_5์ผ์ฐจ_ํด์ค๊ฐ์ & Auto Layout ์ฐ์ต (0) | 2024.03.29 |