어떻게 안 드 로 이 드 벡터 그림 VectorDrawable 을 돌 립 니까?

안 드 로 이 드 는 5.0(API 레벨 21)부터 벡터 그림 을 지원 하기 시작 했다.벡터 그림 과 벡터 그림 이 무엇 인지 에 대해 어떤 장단 점 이 본 고의 관련 범위 안에 있 지 않 고 구체 적 으로 벡터 그림 백 과 를 참고 할 수 있다.그러나 여기 서 그 장점 을 제시 해 야 한다.
최소한 의 정 보 를 저장 하고 파일 크기 는 비트 맵 보다 작 으 며 파일 크기 는 물체 의 크기 와 무관 합 니 다.
벡터 도형 을 임의로 확대 하면 디 테 일 을 잃 거나 선명 도 에 영향 을 주지 않 습 니 다.벡터 도형 은 해상도 와 무관 하기 때 문 입 니 다.
상기 두 가지 장점 을 보면 프로젝트 에서 벡터 그림 을 사용 하면 적어도 우리 apk 가방 의 사 이 즈 를 줄 일 수 있 고 화면 이 적당 할 때 큰 편 의 를 제공 할 수 있 습 니 다.벡터 그림 은 해상도 와 무관 하기 때 문 입 니 다.
앞에서 도 말 했 듯 이 벡터 그림 은 21 에서 야 지원 하기 시작 했다.그럼 제 가 계속 호 환 하고 싶 으 면 어 떡 하 죠?이 문 제 를 예전 에 두 면 github 아래 에 네가 원 하 는 답 이 있다 고 말 할 것 이다.하지만 이 제 는 그렇게 말 하지 않 겠 습 니 다.얼마 전에 구 글 이 슈퍼 port library 를 업 그 레이 드 했 기 때문에 공식 적 으로 벡터 그림 을 뒤로 호 환 했 습 니 다.어떤 버 전 으로 호 환 되 는 지 물 어 보 려 면 벡터 그림 이 API 7 로 호 환 되 고 벡터 그림 애니메이션 이 API 11 로 호 환 되 는 지 알려 드 리 겠 습 니 다.
자,다음은 프로젝트 에서 벡터 그림 을 어떻게 사용 하 는 지 말씀 드 리 겠 습 니 다.
1.VectorDrawable 의 사용
공식 에 따 르 면 저 버 전에 서 벡터 그림 을 사용 하려 면 프로젝트 에 새로운 호 환 라 이브 러 리 슈퍼 port-vector-drawable 을 도입 해 야 하 며,appcompat-v7 라 이브 러 리 버 전 은 23.2.0+(글 을 쓰 면 23.2.1 이 발표 되 었 습 니 다).그리고 gradle 의 관련 설정 을 수정 해 야 합 니 다.gradle 이 구축 할 때 낮은 버 전(API 21 이하)에서 서로 다른 밀도 의 png 파일 을 만 들 지 않도록 해 야 합 니 다.안 드 로 이 드 studio 1.4 때 벡터 그림 을 지원 하기 때 문 입 니 다.
appcompat-v7 버 전 수정
compile 'com.android.support:appcompat-v7:23.2.0'
노트:여기 서 저 는 23.2.0 버 전의 appcompat-v7 라 이브 러 리 만 도 입 했 습 니 다.gradle 을 동기 화한 후에 슈퍼 port-vector-drawable-23.2.0 과 animated-vector-drawable-23.2.0 이라는 두 라 이브 러 리 를 컴 파일 했 습 니 다.
gradle 프로필 수정
만약 당신 의 gradle 플러그 인 버 전이 2.0 이하 라면,당신 은 이렇게 수정 해 야 합 니 다.

android {
 defaultConfig {
  //   gradle            png 
  generatedDensities = []
 }

 aaptOptions {
  additionalParameters "--no-version-vectors"
 }
}

만약 당신 의 gradle 플러그 인 버 전이 2.0+라면,당신 은 이렇게 수정 해 야 합 니 다.

android {
 defaultConfig {
  vectorDrawables.useSupportLibrary = true
 }
}

