android50波纹效果

1. android水波纹是哪个包

Android Ripple Background可以为应用添加漂亮的波纹动画背景。可以设置波纹的颜色，波浪的速度、一个波纹还是多个波纹。
http://www.mobile-open.com/2014/3388.html
详细可以参考这个，有图解教程，希望可以帮到你

2. android 怎么实现按下显示不同颜色，又有波纹效果

ripple嵌套selector

<?xmlversion="1.0"encoding="utf-8"?>
<ripplexmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF0000">
<item>
<selector>
<item
android:drawable="@drawable/icon_pressed"
android:state_pressed="true">
</item>
<item
android:drawable="@drawable/icon_normal"
android:state_pressed="false">
</item>
</selector>
</item>

3. android 自定义控件怎么实现动画效果

Google都帮你实现好了，android 5.0上提供了一个新的属性android:attr/colorControlHighlight，使用这个属性定义一个ripple_drawable.xml然后在你需要实现水波纹效果的控件的地方设置这个xml为背景即可。此属性支持5.0以上设备，否则会出现应用FC。

4. 如何取消android5.0的水波纹效果

<item android:state_enabled="false">
<shape>
<corners android:radius="2dp"></corners>
<solid android:color="@color/redcolorPressed"></solid>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<corners android:radius="2dp"></corners>
<solid android:color="@color/redcolorPressed"></solid>

5. 如何加入Material Design 波纹效果for Android 5.0

1. MaterialDesignLibrary 在众多新晋库中，MaterialDesignLibrary可以说是颇受开发者瞩目的一个控件效果库，能够让开发者在Android 2.2系统上使用Android 5.0才支持的控件效果，比如扁平、矩形、浮动按钮，复选框以及各式各样的进度指示器等。

6. 如何让所有 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!等下就去试试喽

7. 如何给Imageview 设置水波纹效果

水波纹效果：

1.标准正余弦水波纹；
2.非标准圆形液柱水波纹；
虽说都是水波纹，但两者在实现上差异是比较大的，一个通过正余弦函数模拟水波纹效果，另外一个会运用到图像的混合模式（PorterDuffXfermode）；

先看效果：

自定义View根据实际情况可以选择继承自View、TextView、ImageView或其他
这次的实现我们都选择继承view，在实现的过程中我们需要关注如下几个方法：
1.onMeasure():最先回调，用于控件的测量;
2.onSizeChanged():在onMeasure后面回调，可以拿到view的宽高等数据，在横竖屏切换时也会回调;
3.onDraw()：真正的绘制部分，绘制的代码都写到这里面;

既然如此，我们先复写这三个方法，然后来实现如上两个效果；
一：标准正余弦水波纹

这种水波纹可以用具体函数模拟出具体的轨迹，所以思路基本如下：
1.确定水波函数方程
2.根据函数方程得出每一个波纹上点的坐标；
3.将水波进行平移，即将水波上的点不断的移动；
4.不断的重新绘制，生成动态水波纹；
有了上面的思路，我们一步一步进行实现：

正余弦函数方程为：
y=Asin(wx+b)+h，这个公式里：w影响周期，A影响振幅，h影响y位置，b为初相；

根据上面的方程选取自己觉得中意的波纹效果，确定对应参数的取值；
然后根据确定好的方程得出所有的方程上y的数值，并将所有y值保存在数组里：

//将周期定为view总宽度
mCycleFactorW=(float)(2*Math.PI/mTotalWidth);

//根据view总宽度得出所有对应的y值
for(inti=0;i<mTotalWidth;i++){
mYPositions[i]=(float)(STRETCH_FACTOR_A*Math.sin(mCycleFactorW*i)+OFFSET_Y);
}

根据得出的所有y值，则可以在onDraw中通过如下代码绘制两条静态波纹：

