Android에서 SVG 사용

SVG 소개

SVG의 파일에 그림을 그리는 정보를 저장하고 그림을 사용할 때 그림을 그리기 때문에 그림을 표시할 때 더 많은 시간을 들여 자원을 소모한다.

SVG의 파일 크기는 이미지의 픽셀 정보를 저장하지 않으므로 기존 비트맵 파일보다 훨씬 작습니다.

SVG의 파일에서 그려진 이미지는 벡터 그래프이기 때문에 진실성이 없는 문제가 존재하지 않고 이론적으로 어떠한 단계의 축소도 지원하며 전통적인 비트맵보다 적응성이 강하다.

SVG 단순화
SVG 파일 가져오기
SVG 이미지 다운로드 주소 다운로드할 이미지 선택, 다운로드 시svg 다운로드 선택
svg2android상svg 그림을android의drawable 텍스트로 변환
android에svg 그림 보이기
drawable 폴더에 새 파일을 만들고 이전에 변환된 텍스트 정보를 안에 복사합니다

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    android:width="1024dp"
    android:height="1024dp"
    android:viewportHeight="1024"
    android:viewportWidth="1024">

    "#1296db"
        android:pathData="M693.403-9.263l-376.691 4.628c-93.005 1.142-141.47 64.931-141.47
121.987v760.555c0 70.909 48.497 147.571 146.098
145.113l367.435-9.257c88.235-2.223 160.61-37.038
160.001-135.856l-4.628-751.298c-0.55-89.394-34.658-137.298-150.745-135.872zM777.275
882.536c0 38.027-35.535 68.978-79.226 68.978h-372.081c-43.673
0-79.207-30.951-79.207-68.978v-755.926h0.018c0-38.043 35.535-68.978
79.207-68.978h372.063c43.673 0 79.226 30.937 79.226 68.978zM737.025
124.46h-450.014c-5.407 0-9.776 3.851-9.776 8.617v669.925c0 4.749 4.369 8.633
9.776 8.633h450.014c5.407 0 9.794-3.867
9.794-8.633v-669.925c0-4.766-4.387-8.617-9.794-8.617zM704.108
766.6l-379.551-4.628-4.628-592.51 379.551 4.628zM512.018 825.994c-32.969
0-62.476 23.634-62.476 52.691 0 29.058 33.092 58.667 72.035 51.497 32.423-5.97
56.768-24.541 56.768-53.583 0-29.058-33.359-50.606-66.327-50.606zM512.018
914.128c-22.191 0-40.231-15.901-40.231-35.443s18.041-35.459 40.231-35.459c22.173
0 50.361 14.874 50.361 34.416 0 19.542-28.188 36.486-50.361 36.486zM447.319
90.589c0-3.515 3.895-6.353 8.702-6.353h111.975c4.805 0 8.684 2.841 8.684 6.353 0
3.514-3.877 13.472-8.684 13.523l-111.975 1.195c-4.788
0.051-8.684-11.205-8.702-14.719z" />

레이아웃 파일의 이미지뷰에서 이 파일을 직접 호출합니다

  "@drawable/phone_svg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

setColorFilter()로 그림 색상 변경

        img_phone.setColorFilter(Color.RED);

호환성 문제
종속 패키지를 추가할 필요가 없습니다.
Gradle은 컴파일할 때 자동으로 Vectordrawable에 대응하는 비트맵 자원을 생성합니다. (지원하는 최저 sdk가api21보다 작으면 21보다 크면 호환성 문제가 존재하지 않습니다.) 비트맵과 벡터맵 자원을 동시에 포장하면 APK 패키지가 커집니다.다음 Gradle 구성에서 다음 해상도에서 비트맵 에셋을 생성하는 방법을 지정할 수 있습니다.

defaultConfig { 
      vectorDrawables.generatedDensities = ['hdpi','xxhdpi']
}

23.2+Support Library 사용(비트맵 자동 생성되지 않음)
build에 필요합니다.gradle 구성 파일에는 다음 구성이 추가됩니다.

android { 
     defaultConfig { 
           vectorDrawables.useSupportLibrary = true  
      }
  }

그리고 Vectordrawable 자원을 인용할 때 app:srcCompat를 사용하여android:src를 대체합니다
SVG 애니메이션
오픈소스 라이브러리 PathAnimView가 인터넷에 있습니다.

compile 'com.github.mcxtzhang:PathAnimView:V1.0.0'

다음은 간략한 절차입니다. 자세한 내용은 저자의 블로그 스피드 get 화식Path 1을 보고 png 이미지 2를 얻으며 vmde를 이용하여svg 형식의 vmde 다운로드 주소 3로 전환하고svg 이미지를 안드로이드 SVG to Vector Drawable 4로 전환하며 전환된 결과를strings에 쓰십시오. 아래와 같습니다.

 "toys">M 3.33 3.52 C 7.15 1.59 12.31 4.86 12.95 9.01 C 15.02 20.49 16.86 32.02 18.84
43.51 C 19.10 45.60 20.73 47.74 23.00 47.70 C 33.34 47.83 43.69 47.73 54.04
47.73 C 55.56 47.81 57.80 47.37 58.39 49.31 C 57.98 50.42 57.23 50.97 56.14
50.98 C 45.42 51.04 34.69 50.98 23.97 51.01 C 20.36 51.33 16.61 48.88 15.90
45.24 C 13.66 33.35 11.97 21.34 9.68 9.46 C 9.18 6.31 5.59 6.39 3.20 5.74 C 3.23
5.18 3.30 4.07 3.33 3.52 Z

5. 레이아웃 파일에 PathAnimView 컨트롤 사용

  "@+id/pathAnimView1"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginTop="260dp"
        android:background="@color/colorAccent"
        android:padding="5dp"/>

6. 코드에 애니메이션 로드

        pathAnimView1 = (PathAnimView) findViewById(R.id.pathAnimView1);
        SvgPathParser svgPathParser = new SvgPathParser();
        try {
            Path path = svgPathParser.parsePath(getString(R.string.toys));
            pathAnimView1.setSourcePath(path);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        pathAnimView1.startAnim();

참고 문장
SVG가 안드로이드에서의 응용 안드로이드 Vector 굴곡 호환의 길android에서svg 안드로이드 SVG 기술로 입문: 선 애니메이션 실현 원리

Android에서 SVG 사용

좋은 웹페이지 즐겨찾기