๐Ÿ”ฅTIL๐Ÿ”ฅ์ŠคํŒŒ๋ฅดํƒ€ | ์•ˆ๋“œ๋กœ์ด๋“œ UI

hyihyiยท2023๋…„ 12์›” 12์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
17/69
post-thumbnail

์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ๊ฐœ๋ฐœ ์ž…๋ฌธ 3,4์ฃผ์ฐจ ๊ฐ•์˜ ์ •๋ฆฌ

Android UI - Widget

UI : User Interface

- View๋ž€?

์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ์˜ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ธฐ๋ณธ ๋‹จ์œ„

  • ๋ทฐ์˜ ๊ตฌ์„ฑ
    Widget
    Layout

- Widget์ด๋ž€?

๋Œ€ํ‘œ์ ์ธ ์œ„์ ฏ์€ TextView, EditText, Button๋“ฑ์ด ์žˆ์Œ

  • View
    ๋ทฐ ํด๋ž˜์Šค๋Š” ๋ชจ๋“  Ui ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋ถ€๋ชจ ํด๋ž˜์Šค
    id : UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ณ ์œ ํ•˜๊ฒŒ ์‹๋ณ„ํ•˜๋Š” ์‹๋ณ„์ž
    layout_width, layout_height๋Š” ํ•„์ˆ˜ ์†์„ฑ

px(pixels), in(inches), mm(millimeters)
: pixel ๋ฐฉ์‹์œผ๋กœ view์˜ ํฌ๊ธฐ๋ฅผ ์„ค์ •ํ•˜๋ฉด, ๋””์Šคํ”Œ๋ ˆ์ด์˜ ํ•ด์ƒ๋„์— ๋”ฐ๋ผ view์˜ ํฌ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค.
โ†’ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ ๋•Œ๋ฌธ์— dp๋ผ๋Š” ๋‹จ์œ„๋ฅผ ์“ด๋‹ค

dp : ๋ฐ€๋„์˜ ๋…๋ฆฝ์ ์ธ ๋‹จ์œ„

์Šคํฌ๋ฆฐ์˜ ์‹ค์ œ ๋‹จ์œ„๋Š” px
px๋‹จ์œ„๋Š” ํ™”๋ฉด์˜ ์ „์ฒด ํ™”๋ฉด ํฌ๊ธฐ์™€ ์ƒ๊ด€์—†์ด ์ง€์ •ํ•œ ์ˆ˜์น˜๋งŒํผ ํ‘œ์‹œ๋˜๋Š” ์ ˆ๋Œ€์  ํ‘œ์‹œ ๋‹จ์œ„

dp(dotsperinch) : DPI๋Š” 1์ธ์น˜์— ๋“ค์–ด๊ฐ€๋Š” ํ”ฝ์…€์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„์ด๋‹ค.

ํ…์ŠคํŠธ๋ทฐ์˜ ์‚ฌ์ด์ฆˆ๋Š” dp๋ฅผ ์ฃผ๊ฒŒ ๋˜๋ฉด ํ•ด์ƒ๋„๊ฐ€ ๋‹ฌ๋ผ์ง์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์ปค์ง€๊ฑฐ๋‚˜ ์ž‘์•„์ง€๊ฑฐ๋‚˜ ํ•˜๋Š”๋ฐ ์ด๋ฏธ์ง€๋ทฐ๋Š” ๊นจ์งˆ ์ˆ˜๋„ ์žˆ์–ด ์ž๋™์œผ๋กœ ๋‹ฌ๋ผ์ง€์ง€ ์•Š๋Š”๋‹ค.
๋Œ€์‹  ๊ฐ ๋””๋ฐ”์ด์Šค์— ๋งž๋Š” ์‚ฌ์ด์ฆˆ๋กœ 5์žฅ์„ ๋„ฃ์–ด๋†“๋Š”๋‹ค.
์•ฑ์ด ์•Œ์•„์„œ ํ•ด์ƒ๋„์˜ ํด๋”์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ๋‹ค ์“ด๋‹ค
drawble์— hepi, xhdpi, mdpi, xhdpi, xxhdpi, xxxhdpi, zh-xhdpi ํด๋”๋ณ„๋กœ ๋„ฃ์–ด์ค€๋‹ค

-์‹ค๋ฌด์—์„œ์˜ ๋ฒ„ํŠผ ๋””์ž์ธ
๋””์ž์ด๋„ˆ๊ฐ€ ๋ฒ„ํŠผ์„ ๋””์ž์ธ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฏธ์ง€๋ฒ„ํŠผ์„ ์ œ์ผ ๋งŽ์ด ์“ด๋‹ค
normal / pressd / disabled ์ด 3์žฅ์˜ ์ด๋ฏธ์ง€๊ฐ€ ํ•„์š”ํ•˜๋‹ค
ํ•ด์ƒ๋„ ๋ณ„๋กœ ์ด 15๊ฐœ์˜ ์ด๋ฏธ์ง€๊ฐ€ ํ•„์š”ํ•˜๋‹ค

-9 patch ์ด๋ฏธ์ง€

