[android] VectorDrawable 에 대한 이야기

[android] VectorDrawable 에 대한 이야기

https://blog.stylingandroid.com/vectordrawables-part-1/

-

LOS 부터 등장한 녀석으로 SVG 형식으로 xml 을 정의하여 drawable 로 사용할 수 있다.

-

V 1.4. 이전에서는 android studio 에서는 preview 를 제대로 그리지 못하는 이슈가 있지만, 이후버전에서는 수정됨.

-

VectorDrawable 을 사용하면 각 해상도에 필요한 res 를 넣어주지 않아도 되서 app size 가 많이 절약된다.

-

drawable/android.xml

<?xml version="1.0" encoding="utf-8"?>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:viewportWidth="500"

    android:viewportHeight="500"

    android:width="500px"

    android:height="500px">

    <group android:name="android">

        <group android:name="head_eyes">

            <path

                android:name="head"

                android:fillColor="#9FBF3B"

                android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />

            <path

                android:name="left_eye"

                android:fillColor="#FFFFFF"

                android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />

            <path

                android:name="right_eye"

                android:fillColor="#FFFFFF"

                android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />

        </group>

        <group android:name="arms">

            <path

                android:name="left_arm"

                android:fillColor="#9FBF3B"

                android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />

            <path

                android:name="right_arm"

                android:fillColor="#9FBF3B"

                android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />

        </group>

        <path

            android:name="body"

            android:fillColor="#9FBF3B"

            android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />

    </group>

</vector>

위의 코드는 이 녀석을 그린다.

-

vector 로 animation 을 하려면 animated-vector 를 정의하여 assign 해줘야 한다.

drawable/animated_android.xml

<?xml version="1.0" encoding="utf-8"?>

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/android">

 

    <target

        android:animation="@animator/shrug"

        android:name="head_eyes" />

 

    <target

        android:animation="@animator/shrug"

        android:name="arms" />

</animated-vector>

animator/shrug.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator

        android:propertyName="translateY"

        android:valueType="floatType"

        android:valueFrom="0"

        android:valueTo="-10"

        android:repeatMode="reverse"

        android:repeatCount="infinite"

        android:duration="250" />

</set>

덧붙여 다음과 같이 animate 를 시작시켜줘야 한다.

그렇지 않으면 그냥 static image 이다.

ImageView androidImageView = (ImageView) findViewById(R.id.android);

Drawable drawable = androidImageView.getDrawable();

if (drawable instanceof Animatable) {

     ((Animatable) drawable).start();

}

head_eyes 와 arms 에 대해서 

translateY, reverse & infinite animation 을 주었기 때문에 팔과 머리 뚜껑부위가 위아래로 계속 animation 한다.

-

animator vector 에 다음과 같은 animator 를 주면 path 가 그려지는 것을 볼 수 있겠다.

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

    android:propertyName="trimPathEnd"

    android:valueFrom="0"

    android:valueTo="1"

    android:duration="5000"

    android:valueType="floatType"

    android:interpolator="@android:interpolator/linear" />

-

point 를 직접 operate 하여 animation 줄 수도 있다.

예를 들어 square 를 triangle 로 바꾸려면..

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="1000"

    android:interpolator="@android:interpolator/decelerate_cubic"

    android:repeatMode="reverse"

    android:repeatCount="1"

    android:propertyName="pathData"

    android:valueType="pathType"

    android:valueFrom="M100,100L400,100L400,400L100,400z"

    android:valueTo="M250,100L250,100L400,400L100,400z" />

Android, android studio, animatable, animated-vector, animation, animator vector path route, drawable, Duration, fillcolor, floattype, Group, group name, height, infinite, L, Los, M, Name, objectanimator, operate, Path, path name, pathdata, pathtype, Point, Preview, propertyname, repeatcount, repeatmode, Reverse, start, static image, Target, translatey, trimpathend, valuefrom, valueto, valuetype, Vector, vectordrawable, viewportheight, viewportwidth, width, xml, [android] VectorDrawable 에 대한 이야기