聊一聊Android中的StateListAnimator
簡評:使用 StateListAnimator 輕松實現(xiàn) Material Design 效果。
Material Design 中最基礎的一條原則就是 'motion provides meaning',也就是當用戶和你的 app 交互時應當提供合理的視覺反饋。標準做法是使用官方提供的 StateListDrawable 來為控件實現(xiàn)交互效果。
StateListAnimator 是和 Material Design 一同在 API 21 引入的,可以用來方便的實現(xiàn)交互反饋的視覺效果,今天這篇文章就講解了 StateListAnimator 的用法。
在以前,我們處理 Button,TextView 等控件的點擊效果時,通常是定義一個 selector,為按下和普通情況分別設置顏色。但這樣的效果一方面不夠動人,另一方面也不符合 Material Design 的規(guī)范。
Material Design 規(guī)范推薦 Button 等控件應當以材質的方式表現(xiàn),當接觸到手指時上升。因此 Material Design 對組件有了 z 軸這個概念,也就是高度。z 值越大,組件離界面底層(水平面)越遠,投影越重。
那我們怎么來實現(xiàn)組件在 z 軸(高度)上的變化效果呢?這就需要用到今天講到的 StateListAnimator 了。
首先,讓我們創(chuàng)建一個 animator 資源文件夾,在其中創(chuàng)建一個 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 屬性目前支持:
- translationX, translationY: 控制組件沿 x 和 y 軸移動多少距離。
- rotation, rotationX, rotationY: 繞中心點旋轉,設置 rotation 是 2D 平面旋轉,rotationX 和 rotationY 分別是從屏幕內向屏幕外旋轉和從左到右旋轉,均為 3D 旋轉。
- scaleX, scaleY: 沿 x, y 軸的縮放比例,設置為 1.5 即 1.5 倍。
- pivotX, pivotY: 設置組件的中心點在哪里,scale 和 rotation 都會根據(jù)設置的中心點來變化,默認為幾何中心。
- x, y: 組件最終要出現(xiàn)在相對其父容器的位置。
- alpha: 組件的透明度,值的范圍從 0 到 1,為 0 時完全透明。
然后在 layout 文件中設置組件的 stateListAnimator 值就可以啦:
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" ... android:stateListAnimator="@animator/selector_animator" />
因為知乎不支持 gif,感興趣的同學可以點擊原文鏈接查看實現(xiàn)效果。
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。
相關文章
Android 自定義view實現(xiàn)進度條加載效果實例代碼
這篇文章主要介紹了Android 自定義view實現(xiàn)進度條加載效果實例代碼,需要的朋友可以參考下2017-08-08Android控件Spinner實現(xiàn)下拉列表及監(jiān)聽功能
這篇文章主要介紹了Android控件Spinner實現(xiàn)下拉列表及監(jiān)聽功能,這是在Web開發(fā)中一個必不可少的交互性組件,而在Android中的對應實現(xiàn)就是Spinner。需要的朋友可以參考下2018-07-07Android 給圖片加上水印的示例代碼(支持logo+文字)
本篇文章主要介紹了Android 給圖片加上水印的示例代碼(支持logo+文字),具有一定的參考價值,有興趣的可以了解一下2017-08-08Android中RecyclerView實現(xiàn)分頁滾動的方法詳解
RecyclerView實現(xiàn)滾動相信對大家來說都不陌生,但是本文主要給大家介紹了利用Android中RecyclerView實現(xiàn)分頁滾動的思路和方法,可以實現(xiàn)翻頁功能,一次翻一頁,也可以實現(xiàn)翻至某一頁功能。文中給出了詳細的示例代碼,需要的朋友可以參考借鑒,下面來一起看看吧。2017-04-04Android快速開發(fā)系列 10個常用工具類實例代碼詳解
今天特此整理出10個基本每個項目中都會使用的工具類,用于快速開發(fā),對android開發(fā)常用工具類感興趣的朋友跟隨小編一起看看吧2018-09-09