您好,登錄后才能下訂單哦!
簡評:使用 StateListAnimator 輕松實現 Material Design 效果。
Material Design 中最基礎的一條原則就是 'motion provides meaning',也就是當用戶和你的 app 交互時應當提供合理的視覺反饋。標準做法是使用官方提供的 StateListDrawable 來為控件實現交互效果。
StateListAnimator 是和 Material Design 一同在 API 21 引入的,可以用來方便的實現交互反饋的視覺效果,今天這篇文章就講解了 StateListAnimator 的用法。
在以前,我們處理 Button,TextView 等控件的點擊效果時,通常是定義一個 selector,為按下和普通情況分別設置顏色。但這樣的效果一方面不夠動人,另一方面也不符合 Material Design 的規范。
Material Design 規范推薦 Button 等控件應當以材質的方式表現,當接觸到手指時上升。因此 Material Design 對組件有了 z 軸這個概念,也就是高度。z 值越大,組件離界面底層(水平面)越遠,投影越重。
那我們怎么來實現組件在 z 軸(高度)上的變化效果呢?這就需要用到今天講到的 StateListAnimator 了。
首先,讓我們創建一個 animator 資源文件夾,在其中創建一個 selector_animator.xml:
<?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:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleX" android:valueTo="1.025" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleY" android:valueTo="1.025" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="4dp" android:valueType="floatType" /> </set> </item> <item> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleX" android:valueTo="1.0" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleY" android:valueTo="1.0" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> </set> </item> </selector>
代碼很簡單,當處于按下情況時,組件沿 x, y 軸擴大 1.025 倍并升高 4dp(會在組件四周產生投影效果)。
需要注意其中的 propertyName 屬性目前支持:
然后在 layout 文件中設置組件的 stateListAnimator 值就可以啦:
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" ... android:stateListAnimator="@animator/selector_animator" />
因為知乎不支持 gif,感興趣的同學可以點擊原文鏈接查看實現效果。
原文:StateListAnimator
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。