Lesson 2: Layouts
Udacity ์์ Developing Android Apps with Kotlin ์ด๋ผ๋ ๊ฐ์๋ฅผ ๋ฃ๊ณ lesson ๋ณ๋ก ์ค์ํ๋ค๊ณ ์๊ฐํ ๋ถ๋ถ์ ํ๊ธฐํ ๋ด์ฉ์ด๋ค.
์์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ํ๊ธฐํ ๋ด์ฉ์ด๋ค ๋ณด๋ ๋ฒ์ญ์ด๋ ํด์์ด ์๋ชป๋ ๋ถ๋ถ์ด ์์ ์ ์๋ค. ๋ ์ผ๋ถ๋ ์์ด ๋จ์ด๋ ๋ฌธ์ฅ์ ๊ทธ๋๋ก ์ ์ด๋์๋ค.
์ ํํ ๋ด์ฉ์ ๊ฐ์๋ฅผ ์ง์ ์ฐธ๊ณ ํ๋ ๊ฒ์ ๊ถํ๋ค.
Developing Android Apps with Kotlin | Udacity Free Courses
Take Udacity's free online course and learn Android development with Kotlin. Master the fundamentals of the Kotlin programming language taught by Kotlin experts at Google.
www.udacity.com
3. View Groups & View Hierarchy
dp: location๊ณผ dimension์ ๋ํ๋ด๋ unit(๋จ์)์ผ๋ก density independent pixel์ ์ฝ์ด์ด๋ค. ๋ฌผ๋ฆฌ์ ์คํฌ๋ฆฐ ํฝ์
์ ๋ฐ๋์ ๊ทผ๊ฑฐํ๋ฉฐ ์๋๋ก์ด๋ ๋๋ฐ์ด์ค๋ ์๋์ผ๋ก dp โก๏ธ px ์ปจ๋ฒ์ ์ ํตํด ๊ฐ์ ํธ๋ค๋งํ๋ค.
160 dpi ์คํฌ๋ฆฐ์์ 1dp = 1 pixel, 480 dpi ์คํฌ๋ฆฐ์์ 1dp = 3 pixels
View Groups
- LinearLayout: horizontal / Vertical
- ScrollView: For scrollable view
- ConstraintLayout: view hierarchy์ ๊น์ด๊ฐ ๊น์์๋ก ๋ ์ด์์์ ๊ณ์ฐํ๊ธฐ ์ํด ๋ ๋ง์ work์ด ํ์ํ๋ค. big & deepํ view์ ๊ณ์ธต ๊ตฌ์กฐ๋ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ค. ์ด๊ฒ์ ์ฌ์ฉ์์๊ฒ๋ ๋ถํธ์ ์ด๋ํ๋ค. ๊ทธ๋์ ์๋๋ก์ด๋๋ ConstraintLayout์ ์ ๊ณตํ๋๋ฐ flatํ hierarchy๋ฅผ View๋ฅผ promoteํ๊ณ view๋ฅผ ๋ฐฐ์นํ๋๋ฐ ์ต์ ํ๋์ด ์๋ค. ๋ณต์กํ layout์ธ๋ฐ ์ ์ ์์ View๋ ViewGroup์ด ๋ค์ด๊ฐ๋ ๊ฒฝ์ฐ ์ ์ฉํ๋ค.
7. Adding a TextView
sp: scale independent pixels, dp์ ๋น์ทํ์ง๋ง ํ๋ฉด์ pixel density ๋ฟ๋ง ์๋๋ผ ์ฌ์ฉ์๊ฐ ํธ๋ํฐ์ ์ธํ ํ ํฐํธ ์ฌ์ด์ฆ๋ ๋ฐ์ํ์ฌ scaleํจ.
setContentView()์ด ์ฝ๋๊ฐ layout๊ณผ activity๋ฅผ ์ฐ๊ฒฐํ๋ ๋ถ๋ถ.
10. Exercise: Add a ScrollView
ScrollView๋ ํ ๊ฐ์ View๋ ViewGroup๋ง ์๋ ๋ก ๋ด์ ์ ์๋ค. ๋ณดํต ๋ด๋ถ์ LinearLayout์ ๋ด๊ณ LinearLayout ์์ ๋ ๋ค๋ฅธ View๋ค์ ๋ด๋๋ค.
11. Adding an EditText for Text Input
- EditText๋ TextView์ ์๋ ํด๋์ค์ด๋ค.
- ์๋๋ก์ด๋ ์์คํ ์ inputType์ ๋ฐ๋ผ์ input๊ฐ์ validateํ๋ค.
- ๊ฐ์ฅ ์ข์ inputType์ ์ง์ ํ๋ ๊ฒ์ ์ฌ์ฉ์๋ค์ด ์๋ฌ๋ฅผ ํผํ๋๋ฐ ๋์์ด ๋๋ค.
12. Adding a Done button to Accept Text Input
Visibility ์์ฑ ์ค invisible / Gone ๋ชจ๋ text๋ฅผ ์จ๊ธฐ์ง๋ง invisible์ ๊ทธ ๊ณต๊ฐ์ ์ฐจ์งํ๊ณ , gone์ ๊ณต๊ฐ์ ์ฐจ์งํ์ง ์๋๋ค.
- Button์ TextView๋ฅผ ํ์ฅํ ๊ฒ์ด๋ค.
- ์ฌ์ฉ์๋ ๋ฒํผ์ ๋๋ฅผ ์ ์๋ ๊ฒ, ๋๋ฅด๋ฉด ๋ฌด์ธ๊ฐ๊ฐ ๋ฐ์ํ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ค.
13. Exercise: Add EditText, Done Button, ClickHandler
// Hide the keyboard
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.hideSoftInputFromWindow(view.windowToken, 0)
14. Data Binding
๋งค๋ฒ findViewById์ ๊ฐ์ ๋ฐฉ์์ ์๋๋ก์ด๋๊ฐ view hierarchy๋ฅผ runtime์ ํ์ํ๊ฒ ๋ง๋ ๋ค. ํฌ๊ณ ๊น์ view hierarchy๋ ์ฑ์ด ๋๋ ค์ง๋ ์์ธ์ด ๋ ์ ์๋ค. ์ด๊ฒ์ ํด๊ฒฐํ๋ ๋ฐ์ Data Binding์ด ์ ์ฉํ๋ค. ์๋ํ๋ฉด layout๊ณผ activity๋ฅผ compile time์ ์ฐ๊ฒฐํ๊ฒ ํด ์ฃผ๊ธฐ ๋๋ฌธ์ด๋ค. ์ปดํ์ผ๋ฌ๋ helper class์ธ Binding Class๋ฅผ activity๊ฐ ์์ฑ๋๋ฉด ๋ง๋ค์ด์ฃผ๊ณ ๊ทธ ํด๋์ค์ ์ธ์คํด์ค๋ฅผ ํตํด์ ์ถ๊ฐ์ ์ธ overhead ์์ด view์ ์ ๊ทผํ ์ ์๋ค. (View์ ์ ๊ทผํ๋ ๊ฒ๋ง ํ์ํ๋ค๋ฉด view binding์, data binding์ด ์ ๊ณตํ๋ ๋ ๊ณ ๊ธ์ ๊ธฐ๋ฅ์ด ํ์ํ๋ค๋ฉด data binding์ ์ฌ์ฉํ๋ฉด ๋๋ค. )
15. Data Binding: Views
- ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ๋ ์ด์์ ๋ด์ ์๋ ๋ชจ๋ view์ ๋ํด์ ์ปดํ์ผ ์๊ฐ์ ๋ฐ์ธ๋ฉ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค.
- ๋ฐ์ธ๋ฉ ๊ฐ์ฒด๋ฅผ ํตํด view์ ์ ๊ทผํ๋ ๊ฒ์ด findViewById๋ณด๋ค ํจ์จ์ ์ด๋ค.
- findViewById ํ์์ ํธ์ถ๋ ๋๋ง๋ค ๋ฐ์ํ๋ค.
16. Data Bind: Data
19. ConstraintLayout: ColorMyViews App
ConstraintLayout์ ์ด์
- ์คํฌ๋ฆฐ๊ณผ ํด์๋์ ๋ง์ถฐ responsiveํ๊ฒ ๋ง๋ค ์ ์๋ค.
- ๋๊ฐ flatter view hierarchy๋ฅผ ๊ฐ๋๋ค.
- view๋ค์ ๋ฐฐ์น์ ์ต์ ํ๋ ๋ ์ด์์
- Free-form: ์ด๋์ ๋ฐฐ์นํด๋ ์๋ํฐ๊ฐ ์ ์ฝ์กฐ๊ฑด ์ถ๊ฐํ๋๋ฐ ๋์์ ์ค๋ค.
22. Constraints
23. Ratio
Ratio๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ์กฐ๊ฑด
- view์ width๋ height๋ฅผ 0dp๋ก ์ค์ ํ์ฌ ๊ณ์ฐ๋ ๊ฒ์์ ์๋ ค์ค.
- dimension ratio๋ฅผ ์ค์ .
24. Chaining
์๋ฐฉํฅ์ผ๋ก ์ฐ๊ฒฐ๋์ด ์์ผ๋ฉด chain.