위의 이 몇 단계 의 수정 을 거 쳐 너 는 프로젝트 에서 벡터 그림 을 사용 할 수 있다.그럼 본 격 적 으로 어떻게 사용 하 는 지 말씀 드 리 겠 습 니 다.
android studio 는 우리 에 게 material icon 과 svg 파일 에서 벡터 그림 을 만 들 수 있 도록 Vector Asset Studio 도 구 를 제공 합 니 다.구체 적 인 용법 은 정부의 설명 문 서 를 참고 할 수 있 으 니 여 기 는 더 이상 말 하지 않 겠 다.
Android 에서 벡터 그림 은 xml 문서 형식 으로 존재 합 니 다.아래 와 같이 벡터 그림 을 정의 합 니 다.그 안에 이 벡터 그림 에 대한 데이터 정보 가 포함 되 어 있 습 니 다.

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:viewportHeight="24.0"
  android:viewportWidth="24.0">
  <path
    android:fillColor="#FF000000"
    android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM15.5,11c0.83,0 1.5,-0.67 1.5,-1.5S16.33,8 15.5,8 14,8.67 14,9.5s0.67,1.5 1.5,1.5zM8.5,11c0.83,0 1.5,-0.67 1.5,-1.5S9.33,8 8.5,8 7,8.67 7,9.5 7.67,11 8.5,11zM12,17.5c2.33,0 4.31,-1.46 5.11,-3.5L6.89,14c0.8,2.04 2.78,3.5 5.11,3.5z" />
</vector>

이것 은 제 가 material icon 을 통 해 생 성 된 것 입 니 다.이것 은 안 드 로 이 드 에서 Vector Drawable 과 대응 하 는 것 입 니 다.즉,가방 에 있 는 Vector Drawable Compat 와 호 환 되 는 것 입 니 다.
벡터 도형 을 정의 한 후에 우 리 는 일반적인 도형 처럼 그것 을 사용 할 수 있다.그러나 몇 가지 주의해 야 할 것 이 있다.
*android:src 속성 을 사용 하 는 곳 은 app:srcCompat 속성 으로 교체 해 야 합 니 다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.damon.vectordrawabledemo.MainActivity">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_mood_black_24dp" />
</RelativeLayout>

*src 속성 이 아 닌 곳 에서 벡터 그림 을 사용 할 때 벡터 그림 을 drawable 용기(예 를 들 어 StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable)로 감 싸 서 사용 해 야 합 니 다.그렇지 않 으 면 낮은 버 전에 서 잘못 보고 할 수 있다.
코드 에서 의 사용 은 일반적인 png 그림 과 다 를 것 이 없 으 며 같은 API 를 호출 합 니 다.
이렇게 해서 우 리 는 벡터 그림 을 우리 의 프로젝트 에 도입 했다.아래 에 나 는 몇 장의 그림 을 붙 여 벡터 그림 과 png 그림 의 차 이 를 비교 하여 벡터 그림 의 장점 을 보 여 주 었 다.
우선 png 의 원본 그림 과 큰 그림 입 니 다.
 

그 다음은 벡터 그림 의 원 도와 확대 그림 이다.


대 비 를 일목요연 하 게 하 다.또한 벡터 그림 의 xml 크기 는 655 바이트 에 불과 하고 해상도 가 다른 png 의 크기 를 합치 면 여러 k 가 있 습 니 다.벡터 그림 은 하나의 xml 만 유지 하고 png 는 여러 개의 그래 픽 자원 을 유지 해 야 합 니 다.
벡터 그림 xml 파일 이 지원 하 는 태그 와 속성 은 여기 서 참고 할 수 있 습 니 다.흔히 볼 수 있 는 충전,묘사,착색 등 을 포함 합 니 다.
2.벡터 그림 으로 애니메이션 제작
23.2 지원 라 이브 러 리 역시 벡터 그래 픽 애니메이션 에 대응 하 는 호 환 버 전 Animated Vector Drawable Compat 를 보 여 주 었 습 니 다.해당 하 는 호 환 패 키 지 는 animated-vector-drawable 이 고 xml 라벨 은 animated-vector 입 니 다.AnimatedVectorDrawable Compat 는 속성 애니메이션 형식 으로 VectorDrawable 을 구동 하여 애니메이션 을 실현 할 수 있 습 니 다.구체 적 으로 세 단계 로 나 누 어 가 야 합 니 다.
*VectorDrawableCompat 의 xml 정의