for(inti=0;i<mTotalWidth;i++){

//减400只是为了控制波纹绘制的y的在屏幕的位置，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果
//绘制第一条水波纹
canvas.drawLine(i,mTotalHeight-mResetOneYPositions[i]-400,i,
mTotalHeight,
mWavePaint);

//绘制第二条水波纹
canvas.drawLine(i,mTotalHeight-mResetTwoYPositions[i]-400,i,
mTotalHeight,
mWavePaint);
}

这种方式类似于数学里面的细分法，一条波纹，如果横向以一个像素点为单位进行细分，则形成view总宽度条直线，并且每条直线的起点和终点我们都能知道，在此基础上我们只需要循环绘制出所有细分出来的直线（直线都是纵向的），则形成了一条静态的水波纹；

接下来我们让水波纹动起来，之前用了一个数组保存了所有的y值点，有两条水波纹，再利用两个同样大小的数组来保存两条波纹的y值数据，并不断的去改变这两个数组中的数据：

privatevoidresetPositonY(){
//mXOneOffset代表当前第一条水波纹要移动的距离
intyOneInterval=mYPositions.length-mXOneOffset;
//使用System.array方式重新填充第一条波纹的数据
System.array(mYPositions,mXOneOffset,mResetOneYPositions,0,yOneInterval);
System.array(mYPositions,0,mResetOneYPositions,yOneInterval,mXOneOffset);

intyTwoInterval=mYPositions.length-mXTwoOffset;
System.array(mYPositions,mXTwoOffset,mResetTwoYPositions,0,
yTwoInterval);
System.array(mYPositions,0,mResetTwoYPositions,yTwoInterval,mXTwoOffset);
}

如此下来只要不断的改变这两个数组的数据，然后不断刷新，即可生成动态水波纹了；
刷新可以调用invalidate()或postInvalidate()，区别在于后者可以在子线程中更新UI

整体代码如下：


packagecom.csdn.csdnblog2.ui;

importcom.csdn.csdnblog2.utils.UiUtils;

importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.DrawFilter;
importandroid.graphics.Paint;
importandroid.graphics.Paint.Style;
importandroid.graphics.PaintFlagsDrawFilter;
importandroid.util.AttributeSet;
importandroid.view.View;

