Android 水波纹点击效果(Ripple Effect)
本文介紹的是Android5.0中其中一個炫酷的效果,點擊水波紋擴散效果(Ripple Effect).
以下介紹的實現方式都是調用Android5.0的新API,并非自定義實現,所以只支持在Android5.0及以上的設備.
而大家想兼容低系統版本的話,就需要新建v21(即Android5.0)的Resource Directory.
效果如下圖所示:
圓角背景的水波紋效果(如上圖)
1. 定義一個普通圓角背景的xml;
rounded_corners.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solid android:color="#FFFFFF" /><corners android:radius="4dp" /> </shape>2. 這里是重點,<ripple>是API 21才有的新Tag,正是實現水波紋效果的;
? ? 其中<ripple android:color="#FF21272B" .... />這個是指定水波紋的顏色.
? ? 而<item />里面的東西,我們都很熟悉,就是普通的定義一個帶圓角的背景.
ripple_bg.xml:
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="#FF21272B"><item><shape android:shape="rectangle"><solid android:color="#FFFFFF" /><corners android:radius="4dp" /></shape></item><item android:drawable="@drawable/rounded_corners" /> </ripple>3. 這是Activity的布局xml;
<Button android:background="@drawable/ripple_bg"... />直接使用ripple_bg作為背景.
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/hello_world" /><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/ripple_bg"android:text="@string/hello_world" /> </LinearLayout>
===================================================================================================================
Drawable that shows a ripple effect in response to state changes. The anchoring position of the ripple for a given state may be specified by callingsetHotspot(float, float)?with the corresponding state attribute identifier.
A touch feedback drawable may contain multiple child layers, including a special mask layer that is not drawn to the screen. A single layer may be set as the mask from XML by specifying its?android:id?value as?mask. At run time, a single layer may be set as the mask using?setId(..., android.R.id.mask)?or an existing mask layer may be replaced using?setDrawableByLayerId(android.R.id.mask, ...).
<!-- A red ripple masked against an opaque rectangle. --/><ripple android:color="#ffff0000"><item android:id="@android:id/mask"android:drawable="@android:color/white" /></ripple>
If a mask layer is set, the ripple effect will be masked against that layer before it is drawn over the composite of the remaining child layers.
If no mask layer is set, the ripple effect is masked against the composite of the child layers.
<!-- A green ripple drawn atop a black rectangle. --/><ripple android:color="#ff00ff00"><item android:drawable="@android:color/black" /></ripple><!-- A blue ripple drawn atop a drawable resource. --/><ripple android:color="#ff0000ff"><item android:drawable="@drawable/my_drawable" /></ripple>If no child layers or mask is specified and the ripple is set as a View background, the ripple will be drawn atop the first available parent background within the View's hierarchy. In this case, the drawing region may extend outside of the Drawable bounds.
<!-- An unbounded red ripple. --/><ripple android:color="#ffff0000" />
總結
以上是生活随笔為你收集整理的Android 水波纹点击效果(Ripple Effect)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TextPaint绘制文字
- 下一篇: ViewGroup.LayoutPara