Android 벡터 그림 의 VectorDrawable 클래스 는 색 채 를 자 유 롭 게 채 웁 니 다.
10668 단어 Android벡터 그래프VectorDrawable
콘 셉 트
그렇게 많은 말 을 했 는데 도 홈 페이지 에서 어떻게 묘 사 했 는 지 보 자.
xml 정의
이렇게 간단 한 한 마디.
사용법
1.삼각형 을 그 려 다음 그림 을 그린다.
먼저 vectorrdrawable.xml 를 정의 합 니 다.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600" >
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
대문자 절대 소문 자 상대 매개 변수 에 쉼표 를 붙 이 고 canvas 와 그리 기 차이 가 많 지 않 습 니 다.마지막 A,rx 와 ry 는(x,y)를 축 으로 하 는 x 축 과 y 축의 반지름 을 말 합 니 다.x-rotation 은 x 축 회전 각 도 를 말 합 니 다.large-arc-flag 는 0 일 때 작은 호 도 를 나타 내 고 1 시 에 큰 호 도 를 취하 고 sweep-flag 0 은 시계 반대 방향 을 취하 고 1 은 시계 방향 을 따 릅 니 다.아래 그림 과 결합 하여 이해 하 다.
여기에 large-arc-flag=0,sweep-flag=0 으로 path 를 써 서 진정한 효 과 를 보십시오.코드 는 다음 과 같 습 니 다.
<path
android:name="v"
android:strokeColor="#000000"
android:strokeWidth="2"
android:pathData="A 10 10 0 0 0 100 200"
/>
위 에서 말 한 것 과 같 죠!
2.하트 모양 을 그 려 주세요.
코드 는 다음 과 같 습 니 다:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="256dp"
android:width="256dp"
android:viewportWidth="32"
android:viewportHeight="32">
<!-- draw a path -->
<path android:fillColor="#8fff"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>
ps:간단 한 명령 을 알 았 습 니 다.그러면 svg 이렇게 많은 명령,안 드 로 이 드 에 이렇게 많은 icon 이 있 는데 자신 이 그 릴 수 없 잖 아 요.우 리 는 어떻게 이런 명령 을 배우 고 이런 icon 을 그 릴 수 있 습 니까?다행히 학습 명령 은 안 드 로 이 드:path 규칙 으로 icon 의 pathData 데 이 터 를 그 릴 수 있 습 니 다.이렇게 하면 우 리 는 자신 이 원 하 는 데 이 터 를 그 릴 수 있다.
ImageView 배경 에 어떻게 쓰 죠?간단 합 니 다.아래 코드 를 보 세 요.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/vectordrawable" />
</LinearLayout>벡터 애니메이션 AnimatedVectorDrawable
홈 페이지 데모 로 테스트 하 겠 습 니 다.
새 xml 파일 vectordrawable.xml,drawable 에 넣 으 면 코드 는 다음 과 같 습 니 다.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600" >
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector_drawable" >
<target
android:name="rotationGroup"
android:animation="@anim/rotation" />
<target
android:name="v"
android:animation="@anim/path_morph" />
</animated-vector>새 rotation 과 pathmorph 두 애니메이션 은 anim 폴 더 에 놓 여 있 습 니 다.코드 는 다음 과 같 습 니 다.
rotation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType"/>
</set>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/image_view"
android:layout_width="400dp"
android:layout_height="400dp"
app:srcCompat="@drawable/vector_drawable"/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/image_view"
android:layout_width="400dp"
android:layout_height="400dp"
app:srcCompat="@drawable/vector_drawable_anim" />
</LinearLayout>
ImageView imageView = (ImageView) findViewById(R.id.image_view);
Drawable drawable = imageView.getDrawable();
//AnimatedVectorDrawableCompat Animatable
if (drawable instanceof Animatable){
((Animatable) drawable).start();
}
이렇게 해서 우 리 는 간단 한 애니메이션 을 실현 했다.
참고 글:어떻게 안 드 로 이 드 벡터 그림 VectorDrawable 을 돌 립 니까?
소스 코드 내리 치기:VectorDrawable 클래스 자 유 롭 게 색 채 우기
이상 은 본 고의 모든 내용 입 니 다.여러분 이 안 드 로 이 드 소프트웨어 프로 그래 밍 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
