1. 程式人生 > >在5.0以上手機上用系統原生方式實現波紋漣漪效果

在5.0以上手機上用系統原生方式實現波紋漣漪效果

1.使用5.0以上的sdk,並設定value-21的style的AppBaseTheme為parent=”android:Theme.Material.Light”型別。
//此時假如不給textview,listview等控制元件新增background的話已經實現波紋效果了,但假如設計師有要求用其他顏色或者自定義波紋的顏色的話就只能按照下面的方式來寫了。

2.建立drawable-v21資料夾作為只供5.0以上的系統使用的素材。

3.不同型別的控制元件有不同的設定方式,詳情如下:
3.1:textview:設定background屬性,值假設為drawable_viewclickripple,並分別放置在drawable和drawable-v21資料夾內(同名,5.0以上系統會自動呼叫drawable-v21裡的素材,5.0以下的系統會自動呼叫drawable裡的素材,下同):
在drawable資料夾內(即5.0以下沒效果,也可自行設定點選雙色效果):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>

在drawable-v21資料夾內(color為漣漪的顏色,一般取#9ccc):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color
="@color/ripplecolor" >
</ripple>

3.2:imageview:可以支援selector(寫到src屬性中);background用法同textview。
3.3:button、viewgroup:由於這些控制元件沒有src屬性,所以若要實現點選變色和漣漪效果共存的話需要這樣寫:
設定background屬性,值假設為drawable_longbuttonclickripple,並分別放置在drawable和drawable-v21資料夾內:
在drawable資料夾內:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/roundbutton_red_bg" /> </selector>

在drawable-v21資料夾內(color為漣漪的顏色,一般取#9ccc) :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripplecolor" >
    <item android:drawable="@drawable/roundbutton_red_bg" /><!--不是listview的listviewSelector用這樣寫沒問題-->
</ripple>

其中roundbutton_red_bg可以為單色selector、單雙色組合selector、shape等都可以的。

3.4:listview:
3.4.1:在listview的佈局檔案內設定:

android:drawSelectorOnTop="true"
android:listSelector="@drawable/color_double_list_bg"

color_double_list_bg分別放置在drawable和drawable-v21資料夾內:
在drawable資料夾內(內容為空,點選變色效果有item的background實現):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>

在drawable-v21資料夾內(ripplecolor_lvitem為波紋的顏色,一般與listview的item按下去時的顏色相同(list_txt_bg_pressed);solid處的顏色其實沒有效果,但不能是透明的,為了保險起見這裡寫為listview的item正常顯示時的顏色,即list_txt_bg_normal,預設沒點選時的顏色寫在listview item的background上(不會覆蓋漣漪效果)):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripplecolor_lvitem" >
   <!-- <item android:drawable="@color/listjijing_txt_bg_normal" />-->
   <!--這種方式有問題,會出現點選時這一item內容消失的情況-->

    <item android:id="@android:id/mask"><!--不加id或id不為mask則也會出現點選時內容消失的情況-->
        <shape android:shape="rectangle">
            <solid android:color="@color/list_txt_bg_normal" />
        </shape>
    </item>
</ripple>

3.4.2:在listview的item中寫明:

android:background="@drawable/color_double_list_bg_item"

color_double_list_bg_item分別放置在drawable和drawable-v21資料夾內:
在drawable資料夾內:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/list_txt_bg_pressed" android:state_pressed="true"></item>
    <item android:drawable="@color/list_txt_bg_normal"></item>
</selector>

在drawable-v21資料夾內(內容只為item正常色,否則會有兩個波紋):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/list_txt_bg_normal"></item>
</selector>

到此,listview的漣漪效果配置結束,相對比較複雜。有兩點需要注意:
1.不能只在item的根viewgroup的background裡用上文textview或imageview那樣簡單的寫background,否則在某些手機裡(如mx4)漣漪起始點一直為中心點而不是點選點,或導致其他一些莫名的不正確效果。
2.沒有了。

3.5:android.support.v7.widget.CardView:
frameLayout有個屬性為foreground,cardview繼承於framelayout,所以可通過

android:foreground="?attr/selectableItemBackground"

即可設定波紋效果。
但在某些手機(小米4 nexus5等沒有陰影效果,需要在application或activity中寫明android:hardwareAccelerated=”true”開啟硬體加速才有陰影)
若要再實現點選時卡片的吸附效果(如下)
這裡寫圖片描述
可再這樣設定:
首先,建立一個 TranslationZ 的變換動畫放在 /res/anim,自己取一個名(如 touch_raise.xml),加入以下內容:

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

然後為你需要新增效果的 CardView(其他 View 同理)所在的 Layout XML 複製多一份到 /res/layout-v21(此api只能在5.0以上支援),然後在新的那份 XML 的 CardView 中加入屬性 android:stateListAnimator=”@anim/touch_raise”。
這樣,你的卡片按住時就會有浮起(陰影加深)的效果了。(需要為cardview設定onclicklistener)
假如給cardview設定了app:cardElevation=”5dp”屬性,即縱深的深度,則還需要寫上app:cardPreventCornerOverlap=”false”
app:cardUseCompatPadding=”true”防止在5.0以下和5.0以上系統中cardview自動預留的margin不一樣的問題。詳情參見http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/1025/3621.html

假如想在5.0以下的手機上也實現同樣的效果,只能使用第三方庫了,如com.balysv.materialripple.MaterialRippleLayout