{

//波纹颜色
privatestaticfinalintWAVE_PAINT_COLOR=0x880000aa;
//y=Asin(wx+b)+h
_FACTOR_A=20;
privatestaticfinalintOFFSET_Y=0;
//第一条水波移动速度
_X_SPEED_ONE=7;
//第二条水波移动速度
_X_SPEED_TWO=5;
privatefloatmCycleFactorW;

privateintmTotalWidth,mTotalHeight;
privatefloat[]mYPositions;
privatefloat[]mResetOneYPositions;
privatefloat[]mResetTwoYPositions;
privateintmXOffsetSpeedOne;
privateintmXOffsetSpeedTwo;
privateintmXOneOffset;
privateintmXTwoOffset;

privatePaintmWavePaint;
privateDrawFiltermDrawFilter;

publicDynamicWave(Contextcontext,AttributeSetattrs){
super(context,attrs);
//将dp转化为px，用于控制不同分辨率上移动速度基本一致
mXOffsetSpeedOne=UiUtils.dipToPx(context,TRANSLATE_X_SPEED_ONE);
mXOffsetSpeedTwo=UiUtils.dipToPx(context,TRANSLATE_X_SPEED_TWO);

//初始绘制波纹的画笔
mWavePaint=newPaint();
//去除画笔锯齿
mWavePaint.setAntiAlias(true);
//设置风格为实线
mWavePaint.setStyle(Style.FILL);
//设置画笔颜色
mWavePaint.setColor(WAVE_PAINT_COLOR);
mDrawFilter=newPaintFlagsDrawFilter(0,Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//从canvas层面去除绘制时锯齿
canvas.setDrawFilter(mDrawFilter);
resetPositonY();
for(inti=0;i<mTotalWidth;i++){

//减400只是为了控制波纹绘制的y的在屏幕的位置，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果
//绘制第一条水波纹
canvas.drawLine(i,mTotalHeight-mResetOneYPositions[i]-400,i,
mTotalHeight,
mWavePaint);

//绘制第二条水波纹
canvas.drawLine(i,mTotalHeight-mResetTwoYPositions[i]-400,i,
mTotalHeight,
mWavePaint);
}

//改变两条波纹的移动点
mXOneOffset+=mXOffsetSpeedOne;
mXTwoOffset+=mXOffsetSpeedTwo;

//如果已经移动到结尾处，则重头记录
if(mXOneOffset>=mTotalWidth){
mXOneOffset=0;
}
if(mXTwoOffset>mTotalWidth){
mXTwoOffset=0;
}

//引发view重绘，一般可以考虑延迟20-30ms重绘，空出时间片
postInvalidate();
}

privatevoidresetPositonY(){
//mXOneOffset代表当前第一条水波纹要移动的距离
intyOneInterval=mYPositions.length-mXOneOffset;
//使用System.array方式重新填充第一条波纹的数据
System.array(mYPositions,mXOneOffset,mResetOneYPositions,0,yOneInterval);
System.array(mYPositions,0,mResetOneYPositions,yOneInterval,mXOneOffset);

intyTwoInterval=mYPositions.length-mXTwoOffset;
System.array(mYPositions,mXTwoOffset,mResetTwoYPositions,0,
yTwoInterval);
System.array(mYPositions,0,mResetTwoYPositions,yTwoInterval,mXTwoOffset);
}

@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
//记录下view的宽高
mTotalWidth=w;
mTotalHeight=h;
//用于保存原始波纹的y值
mYPositions=newfloat[mTotalWidth];
//用于保存波纹一的y值
mResetOneYPositions=newfloat[mTotalWidth];
//用于保存波纹二的y值
mResetTwoYPositions=newfloat[mTotalWidth];

//将周期定为view总宽度
mCycleFactorW=(float)(2*Math.PI/mTotalWidth);

//根据view总宽度得出所有对应的y值
for(inti=0;i<mTotalWidth;i++){
mYPositions[i]=(float)(STRETCH_FACTOR_A*Math.sin(mCycleFactorW*i)+OFFSET_Y);
}
}

}

二：非标准圆形液柱水波纹

前面的波形使用函数模拟，这个我们换种方式，采用图进行实现，先用PS整张不像波纹的波纹图；

为了衔接紧密，首尾都比较平，并高度一致；
思路：
1.使用一个圆形图作为遮罩过滤波形图；
2.平移波纹图，即不断改变绘制的波纹图的区域，即srcRect；
3.当一个周期绘制完，则从波纹图的最前面重新计算；

全部代码如下
//初始化bitmap
privatevoidinitBitmap(){
mSrcBitmap=((BitmapDrawable)getResourceswww.yingtaow.com?getDrawable(R.drawable.wave_2000))
.getBitmap();
mMaskBitmap=((BitmapDrawable)getResources().getDrawable(
R.drawable.circle_500))
.getBitmap();
}

//初始化画笔paint
privatevoidinitPaint(){

mBitmapPaint=newPaint();
//防抖动
mBitmapPaint.setDither(true);
//开启图像过滤
mBitmapPaint.setFilterBitmap(true);

mPicPaint=newPaint(Paint.ANTI_ALIAS_FLAG);
mPicPaint.setDither(true);
mPicPaint.setColor(Color.RED);
}

@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
mTotalWidth=w;
mTotalHeight=h;
mCenterX=mTotalWidth/2;
mCenterY=mTotalHeight/2;

mSrcRect=newRect();
mDestRect=newRect(0,0,mTotalWidth,mTotalHeight);

intmaskWidth=mMaskBitmap.getWidth();
intmaskHeight=mMaskBitmap.getHeight();
mMaskSrcRect=newRect(0,0,maskWidth,maskHeight);
mMaskDestRect=newRect(0,0,mTotalWidth,mTotalHeight);
}

}