1. 程式人生 > >Android原始碼解析--Material Design之水波紋點選效果RippleEffect使用

Android原始碼解析--Material Design之水波紋點選效果RippleEffect使用

好了,這樣差不多就完成了我們的水波漣漪效果了。。。。

看一下怎麼用吧?

如果你的開發IDE是Android Studio那麼我們可以把github上的庫整合到我們的專案中,

  1. <span style="font-size:14px;">dependencies {    
  2.     compile 'com.github.traex.rippleeffect:library:1.2.3'
  3. } </span>  
在我們的佈局中引用RippleEffect就OK了
  1. <span style="font-size:14px;"><com.Hankkin.library.RippleView    
  2.   android:id="@+id/more"
  3.   android:layout_width="?android:actionBarSize"
  4.   android:layout_height="?android:actionBarSize"
  5.   android:layout_toLeftOf="@+id/more2"
  6.   android:layout_margin="5dp"
  7.   ripple:rv_centered="true">    
  8.   <ImageView    
  9.     android:layout_width="?android:actionBarSize"
  10.     android:layout_height="?android:actionBarSize"
  11.     android:src="@android:drawable/ic_menu_edit"
  12.     android:layout_centerInParent="true"
  13.     android:padding="10dp"
  14.     android:background="@android:color/holo_blue_dark"/>    
  15. </com.Hankkin.library.RippleView>  </span>  
當然你也可以把庫中的RippleView直接拷到我們的專案裡面,還可以該裡面的動畫快慢速度等,注意也要把庫裡面的styles,attrs拷進來,放到自己的專案裡面,就可以自己改一些配置了。

——————————————————————————————————————————————————————————————————————————————————————————————————————

下面再和大家說一下比較重要的一點吧,這個網上的demo都沒有說,是我自己用的時候發現的

也就是我們的點選事件,這時候如果你還用普通的OnClickListener()是不行的,因為動畫還沒有結束,就直接startIntent()跳轉介面了,如果你的介面沒有finish()掉的話,返回的時候動畫會繼續執行完。

那麼怎麼破呢?

我們就需要給我們的RippleView設定監聽事件而不是我們的控制元件設定監聽事件了,因為我們的RippleView中有這樣一個介面:

  1. <span style="font-size:14px;">publicinterface OnRippleCompleteListener {    
  2.         void onComplete(RippleView rippleView);    
  3.     } </span>  
也就是動畫完成的事件
  1. <span style="font-size:14px;">RippleView view = (RippleView) findViewById(R.id.reView);    
  2.         view.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {    
  3.             @Override
  4.             publicvoid onComplete(RippleView rippleView) {    
  5.                 Intent intent = new Intent(getApplicationContext(),HelloActivity.class);    
  6.                 startActivity(intent);    
  7.             }    
  8.         });  </span>  
這樣我們就實現了動畫完成之後才來實現介面跳轉了

小夥伴們,快試一下吧。

當然我們的ListView的item點選也可以實現這樣的效果,因為我們的RippleView中是支援Listview點選的

  1. /**  
  2.      * Send a click event if parent view is a Listview instance  
  3.      * 若為Listview傳送點選事件  
  4.      * @param isLongClick Is the event a long click ?  
  5.      */
  6.     privatevoid sendClickEvent(final Boolean isLongClick) {    
  7.         if (getParent() instanceof AdapterView) {    
  8.             final AdapterView adapterView = (AdapterView) getParent();    
  9.             finalint position = adapterView.getPositionForView(this);    
  10.             finallong id = adapterView.getItemIdAtPosition(position);    
  11.             if (isLongClick) {    
  12.                 if (adapterView.getOnItemLongClickListener() != null)    
  13.                     adapterView.getOnItemLongClickListener().onItemLongClick(adapterView, this, position, id);    
  14.             } else {    
  15.                 if (adapterView.getOnItemClickListener() != null)    
  16.                     adapterView.getOnItemClickListener().onItemClick(adapterView, this, position, id);    
  17.             }    
  18.         }    
  19.     }    

這裡先提一下,以後會詳細說怎麼用的.....

github地址:

https://github.com/traex/RippleEffect