Material Design之视图状态改变

最新推荐文章于 2022-09-29 16:45:15 发布

Sunzxyong

最新推荐文章于 2022-09-29 16:45:15 发布

阅读量3.1k

点赞数 4

分类专栏： Android 5.x Material Design 使用符合Material Design的设计小栈文章标签： android 动画 Material 视图状态

本文链接：https://blog.csdn.net/u010687392/article/details/48240181

版权

Android 5.x Material Design 使用同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

符合Material Design的设计小栈

15 篇文章 31 订阅

订阅专栏

视图状态改变是通过StateListAnimator动画集来改变View的状态的，它可以使View在不同状态下发生不同的变化，如下是在drawable目录下定义一个StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="10"
            android:valueType="floatType"/>
    </set>
</item>
<item android:state_pressed="false">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="0"
            android:valueType="floatType"/>
    </set>
</item>
</selector>

上述动画是定义了在视图按下时候，视图往Z轴正方向提升，松开时候又恢复到原始位置，然后把该StateListAnimator设置给对应的View即可：android:stateListAnimator=""

设置StateListAnimator有两种方式：

1、通过xml设置：

设置android:stateListAnimator=“”

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_margin="16dp"
        android:clickable="true"
        android:stateListAnimator="@drawable/style3"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp"
        app:cardUseCompatPadding="false" />

2、通过代码设置：

StateListAnimator listAnimator = AnimatorInflater.loadStateListAnimator(this, R.drawable.list_animator);
mView.setStateListAnimator(listAnimator);

如下是个Demo：

这里写图片描述

第一个动画的StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="10"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="45"
                android:valueType="floatType"/>
        </set>
    </item>
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

第二个动画的StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="10"
            android:valueType="floatType"/>
    </set>
</item>
<item android:state_pressed="false">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="0"
            android:valueType="floatType"/>
    </set>
</item>
</selector>

第三个动画的StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="360"
                android:valueType="floatType"/>
        </set>
    </item>
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>