android點擊水波紋

⑴ 如何讓所有 View 都可以帶上點擊的水波紋效果

V2EX›Android

如何讓所有 View 都可以帶上點擊的水波紋效果?

AtlantisZ· 2015-11-12 23:49:00 +08:00

這是一個創建於 483 天前的主題，其中的信息可能已經有所發展或是發生改變。

根據 G官方文檔
定製觸摸反饋
材料設計中的觸摸反饋可在用戶與 UI 元素互動時，在接觸點上提供即時視覺確認。適用於按鈕的默認觸摸動畫使用全新 RippleDrawable 類別，以波紋效果實現不同狀態間的轉換。

在大多數情況下，您應以下列方式指定視圖背景，在您的視圖 XML 中應用此功能：

?android:attr/selectableItemBackground 指定有界的波紋
?android:attr/ 指定越界的波紋
注意： 是 API 級別 21 中推出的新屬性。

此外，您可利用 ripple 元素將 RippleDrawable 定義為一個 XML 資源。

您可以為 RippleDrawable 對象指定一種顏色。如果要改變默認觸摸反饋顏色，請使用主題的 android:colorControlHighlight 屬性。


但是發現有時候一個 LinearLayout 設置 android:background="?android:attr/selectableItemBackground"
就帶上了水波紋效果,有的不行,,TextView 也是,設置 android:background="?android:attr/selectableItemBackground"有的帶上了,有的不行.


RecyclerView 的 Item layout 根布局加上了這個屬性也無效果.

後來輾轉反側,找到了 Stackflow 找到的回答,也不奏效.
FrameLayout view = (FrameLayout) View.inflate(context, R.layout.item_top_news, null);
RippleDrawable drawable = (RippleDrawable) mActivity.getResources()
.getDrawable(R.drawable.ripple_background);

view.setClickable(true);
view.setForeground(drawable);

求解如何實現 BiliBili MD 客戶端,幾乎每個 View 點擊都有的水波紋效果.

波紋

attr

Android

drawable

12 回復 |直到 2015-11-19 21:41:40 +08:00

1

little_cup 2015-11-13 00:04:55 +08:00

從設計的角度說，你不應該讓所有的 View 都帶上 Ripple 效果，只應該讓可點擊的元素帶上。
從程序的角度說，你無法讓所有的 View 都帶上 Ripple 效果，只能讓拿到點擊事件的元素帶上。

2

AtlantisZ 2015-11-13 00:15:38 +08:00

@little_cup額,我只是感覺很難有短文字敘述清楚問題,原來標題是如何讓 RecyclerView 的子 Item 帶上水波紋效果了.感覺太局限了.
請問現在 RecyclerView 的子 Item 已經可以響應點擊事件跳轉 Activity 了,請問如何才能帶上水波紋的點擊效果.我在 Item 的 layout 根布局修改 android:background="?android:attr/selectableItemBackground"沒有效果.

3

little_cup 2015-11-13 00:25:24 +08:00

@AtlantisZ哪個 view 綁定 click 就給哪個設 selectableItemBackground 。當然注意不要被其他 view 在視覺上覆蓋了。

4

AtlantisZ 2015-11-13 00:42:01 +08:00

在 onBindViewHolder 中
TypedValue typedValue = new TypedValue();
mActivity.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, typedValue, true);
Drawable background = getResources().getDrawable(typedValue.resourceId);
// Drawable background = getResources().getDrawable(R.drawable.ripple_background);
holder.rootView.setBackground(background);
holder.rootView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(getContext(), VideoDetailActivity.class));
// ToastUtils.showToast(mActivity, "av :: " + mRecommendList.get(position).av);
}
});
還是沒有用額.

5

AtlantisZ 2015-11-13 11:17:22 +08:00

@little_cup

在 onBindViewHolder 中
TypedValue typedValue = new TypedValue();
mActivity.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, typedValue, true);
Drawable background = getResources().getDrawable(typedValue.resourceId);
// Drawable background = getResources().getDrawable(R.drawable.ripple_background);
holder.rootView.setBackground(background);
holder.rootView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(getContext(), VideoDetailActivity.class));
}
});
還是沒有用額.

