您的位置:首页 > 移动开发 > Android开发

Android 具有水波纹点击效果的Tab切换

2016-11-11 13:10 423 查看
第一步:自定义CustomView

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

/**
* Created by ekikousei易皇星 on 16/11/11.
* E-mail:13764664731@163.com
* Signature:缘分是本书,翻的不经意会错过,读的太认真会流泪!!
* <p>
* TODO:类描述:
*/
public class CustomView extends RelativeLayout {
static final String MATERIALDESIGNXML = "http://schemas.android.com/apk/res-auto";
static final String ANDROIDXML = "http://schemas.android.com/apk/res/android";
final int disabledBackgroundColor = Color.parseColor("#E2E2E2");
int beforeBackground;
public boolean isLastTouch = false;
boolean animation = false;

public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public void setEnabled(boolean enabled) {
super.setEnabled(enabled);
if(enabled) {
this.setBackgroundColor(this.beforeBackground);
} else {
this.setBackgroundColor(this.disabledBackgroundColor);
}

this.invalidate();
}

protected void onAnimationStart() {
super.onAnimationStart();
this.animation = true;
}

protected void onAnimationEnd() {
super.onAnimationEnd();
this.animation = false;
}

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(this.animation) {
this.invalidate();
}

}

}


第二步:自定义LayoutRipple extends CustomView

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
* Created by ekikousei易皇星 on 16/11/11.
* E-mail:13764664731@163.com
* Signature:缘分是本书,翻的不经意会错过,读的太认真会流泪!!
* <p>
* TODO:类描述:
*/
public class LayoutRipple extends CustomView {

int background;
float rippleSpeed = 10.0F;
int rippleSize = 3;
OnClickListener onClickListener;
int backgroundColor = Color.parseColor("#FFFFFF");
Integer rippleColor;
Float xRippleOrigin;
Float yRippleOrigin;
float x = -1.0F;
float y = -1.0F;
float radius = -1.0F;

public LayoutRipple(Context context, AttributeSet attrs) {
super(context, attrs);
this.setAttributes(attrs);
}

protected void setAttributes(AttributeSet attrs) {
int bacgroundColor = attrs.getAttributeResourceValue("http://schemas.android.com/apk/res/android", "background", -1);
if(bacgroundColor != -1) {
this.setBackgroundColor(this.getResources().getColor(bacgroundColor));
} else {
this.background = attrs.getAttributeIntValue("http://schemas.android.com/apk/res/android", "background", -1);
if(this.background != -1) {
this.setBackgroundColor(this.background);
} else {
this.setBackgroundColor(this.backgroundColor);
}
}

int rippleColor = attrs.getAttributeResourceValue("http://schemas.android.com/apk/res-auto", "rippleColor", -1);
if(rippleColor != -1) {
this.setRippleColor(this.getResources().getColor(rippleColor));
} else {
int background = attrs.getAttributeIntValue("http://schemas.android.com/apk/res-auto", "rippleColor", -1);
if(background != -1) {
this.setRippleColor(background);
} else {
this.setRippleColor(this.makePressColor());
}
}

this.rippleSpeed = attrs.getAttributeFloatValue("http://schemas.android.com/apk/res-auto", "rippleSpeed", 20.0F);
}

public void setBackgroundColor(int color) {
this.backgroundColor = color;
if(this.isEnabled()) {
this.beforeBackground = this.backgroundColor;
}

super.setBackgroundColor(color);
}

public void setRippleSpeed(int rippleSpeed) {
this.rippleSpeed = (float)rippleSpeed;
}

public boolean onTouchEvent(MotionEvent event) {
this.invalidate();
if(this.isEnabled()) {
this.isLastTouch = true;
if(event.getAction() == 0) {
this.radius = (float)(this.getHeight() / this.rippleSize);
this.x = event.getX();
this.y = event.getY();
} else if(event.getAction() == 2) {
this.radius = (float)(this.getHeight() / this.rippleSize);
this.x = event.getX();
this.y = event.getY();
if(event.getX() > (float)this.getWidth() || event.getX() < 0.0F || event.getY() > (float)this.getHeight() || event.getY() < 0.0F) {
this.isLastTouch = false;
this.x = -1.0F;
this.y = -1.0F;
}
} else if(event.getAction() == 1) {
if(event.getX() <= (float)this.getWidth() && event.getX() >= 0.0F && event.getY() <= (float)this.getHeight() && event.getY() >= 0.0F) {
++this.radius;
} else {
this.isLastTouch = false;
this.x = -1.0F;
this.y = -1.0F;
}
}

if(event.getAction() == 3) {
this.isLastTouch = false;
this.x = -1.0F;
this.y = -1.0F;
}
}

return true;
}

protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {
if(!gainFocus) {
this.x = -1.0F;
this.y = -1.0F;
}

}

public boolean onInterceptTouchEvent(MotionEvent ev) {
return true;
}

public Bitmap makeCircle() {
Bitmap output = Bitmap.createBitmap(this.getWidth(), this.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawARGB(0, 0, 0, 0);
Paint paint = new Paint();
paint.setAntiAlias(true);
if(this.rippleColor == null) {
this.rippleColor = Integer.valueOf(this.makePressColor());
}

paint.setColor(this.rippleColor.intValue());
this.x = this.xRippleOrigin == null?this.x:this.xRippleOrigin.floatValue();
this.y = this.yRippleOrigin == null?this.y:this.yRippleOrigin.floatValue();
canvas.drawCircle(this.x, this.y, this.radius, paint);
if(this.radius > (float)(this.getHeight() / this.rippleSize)) {
this.radius += this.rippleSpeed;
}

if(this.radius >= (float)this.getWidth()) {
this.x = -1.0F;
this.y = -1.0F;
this.radius = (float)(this.getHeight() / this.rippleSize);
if(this.onClickListener != null) {
this.onClickListener.onClick(this);
}
}

return output;
}

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(this.x != -1.0F) {
Rect src = new Rect(0, 0, this.getWidth(), this.getHeight());
Rect dst = new Rect(0, 0, this.getWidth(), this.getHeight());
canvas.drawBitmap(this.makeCircle(), src, dst, (Paint)null);
this.invalidate();
}

}

protected int makePressColor() {
int r = this.backgroundColor >> 16 & 255;
int g = this.backgroundColor >> 8 & 255;
int b = this.backgroundColor >> 0 & 255;
r = r - 30 < 0?0:r - 30;
g = g - 30 < 0?0:g - 30;
b = b - 30 < 0?0:b - 30;
return Color.rgb(r, g, b);
}

public void setOnClickListener(OnClickListener l) {
this.onClickListener = l;
}

public void setRippleColor(int rippleColor) {
this.rippleColor = Integer.valueOf(rippleColor);
}

public void setxRippleOrigin(Float xRippleOrigin) {
this.xRippleOrigin = xRippleOrigin;
}

public void setyRippleOrigin(Float yRippleOrigin) {
this.yRippleOrigin = yRippleOrigin;
}
}


