Android 具有水波纹点击效果的Tab切换
2016-11-11 13:10
423 查看
第一步:自定义CustomView
第二步:自定义LayoutRipple extends 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>
效果图:
相关文章推荐
- Android 一个Activity 里面放置多个 Fragment 实现点击切换的Tab 页面效果
- Android_UI_点击按钮切换背景效果实现
- Android开发——实现点击图片切换效果
- Android_UI_点击按钮切换背景效果实现
- android selector tab文字颜色 切换效果
- android ViewPager实现App主界面Tab菜单页面切换和点击事件
- android的Tab切换效果
- Android Tab页面手势滑动切换以及动画效果
- Android点击按钮切换背景效果-selector使用方法
- Android点击屏幕出现水波纹效果
- Android 水波纹点击效果(Ripple Effect)
- Android_UI_点击按钮切换背景效果实现
- 【android开发笔记】如何让ImageButton去掉白色边框和让ImageButton具有点击效果
- android 控件点击波纹效果
- android模仿移动MM Tab 点击 背景 滑动效果
- android中实现tab标签切换时的一些效果
- Android_UI_点击按钮切换背景效果实现
- android fragmenttabhost 有点击效果却没有切换的解决方法
- Android 图片实现按钮点击切换效果
- Android 水波纹点击效果(Ripple Effect)