6

miao1007 2015-11-15 19:55:46 +08:00

這樣寫不會報錯？

ClassNoFound 這個錯誤在低 API 下會出現

7

ybjaychou 2015-11-17 20:53:35 +08:00

我也是在愁這個問題，同樣是在 RecyclerView 的 Item 裡面，不知道怎麼才能有點擊效果，就算不是水紋也可以啊。。
順便搭個車，就是怎麼在 RecyclerView 裡面做多選操作，然後 Toolbar 上面出現操作按鈕，不知道有人做過沒

8

ecma 2015-11-18 19:01:06 +08:00

同表示弄不出波紋點擊效果，不知道是不是 SDK 版本的原因。
目前暫時通過 github 上一個開源項目實現那個效果了。。
https://github.com/balysv/material-ripple

9

ecma 2015-11-18 19:05:55 +08:00

@ybjaychou
我自己是在 itemView 上加入了一個 checkBox ，平常處於隱藏狀態，需要批量刪除的適合，重新載入 RecyclerView 讓 checkBox 顯示。而 checkBox 的點擊事件則是往一個數組裡面扔 item 的 id ，那樣就知道選了那些。
toolbar 的改變的話可以通過 onPrepareOptionsMenu 和 invalidateOptionsMenu()來改變，當然也可以通過 ActionMode.Callback 來實現
通過這種方法來實現的話需要對 checkBox 的點擊進行標示優化，避免列表滑動的適合 checkBox 錯誤問題

10

ybjaychou 2015-11-19 12:52:08 +08:00 via Android

@ecma好，謝謝，我試試！

11

AtlantisZ 2015-11-19 16:49:47 +08:00

@ybjaychou
@ecma

參考http://stackoverflow.com/questions/26961147/touch-feedback-with-recyclerview-and-cardview/29033353解決了 RecyclerView 中 Item 無水波紋效果的問題額.

12

ecma 2015-11-19 21:41:40 +08:00

@AtlantisZ
THX!等下就去試試嘍

⑵ Android開發，按鈕水波紋

Material Design是Google推出的一個全新的設計語言，它的特點就是擬物扁平化。

Material Design包含了很多內容，大致把它分為四部分：

主題和布局——Android L——Material Design詳解（主題和布局）
視圖和陰影——ANDROID L——Material Design詳解（視圖和陰影）
UI控制項——ANDROID L——Material Design詳解（UI控制項）
動畫——ANDROID L——Material Design詳解（動畫篇）

⑶ android 真實水波紋效果，要美化過的。

當使用了Material主題後，波紋動畫會自動應用在所有的控制項上，當然可以來設置其屬性來調整到需要的效果。

可以通過如下代碼設置波紋的背景：
android:background="?android:attr/selectableItemBackground"波紋有邊界

android:background="?android:attr/"波紋超出邊界

使用效果如下：
B1是不設任何背景的按鈕
B2設置了?android:attr/selectableItemBackground
B3設置了?android:attr/

⑷ Android Transition

Android Transition Framwork 主要用來做 三件事 ：

而你需要做的，首先對Activity的ThemeStyle添加 windowContentTransitions 屬性：

用 startActivity(mIntent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle()); 來替換之前的startActivity();

讓我們來分析以下具體發生了什麼：

3.使用 ActivityOptions.makeSceneTransitionAnimation() 來定義共享的view和transitionName

如果兩個不同界面有多個元素需要共享的話，使用Pair來包裝

這里我們實現了在RevealActivity中兩個View的更換，點擊右下角切換按鈕，水波紋開始散開，第一個View逐漸消失，第二個View逐漸出現。

createCircularReveal的各參數代表的具體含義 參照這里 。

https://github.com/Trisaa/MaterialTranstion

https://github.com/lgvalle/Material-Animations
https://github.com/hehonghui/android-tech-frontier/tree/master/others/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BAAndroid%20%E6%96%B0%E7%89%B9%E6%80%A7-Transition-Part-1

折疊翻頁效果
Fragment Transition
SwitchLayout