我试了一下，你把你的图片，再另存一个jpg，就不会出现这种问题了。
你的图应该是直接用bmp、gif之类的其它格式直接改个jpg的扩展名得来的。
如果友尘你非要用你的图片来做出无问题的水纹的话，我没有时间做测试，不过你应好禅禅该是用Graphics2D对象来加的水纹吧，而你的Graphics2D对象应该是通过Image构造来的吧，比如BufferedImage，反正我是用的BufferedImage。构造BufferedImage的时候，BufferedImage(int width, int height, int imageType)，第三个参数是图片类型，BufferedImage.TYPE_INT_RGB是一般jpg图用的，你可以试试别的，有很多，你挨个试下，看看能不能解决。就算解决了，你再用回其它jpg文件时，可能又会出别的问题。还是推荐一开始写的，袭山在图片上解决问题。
V2EX › Android
如何让所有 View 都可以带上点击的水波纹效果?
AtlantisZ · 2015-11-12 23:49:00 +08:00
这是一个创建于 483 天前的主题，其中的信息可能已经有所发展或是发生改变。
根据 G官方文档
定制触摸反馈
材料设计中的触摸反馈可在用户与 UI 元素互动时，在接触点上提供即时视觉确认。适用于按钮的默认触摸动画使用全新 RippleDrawable 类别，以波纹效果实现不同状态间的转换。
在大多数情况下，您应以下列方式指定视图背景，在您的视图 XML 中应用此功能：
?android:attr/selectableItemBackground 指定有界的波纹
?android:attr/selectableItemBackgroundBorderless 指定越界的波纹
注意： selectableItemBackgroundBorderless 是 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
ecmadao 2015-11-18 19:01:06 +08:00
同表示弄不出波纹点击效果，不知道是不是 SDK 版本的原因。
目前暂时通过 github 上一个开源项目实现那个效果了。。
9
ecmadao 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
@ecmadao 好，谢谢，我试试！
11
AtlantisZ 2015-11-19 16:49:47 +08:00
@ybjaychou
@ecmadao
参考 解决了 RecyclerView 中 Item 无水波纹效果的问题额.
12
ecmadao 2015-11-19 21:41:40 +08:00
@AtlantisZ
THX!等下就去试试喽
1、首先：html<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Water drops effect</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/vector2d.js" type="text/javascript" charset="utf-8"></script>
<script src="js/waterfall.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="example">
<h3><a href="#">Water drops effect</a></h3>
<canvas id="water">HTML5 compliant browser required</canvas>
<div id="switcher"薯握>
<img onclick='watereff.changePicture(this.src)' src="data_images/underwater1.jpg" />
<img onclick='watereff.changePicture(this.src)' src="data_images/underwater2.jpg"清模 />
</div>
<div id="fps"></div>
</div>
</body>
</html>
2、答手缓然后是css样式
body{background:#eeemargin:0padding:0}
.example{background:#FFFwidth:600pxborder:1px #000 solidmargin:20px autopadding:15px-moz-border-radius: 3px-webkit-border-radius: 3px}
#water {
width:500px
height:400px
display: block
margin:0px auto
cursor:pointer
}
#switcher {
text-align:center
overflow:hidden
margin:15px
}
#switcher img {
width:160px
height:120px
}
3、再然后是js代码
function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){
this.x = x
this.y = y
this.shading = shading
this.refraction = refraction
this.bufferSize = this.x * this.y
this.damping = damping
this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data
this.imageData = ctx.getImageData(0, 0, screenWidth, screenHeight)
this.buffer1 = []
this.buffer2 = []
for (var i = 0i <this.bufferSizei++){
this.buffer1.push(0)
this.buffer2.push(0)
}
this.update = function(){
for (var i = this.x + 1, x = 1i <this.bufferSize - this.xi++, x++){
if ((x <this.x)){
this.buffer2[i] = ((this.buffer1[i - 1] + this.buffer1[i + 1] + this.buffer1[i - this.x] + this.buffer1[i + this.x]) / 2) - this.buffer2[i]
this.buffer2[i] *= this.damping
} else x = 0
}
var temp = this.buffer1
this.buffer1 = this.buffer2
this.buffer2 = temp
}
this.draw = function(ctx){
var imageDataArray = this.imageData.data
for (var i = this.x + 1, index = (this.x + 1) * 4i <this.bufferSize - (1 + this.x)i++, index += 4){
var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i + 1])
var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i + this.x])
var shade = xOffset * this.shading
var texture = index + (xOffset * this.refraction + yOffset * this.refraction * this.x) * 4
imageDataArray[index] = this.background[texture] + shade
imageDataArray[index + 1] = this.background[texture + 1] + shade
imageDataArray[index + 2] = 50 + this.background[texture + 2] + shade
}
ctx.putImageData(this.imageData, 0, 0)
}
}
var fps = 0
var watereff = {
// variables
timeStep : 20,
refractions : 2,
shading : 3,
damping : 0.99,
screenWidth : 500,
screenHeight : 400,
pond : null,
textureImg : null,
interval : null,
backgroundURL : 'data_images/underwater1.jpg',
// initialization
init : function() {
var canvas = document.getElementById('water')
if (canvas.getContext){
// fps countrt
fps = 0
setInterval(function() {
document.getElementById('fps').innerHTML = fps / 2 + ' FPS'
fps = 0
}, 2000)
canvas.onmousedown = function(e) {
var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop))
watereff.pond.buffer1[mouse.y * watereff.pond.x + mouse.x ] += 200
}
canvas.onmouseup = function(e) {
canvas.onmousemove = null
}
canvas.width = this.screenWidth
canvas.height = this.screenHeight
this.textureImg = new Image(256, 256)
this.textureImg.src = this.backgroundURL
canvas.getContext('2d').drawImage(this.textureImg, 0, 0)
this.pond = new drop(
this.screenWidth,
this.screenHeight,
this.damping,
this.shading,
this.refractions,
canvas.getContext('2d'),
this.screenWidth, this.screenHeight
)
if (this.interval != null){
clearInterval(this.interval)
}
this.interval = setInterval(watereff.run, this.timeStep)
}
},
// change image func
changePicture : function(url){
this.backgroundURL = url
this.init()
},
// get mouse position func
getMousePosition : function(e){
if (!e){
var e = window.event
}
if (e.pageX || e.pageY){
return new vector2d(e.pageX, e.pageY)
} else if (e.clientX || e.clientY){
return new vector2d(e.clientX, e.clientY)
}
},
// loop drawing
run : function(){
var ctx = document.getElementById('water').getContext('2d')
watereff.pond.update()
watereff.pond.draw(ctx)
fps++
}
}
window.onload = function(){
watereff.init()
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）