<vector xmlns:android="http://schemas.android.com/apk/res/android"
  <!--         -->
  android:width="500px"
  android:height="500px"
  <!--       -->
  android:viewportHeight="500"
  android:viewportWidth="500">
  <!--      path  subgroup    ，group           、  、  。                path subgroup   -->
  <group
    android:scaleX="5.0"
    android:scaleY="5.0">
    <!--   group path   name  ，                       -->
    <path
      android:name="star"
      android:pathData="M 50.0,90.0 L 82.9193546357,27.2774101308 L 12.5993502926,35.8158045183 L 59.5726265715,88.837672697 L 76.5249063296,20.0595700732 L 10.2916450361,45.1785327898 L 68.5889268818,85.4182410261 L 68.5889268818,14.5817589739 L 10.2916450361,54.8214672102 L 76.5249063296,79.9404299268 L 59.5726265715,11.162327303 L 12.5993502926,64.1841954817 L 82.9193546357,72.7225898692 L 50.0,10.0 L 17.0806453643,72.7225898692 L 87.4006497074,64.1841954817 L 40.4273734285,11.162327303 L 23.4750936704,79.9404299268 L 89.7083549639,54.8214672102 L 31.4110731182,14.5817589739 L 31.4110731182,85.4182410261 L 89.7083549639,45.1785327898 L 23.4750936704,20.0595700732 L 40.4273734285,88.837672697 L 87.4006497074,35.8158045183 L 17.0806453643,27.2774101308 L 50.0,90.0Z"
      android:strokeColor="@color/colorAccent"
      android:strokeWidth="2" />
  </group>
</vector>

*AnimatedVectorDrawableCompat 의 xml 정의

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vector_drawable">
  <target
    android:name="star"
    android:animation="@animator/star_anim" />
</animated-vector>

루트 요 소 는 animated-vector 이 고 필요 한 속성 이 있 습 니 다.android:drawable 은 구동 할 벡터 그림 대상 을 지정 합 니 다.하위 탭 target 은 구동 할 벡터 그림 의 group 과 path 의 이름 을 지정 하 는 데 사 용 됩 니 다.다른 한편,어떤 속성 애니메이션 을 사용 하여 group 과 path 의 속성 을 변화 시 켜 애니메이션 효 과 를 낼 지 지정 합 니 다.
*속성 애니메이션 만 들 기
trimPathStart 와 stroke Color 속성 을 구동 하 는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
  <objectAnimator
    android:duration="5000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:valueFrom="1"
    android:valueTo="0" />
  <objectAnimator
    android:duration="5000"
    android:propertyName="strokeColor"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:valueFrom="@color/colorAccent"
    android:valueTo="@color/colorPrimaryDark" />
</set>

이렇게 해서 준비 작업 이 다 되 었 다.우 리 는 벡터 애니메이션 을 사용 할 수 있다.ImageView 의 src 를 벡터 애니메이션 으로 변경 합 니 다.

 <ImageView
    android:id="@+id/image_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:srcCompat="@drawable/vector_drawable_anim" />

자바 코드 에서 애니메이션 시작 하기

 ImageView imageView = (ImageView) findViewById(R.id.image_view);
Drawable drawable = imageView.getDrawable();
//AnimatedVectorDrawableCompat   Animatable  
if (drawable instanceof Animatable){
  ((Animatable) drawable).start();
}

이렇게 해서 벡터 애니메이션 을 실현 하고 효과 도 를 보 세 요.

자,벡터 그림 과 벡터 그림 애니메이션 의 사용 에 대해 이렇게 많이 말 합 니 다.구체 적 인 세부 사항 과 xml 의 다른 속성 같은 것 을 어떻게 사용 하 는 지 는 공식 문 서 를 참고 할 수 있 고 직접 시도 해 보면 알 수 있 습 니 다.
문/DamonZh(약자)
링크