Android 具有水波紋點選效果的Tab切換
阿新 • • 發佈：2018-12-30
第一步：自定義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:[email protected]
* Signature:緣分是本書,翻的不經意會錯過,讀的太認真會流淚!!
* <p>
* TODO:類描述:
*/ 第二步：自定義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:[email protected]
* 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>
效果圖：