์ด๋ฏธ์ง€์—์„œ ๋Š˜์–ด๋‚  ์ˆ˜ ์žˆ๋Š” ์˜์—ญ๊ณผ ์›๋ณธ ํฌ๊ธฐ๋Œ€๋กœ ํ‘œ์‹œ๋˜์–ด์•ผ ํ•  ๋ถ€๋ถ„์„ ๊ตฌ๋ถ„ํ•˜๋ฉฐ ์ด๋ฏธ์ง€๊ฐ€ ๋Š˜์–ด๋‚˜๊ฑฐ๋‚˜ ์ค„์–ด๋“ค๋”๋ผ๋„ ์›๋ณธ์ด๋ฏธ์ง€ ํ˜•ํƒœ๋ฅผ ์œ ์ง€ํ•˜๋„๋ก ๋งŒ๋“ค์–ด์ง„ ์ด๋ฏธ์ง€
๊ฐœ๋ฐœ์ž๊ฐ€ ํ•  ๊ฑด ์•„๋‹ˆ๊ณ  ๋””์ž์ด๋„ˆ๊ฐ€ 9-patch๋กœ ์ž‘์—…๋œ ์ด๋ฏธ์ง€๋ฅผ ์ฃผ๋ฉด ์ ์šฉ์„ ์‹œํ‚ค๋ฉด ๋œ๋‹ค

Android UI - Layout

- Layout๋ž€?

View๋ฅผ ์ •๋ ฌํ•˜๋Š” ๊ธฐ๋Šฅ

-์Šคํƒ€์ผ
View ๋˜๋Š” ์ฐฝ์˜ ๋ชจ์–‘๊ณผ ํ˜•์‹์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ ๋ชจ์Œ
๊ฐœ๋ณ„ ์œ„์ ฏ์— ์„ค์ •
์—ฌ๋Ÿฌ ๊ฐœ์˜ ์œ„์ ฏ์˜ ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ํ•œ ๊บผ๋ฒˆ์— ๋ฐ”๊พธ๊ณ  ์‹ถ์„ ๋•Œ
res/values/styles.xml์— ์Šคํƒ€์ผ ์ถ”๊ฐ€

-ํ…Œ๋งˆ
๊ฐœ๋ณ„View๊ฐ€ ์•„๋‹ˆ๋ผ ์ „์ฒด Activity ๋˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ
์œ„์ ฏ์ด ์•„๋‹Œ ์•กํ‹ฐ๋น„ํ‹ฐ์— ์„ค์ •

Intent๋ž€?

์ผ์ข…์˜ ๋ฉ”์‹œ์ง€ ๊ฐ์ฒด
intent๋ฅผ ์‚ฌ์šฉํ•ด ๋‹ค๋ฅธ ์•ฑ ๊ตฌ์„ฑ์š”์†Œ๋กœ ์ž‘์—…์„ ์š”์ฒญํ•  ์ˆ˜ ์žˆ์Œ

  • ๋ช…์‹œ์  ์ธํ…ํŠธ
    ํŠน์ •ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง์ ‘์ ์œผ๋กœ ํ˜ธ์ถœํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์ธํ…ํŠธ

  • ์•”์‹œ์  ์ธํ…ํŠธ
    ํŠน์ •ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ช…์‹œํ•˜์ง€ ์•Š๊ณ  ์ˆ˜ํ–‰ํ•˜๊ณ ์ž ํ•˜๋Š” ์ผ๋ฐ˜์ ์ธ ์ž‘์—…์„ ์ธํ…ํŠธ ๊ฐ์ฒด์— ์„ค์ •ํ•˜์—ฌ startActivity() ๋ฉ”์†Œ๋“œ๋กœ ๋„˜๊น€.
    ์ด ๋•Œ, ์•ˆ๋“œ๋กœ์ด๋“œ ์‹œ์Šคํ…œ์€ ์ด intent๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์ ํ•ฉํ•œ ์ธํ…ํŠธ ํ•„ํ„ฐ๋ฅผ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฐพ์•„ ์‹คํ–‰์‹œํ‚ด.

๋งŒ์•ฝ ๋‚ด๊ฐ€ mp3 ํŒŒ์ผ์„ ํ”Œ๋ ˆ์ด ํ•  ์ˆ˜ ์žˆ๋Š” ์•ฑ์„ ๋งŒ๋“ค์—ˆ๊ณ  ์žฌ์ƒํ‚ฌ ์ˆ˜ ์žˆ๋Š” ์•ฑ์„ ์‹คํ–‰ํ•ด๋‹ฌ๋ผ๊ณ  ์‹œ์Šคํ…œ์„ ํ˜ธ์ถœํ•˜๋ฉด ์‹œ์Šคํ…œ์ด ์ธํ…ํŠธ ํ•„ํ„ฐ๋ฅผ ๋‹ค ๋’ค์ง.
๊ทธ ํ•„ํ„ฐ ์•ˆ์— mp3 ํŒŒ์ผ์„ ์žฌ์ƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ •์˜๋œ ์•ฑ ๋ฆฌ์ŠคํŠธ๋ฅผ ์•„๋ž˜์˜ ํ˜•์‹์œผ๋กœ ๋ณด์—ฌ์คŒ

๋‚ด๊ฐ€ pdf ๋ทฐ์–ด ์•ฑ์„ ๋งŒ๋“ฆ
์ธํ…ํŠธ ํ•„ํ„ฐ์— ๋‚ด ์•ฑ์ด pdf๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ์ •์˜ํ•ด๋†“์Œ
๋‹ค๋ฅธ ์•ฑ์—์„œ pdf๋ฅผ ๋ณด๋Š” ๊ธฐ๋Šฅ์ด ์‹คํ–‰๋  ๋•Œ ๋‚ด ์•ฑ์ด ๋ถˆ๋ฆด ์ˆ˜๋„ ์žˆ๋‹ค.

profile
์ž์œ ๋กญ๊ฒŒ ์“ด ๋‚˜์˜ ์ž์œ ๋กœ์šด Development voyageโ›ต

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 12์›” 15์ผ

์ข‹์€ ๊ธ€ ์ž˜ ๋ดค์Šต๋‹ˆ๋‹ค! layout๊ณผ intent์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๊ฐ€์š”๐Ÿ˜†๐Ÿ˜†

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