Fresco: SVG๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ด์œ 

์— ๋งŒ๋“  2016๋…„ 02์›” 21์ผ  ยท  13์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/fresco

???? SVG๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ด์œ  ???

enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

SVG ์ง€์›์„ ์›ํ•˜๋Š” ์œ ์ผํ•œ ์‚ฌ๋žŒ์€ ์•„๋‹™๋‹ˆ๋‹ค. Fresco๊ฐ€ ์ง€์›์„ ํ•ด์ค€๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์ด ํ•„์š”ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— Glide๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  13 ๋Œ“๊ธ€

์ง€๊ธˆ๊นŒ์ง€ SVG์— ๋Œ€ํ•œ ์‚ฌ์šฉ ์š”์ฒญ์€ ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ์ด๊ฒƒ์„ ์š”๊ตฌํ•˜๋Š” ์œ ์ผํ•œ ์‚ฌ๋žŒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ, Android๋Š” ์ƒˆ๋กœ์šด ์ง€์› v7 ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์˜คํ”ˆ ์†Œ์Šค SVG ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
์ปดํŒŒ์ผ 'de.g reenrobot:androidsvg: 1.2.2-beta-1-tweaked-2'

Android ์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๋ฒ„์ „ 23.2.0(2016๋…„ 2์›”)
http://developer.android.com/tools/support-library/index.html
API ๋ ˆ๋ฒจ 7 ์ด์ƒ์—์„œ ์‹คํ–‰๋˜๋Š” ์•ฑ์— VectorDrawable ์ž์‚ฐ์— ๋Œ€ํ•œ ์ง€์›์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. AnimatedVectorDrawable ์ž์‚ฐ์€ API ๋ ˆ๋ฒจ 11 ์ด์ƒ์—์„œ๋„ ์ง€์›๋ฉ๋‹ˆ๋‹ค. ๋ฒกํ„ฐ ์ž์‚ฐ์€ ์ด๋ฏธ์ง€ ์ž์‚ฐ๋ณด๋‹ค ์ƒ๋‹นํžˆ ์ž‘์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ ์—ฌ๋Ÿฌ ์žฅ์น˜ ํ™”๋ฉด์„ ์ง€์›ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์ž์‚ฐ์˜ ์–‘์„ ์ค„์—ฌ ์•ฑ ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

SVG ์ง€์›์„ ์›ํ•˜๋Š” ์œ ์ผํ•œ ์‚ฌ๋žŒ์€ ์•„๋‹™๋‹ˆ๋‹ค. Fresco๊ฐ€ ์ง€์›์„ ํ•ด์ค€๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์ด ํ•„์š”ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— Glide๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋ฒกํ„ฐ ๋“œ๋กœ์–ด๋ธ”์ด ์•ˆ๋“œ๋กœ์ด๋“œ ์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ง€์›๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฒกํ„ฐ ๋“œ๋กœ์–ด๋ธ”์„ progressBarImage๋กœ ์‚ฌ์šฉํ•˜์ง€๋งŒ ํ”„๋ ˆ์Šค์ฝ”์—์„œ๋Š” ๋ฒกํ„ฐ ์‚ฌ์šฉ์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ์Šคํ”„๋ฆฐํŠธ์— ์ด๊ฒƒ์„ ๋„ฃ์–ด์ฃผ์„ธ์š”, ๋งŽ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค!

Android Studio์—๋Š” New->Vector Asset-> svg๋ฅผ vectordrawable๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  appcompat v7 23.2.0 up, app:srcCompat= "@drawable/vectordrawable" ์„ ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” vectordrawable์— svg๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Android ์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๋ฒ„์ „ 23.2.0(2016๋…„ 2์›”)
http://developer.android.com/tools/support-library/index.html

ํ˜„์žฌ๋กœ์„œ๋Š” SVG๋ฅผ ์ง€์›ํ•  ๊ณ„ํš์ด ์—†์Šต๋‹ˆ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๊ธฐ์—ฌํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋ฒกํ„ฐ ๋“œ๋กœ์–ด๋ธ”์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ #1176์„ ์ฐธ์กฐํ•˜์„ธ์š”.

fresco๋Š” SVG๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฒกํ„ฐ ๋“œ๋กœ์–ด๋ธ”์€ React ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. React ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ์ž‘์—…ํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์€ svg๋ฅผ png๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ๊ฒฝ์šฐ SVG ๋””์ฝ”๋”๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก Fresco์šฉ ์‚ฌ์šฉ์ž ์ •์˜ ๋””์ฝ”๋”๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ œ ์‚ฌ์šฉ์ž ์ •์˜ SVG ๋””์ฝ”๋”์™€ ๋“œ๋กœ์–ด๋ธ” ํŒฉํ† ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ๋งค์šฐ ๊ฐ„๋‹จํ•œ ์˜ˆ๋Š” ์—ฌ๊ธฐ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค: https://github.com/facebook/fresco/tree/master/samples/showcase/src/main/java/com/facebook/fresco/samples/showcase/ ์ด๋ฏธ์ง€ ํ˜•์‹/svg

์ด์ œ ์‚ฌ์šฉ์ž ์ •์˜ SVG ๋””์ฝ”๋”์™€ ๋“œ๋กœ์–ด๋ธ” ํŒฉํ† ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ๋งค์šฐ ๊ฐ„๋‹จํ•œ ์˜ˆ๋Š” ์—ฌ๊ธฐ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค: https://github.com/facebook/fresco/tree/master/samples/showcase/src/main/java/com/facebook/fresco/samples/showcase/ ์ด๋ฏธ์ง€ ํ˜•์‹/svg

SimpleDraweeView์— ๋Œ€ํ•œ ์œ„์˜ ์ฐธ์กฐ ๋งํฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ svg ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์ด 2๊ฐœ์˜ ํŒŒ์ผ์„ ๋ณต์‚ฌํ•˜์—ฌ ๋ถ™์—ฌ๋„ฃ์€ ๋‹ค์Œ Fresco๊ฐ€ ์ดˆ๊ธฐํ™”๋  ๋•Œ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

https://github.com/facebook/fresco/blob/master/samples/showcase/src/main/java/com/facebook/fresco/samples/showcase/CustomImageFormatConfigurator.java#L37

๊ทธ๋Ÿฌ๋‚˜ SVG ์ƒ˜ํ”Œ์€ ๋งค์šฐ ๊ธฐ๋ณธ์ ์ด๋ฉฐํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