Android在5.0版為Button默認(rèn)添加了點(diǎn)擊時(shí)的漣漪效果,而且在其他的控件上也可以輕松的實(shí)現(xiàn)這種炫酷的效果。
成都創(chuàng)新互聯(lián)專注于大荔網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供大荔營銷型網(wǎng)站建設(shè),大荔網(wǎng)站制作、大荔網(wǎng)頁設(shè)計(jì)、大荔網(wǎng)站官網(wǎng)定制、小程序制作服務(wù),打造大荔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供大荔網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
我們只需要在控件的android:backgroud 屬性上進(jìn)行設(shè)置即可。
如果控件已經(jīng)使用了android:background屬性去設(shè)置背景色或者背景圖片,但是有想要有點(diǎn)擊時(shí)的漣漪效果。那么我們可以考慮在android:foreground屬性中設(shè)置漣漪效果,這樣同樣可以達(dá)到點(diǎn)擊時(shí)產(chǎn)生漣漪,也不會(huì)影響我們對(duì)控件背景的設(shè)置。
不過對(duì)于默認(rèn)無法點(diǎn)擊的控件,還要記得設(shè)置android:clickable為true。另外還要注意,如果Android版本過低,無邊界的漣漪效果可能無法很好的展。
有邊界的漣漪效果:
無邊界的漣漪效果:
除了進(jìn)行上面的設(shè)置之外,還要記得設(shè)置控件為可點(diǎn)擊的
主要是在資源文件夾里創(chuàng)建.xml文件:
1.沒有邊界的Ripple(Ripple With No Mask)
2.用顏色作為Mask的Ripple(Ripple With Color Mask),然而顏色并沒有什么卵用
3.用圖片作為Mask的Ripple(Ripple With Picture Mask)
4.用設(shè)定形狀作為Mask的Ripple(Ripple With Shape Mask)
5.搭配selector作為Ripple(Ripple With Selector)
參考文檔:
Android Ripple的詳解
在某些情況下,我們可能需要使底部tabbar的中間按鈕突出,即類似于如下的效果:
在android要實(shí)現(xiàn)該效果,十分簡(jiǎn)單,只需要在按鈕的父布局將android:clipChildren屬性設(shè)置為false:
并設(shè)置按鈕的layout_gravity為bottom:
示例布局文件如下:
其中android:clipChildren屬性的作用為 是否限制子View不超過父布局,默認(rèn)情況下是為true。當(dāng)該屬性為true時(shí),子View超出父布局的部分會(huì)被裁剪。 因此,將該屬性設(shè)置為false,父布局不再裁剪子View超出父布局的部分,就能實(shí)現(xiàn)突出按鈕的效果了。
設(shè)置透明效果 大概有三種
1、用android系統(tǒng)的透明效果
Java代碼
android:background="@android:color/transparent"
例如 設(shè)置按鈕
Java代碼
Button android:background="@android:color/transparent"
android:text="@+id/Button01"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff" /
2、用ARGB來控制
Java代碼
半透明Button android:background="#e0000000" /
透明Button android:background="#00000000" /
3、設(shè)置alpha
Java代碼
View v = findViewById(R.id.content);//找到你要設(shè)透明背景的layout 的id
v.getBackground().setAlpha(100);//0~255透明度值
Android 5.0中新增了ripple類型,即波紋效果
這里要注意,波紋效果只在5.0以上的設(shè)備生效,要實(shí)現(xiàn)此種效果,我們需要在res中添加一個(gè)新的文件夾drawable-v21用于保存波紋效果.
波紋效果具體實(shí)現(xiàn)效果有以下幾種:
ripple標(biāo)簽,即對(duì)應(yīng)一個(gè)RippleDrawable,當(dāng)它被設(shè)置為一個(gè)控件的background屬性時(shí),控件在按下時(shí),即會(huì)顯示水波效果
drawable-v21文件夾下 ripple_with_no_mask.xml
使用方法:
在ripple標(biāo)簽中,添加一個(gè)item,其drawable屬性為引用的顏色(color) ,則水波效果會(huì)限定在drawable對(duì)應(yīng)的RippleDrawable本身矩形區(qū)域內(nèi)部,這里顏色的一個(gè)作用是限定邊界.
drawable-v21文件夾下 ripple_with_color_mask.xml
需要注意的是:
這里指定id為@android:id/mask,那么默認(rèn)是不會(huì)顯示該drawable,而是在點(diǎn)擊的時(shí)候出現(xiàn);
如果不指定,那么在顯示的時(shí)候會(huì)顯示出item指定的drawable
在ripple標(biāo)簽中,添加一個(gè)item,其drawable屬性為引用的圖片,則水波效果會(huì)限定在圖片drawable中非透明部分對(duì)應(yīng)的區(qū)域內(nèi)部.
drawable-v21文件夾下 ripple_with_picture_mask.xml
在ripple標(biāo)簽中,添加一個(gè)item,drawable屬性為引用的形狀(shape) ,則水波效果會(huì)限定在shape對(duì)應(yīng)的區(qū)域內(nèi)部.
drawable-v21文件夾下 ripple_with_shape_mask.xml
在ripple標(biāo)簽中,添加一個(gè)item,在item的內(nèi)部寫上selector標(biāo)簽,那么這個(gè)RippleDrawable在按下的時(shí)候,同時(shí)具有水波效果和selector指定的圖層.
drawable-v21文件夾下 ripple_with_selector.xml
至此,文章結(jié)束,希望此文能幫助到你,如果對(duì)此文有不同見解,歡迎直接評(píng)論!
參考:
Android L Ripple的使用
Android5.0適配——水波紋點(diǎn)擊效果
在其他App上看到了這樣的一個(gè)效果,感覺有點(diǎn)意思,于是決定實(shí)現(xiàn)一個(gè)類似的效果。
( 其實(shí)是iOS的同學(xué)在實(shí)現(xiàn)功能的時(shí)候隨意發(fā)揮了一下 )
效果大概值這樣子的:
UI看完后
“這個(gè)效果不錯(cuò)啊”
“要不你們Android也么做?” 于是~~
作為一個(gè)有追求的程序員,決定也要實(shí)現(xiàn)一個(gè)這樣的效果 (滿腦子都是草泥馬在奔騰)
這樣的效果嘛~~
利用自定義的 ViewGroup ,通過對(duì)手勢(shì)的處理,應(yīng)該就能實(shí)現(xiàn)了吧?
主要應(yīng)該分兩部分:
比較麻煩的應(yīng)該是在第一部分,需要對(duì)事件的分發(fā)有一些理解。
說到手勢(shì)的判斷,難免需要對(duì)事件分發(fā)進(jìn)行處理。
下拉部分
1、在 onInterceptTouchEvent 中對(duì)事件進(jìn)行處理,如果為下拉事件,則將該事件攔截,交給 onTouchEvent 處理;
2、在 onTouchEvent 中通過計(jì)算得到下拉的距離,然后動(dòng)態(tài)改變 Header 的配置,實(shí)現(xiàn)放大的效果。
重置部分
在 onTouchEvent 的 ACTION_UP 中重置 Header ,實(shí)現(xiàn)回彈
知道思路以后,實(shí)現(xiàn)起來就比較簡(jiǎn)單了
創(chuàng)建一個(gè) ViewGroup (這么命名為 FlexibleLayout )繼承 LinearLayout 。
onInterceptTouchEvent的處理
先通過兩個(gè)條件判斷是否為下拉事件:
然后通過 mIsBeingDragged 來標(biāo)記開始拖拽
onTouchEvent的處理
修改頭部大小
得到下拉的距離后,就可以來改變 Header 的大小,實(shí)現(xiàn)放大效果了。
放大、重置的部分大家可以自由發(fā)揮
這里利用 Math.pow(offsetY, 0.8) 得到實(shí)際需要增加的高度,通過計(jì)算得到對(duì)應(yīng)的寬度以及偏移(類似阻尼效果)。
重置頭部
直接將寬高以及偏移設(shè)置成原來的參數(shù)即可。
(如果覺得這樣重置過程不夠絲滑,可以通過動(dòng)畫來完成一個(gè)流暢的重置效果,這里就不演示了)
到這里,一個(gè)簡(jiǎn)易拉下放大的效果就做完了。試試效果
使用
直接在需要下拉放大的布局外面套上 FlexibleLayout 即可,例如 ScrollView
效果
ScrollVIew:
RecyclerView:
CoordinatorLayout:
大功告成?。。?/p>
當(dāng)然里面還有一些細(xì)節(jié)的處理,比如下拉的條件、回彈的動(dòng)畫、最大高度等,具體內(nèi)容的可以在 源碼 中看到。
完成下拉放大后,貌似把一個(gè)很重要的功能遺忘了下拉刷新 ??
光顧這下拉放大,刷新怎么辦?【黑人問號(hào)】
這個(gè)功能留著下周實(shí)現(xiàn)吧,我的7小時(shí)睡眠已遙遙無期~~
雖然沒有直接實(shí)現(xiàn)下拉刷新的功能,不過源碼中已經(jīng)暴露了一個(gè)下拉的監(jiān)聽,你也可以通過這個(gè)監(jiān)聽實(shí)現(xiàn)下拉刷新的操作
到這里就結(jié)束了
(來還上周欠下的債~~)
和下拉放大類似,通過希手指下滑的監(jiān)聽,利用 View 的 translationY 和 rotation 實(shí)現(xiàn)移動(dòng)和旋轉(zhuǎn)。
具體的實(shí)現(xiàn)過程這里就不貼出來了,直接看效果吧
有興趣的可以直接去 Github 上看源碼以及用法。
Github
PullZoomView
Android事件分發(fā)機(jī)制 詳解攻略,您值得擁有
跑馬燈相關(guān)屬性
上面方式1能暫時(shí)實(shí)現(xiàn)跑馬燈效果,但在多次點(diǎn)擊事件之后容易失焦。而且在Android4.4上實(shí)現(xiàn)有短暫停頓。
MarqueeTextView
MarqueeTextView
attrs.xml
使用
MarqueeView :可垂直跑、可水平跑的跑馬燈。
MarqueeViewLibrary :一個(gè)很方便使用和擴(kuò)展的跑馬燈Library,通過提供不同的MarqueeFactory來定制不同的跑馬燈View, 并且提供了常用類型的跑馬燈效果:SimpleMarqueeView。
XML
設(shè)置字符串列表數(shù)據(jù),或者設(shè)置自定義的Model數(shù)據(jù)類型
設(shè)置字符串?dāng)?shù)據(jù)
設(shè)置事件監(jiān)聽
在 Activity 或 Fragment 中
在 ListView 或 RecyclerView 的 Adapter 中