簡評:使用 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
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對創新互聯的支持。
文章名稱:聊一聊Android中的StateListAnimator
本文URL:http://m.kartarina.com/article2/pihpic.html
成都網站建設公司_創新互聯,為您提供網站排名、域名注冊、虛擬主機、網站營銷、ChatGPT、網站設計
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