wenn Ihre Ansicht ist checkable
und auch Ihre minsdk > 21
können Sie versuchen, StateListAnimator
mit AnimatedVectorDrawable
verwenden, aber weil die appcompat
jetzt vectorDrawable
unterstützt und AnimatedVectorDrawable
und hat auch eine Einschränkung alle DrawableContainers
zur Verwendung Ich nehme nicht oben Ansatz.
Also lassen Sie mich Ihnen sagen, was funktionieren kann:
DrawableContainers die andere Drawables Ressourcen verweisen, die nur eine Vektor Ressource enthalten. Zum Beispiel eine StateListDrawable, die verweist auf andere Dateien, die einen Vektor enthalten.
von Chris Banes
Um zu erreichen, dass ich benutzerdefinierte ImageView
schaffen werde und jedes Mal darauf geklickt wird, müssen Sie morph
Funktion aufrufen entsprechende vectorAnimatorDrawable
auszuführen.
So Code und Demo:
public class ArrowToCheckMarkMorphingImageView extends ImageView {
private AnimatedVectorDrawable mArrowToCheckMark;
private AnimatedVectorDrawable mCheckMarkToArrow;
private boolean mIsShowingCheckMark;
public ArrowToCheckMarkMorphingImageView(Context context) {
super(context);
init();
}
public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
public void init(){
mIsShowingCheckMark = false;
mArrowToCheckMark =
(AnimatedVectorDrawable)getContext().getDrawable(R.drawable.arrow_to_checkmark);
mCheckMarkToArrow =
(AnimatedVectorDrawable)getContext().getDrawable(R.drawable.checkmark_to_arrow);
setImageDrawable(mArrowToCheckMark);
}
public void morph(){
final AnimatedVectorDrawable drawable
= mIsShowingCheckMark ? mCheckMarkToArrow : mArrowToCheckMark;
setImageDrawable(drawable);
drawable.start();
mIsShowingCheckMark = !mIsShowingCheckMark;
}
}
und MainActivity
:
public class MainActivity extends AppCompatActivity {
ArrowToCheckMarkMorphingImageView mArrowToCheckMarkImageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mArrowToCheckMarkImageView = (ArrowToCheckMarkMorphingImageView)findViewById(R.id.imageView);
mArrowToCheckMarkImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mArrowToCheckMarkImageView.morph();
}
});
}
}
in Layout-Datei es Ihnen gefällt verwenden müssen:
<yourpackage.ArrowToCheckMarkMorphingImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
/>
und Ressourcen für diejenigen, die will es zu versuchen:
res/Animator/arrow_to_checkmark
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="500"
android:propertyName="pathData"
android:valueFrom="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"
android:valueTo ="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"
android:valueType="pathType" />
<objectAnimator
android:duration="500"
android:propertyName="fillColor"
android:valueFrom="#FF0000FF"
android:valueTo="#FF00FF00" />
</set>
res/Animator/checkmark_to_arrow
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="500"
android:propertyName="pathData"
android:valueFrom="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"
android:valueTo ="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"
android:valueType="pathType" />
<objectAnimator
android:duration="500"
android:propertyName="fillColor"
android:valueFrom="#FF00FF00"
android:valueTo="#FF0000FF" />
</set>
res/ziehbar/arrow_to_checkmark
res/ziehbare/checkmark_to_arrow
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_checkmark_24dp">
<target
android:animation="@animator/checkmark_to_arrow"
android:name="checkmark"/>
</animated-vector>
res/ziehbare/ic_arrow_up_24dp
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:name="arrow"
android:fillColor="#FF0000FF"
android:pathData="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"/>
</vector>
res/ziehbare/ic_checkmark_24dp
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:name="checkmark"
android:fillColor="#FF00FF00"
android:pathData="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"/>
</vector>
Danke für diese Erklärung - In Würfen, genau diese Sache zu tun. Es scheint eine Menge Aufwand, d. H. Code/Dateien für eine ziemlich einfache Animation! –
@MarkKeen wollte nur tun, und die Antwort teilt den Code in mehreren Dateien für Struktur, imho ein wenig übertrieben, wird der Code ein bisschen kleiner, wenn Sie nicht Animation xmls aufteilen. Das Annotieren durch Teilen ist, dass Du die Pfaddaten in der Zeichnungsdatei und der Animation duplizieren musst – Adam