第三步:使用:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.yingke.duoximaos.myapplication.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal">

<LinearLayout

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >

<com.yingke.duoximaos.myapplication.LayoutRipple

android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="4dp"
android:paddingTop="4dp" >

<ImageView
android:id="@+id/tab_index_icon_1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:src="@mipmap/ic_launcher"/>

<TextView

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tab_index_icon_1"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:text="首页"
/>
</com.yingke.duoximaos.myapplication.LayoutRipple>
</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >

<com.yingke.duoximaos.myapplication.LayoutRipple

android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="4dp"
android:paddingTop="4dp" >

<ImageView
android:id="@+id/tab_index_icon_2"
android:layout_centerHorizontal="true"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>

<TextView

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tab_index_icon_2"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:text="首页"
/>
</com.yingke.duoximaos.myapplication.LayoutRipple>
</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >

<com.yingke.duoximaos.myapplication.LayoutRipple

android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="4dp"
android:paddingTop="4dp" >

<ImageView
android:id="@+id/tab_index_icon_3"
android:layout_centerHorizontal="true"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>

<TextView

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tab_index_icon_3"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:text="首页"
/>
</com.yingke.duoximaos.myapplication.LayoutRipple>
</LinearLayout>

<LinearLayout
android:id="@+id/tab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >

<com.yingke.duoximaos.myapplication.LayoutRipple
android:id="@+id/piple_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="4dp"
android:paddingTop="4dp" >

<ImageView
android:layout_centerHorizontal="true"
android:id="@+id/tab_index_icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>

<TextView
android:id="@+id/tab_index_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tab_index_icon"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="2dp"
android:text="首页"
/>
</com.yingke.duoximaos.myapplication.LayoutRipple>
</LinearLayout>

</LinearLayout>

</RelativeLayout>


效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: