【Android】ImageView水波效果（93/100）

原创

smartApi 2023-09-19 11:02:07 博主文章分类：android开发 ©著作权

文章标签 android 前端 UI UI设计 gif 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者smartApi的原创作品，请联系作者获取转载授权，否则将追究法律责任

【Android】ImageView水波效果（93/100）_前端

自定义RippleImageView继承原生ImageView，代码如下：

package top.lc951.myandroid.views;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Looper;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.example.indicatorlib.utils.Utils;


/**
 * 水波效果
 * @author lichong
 * 2022年07月26日13:46:36
 */
@SuppressLint("AppCompatCustomView")
public class RippleImageView extends ImageView {
    private Context mContext;
    private Paint mPaint=new Paint();
    private int mWidth,mHeight;
    private int mRadius;
    private int mIncrease;


    public RippleImageView(Context context) {
        super(context);
    }

    public RippleImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext=context;
        mIncrease= Utils.dp2px(mContext,5);
        mPaint.setColor(0x99FFFFFF);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth=getMeasuredWidth();
        mHeight=getMeasuredHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mRadius>0){
            canvas.drawCircle(mWidth/2,mHeight/2,mRadius,mPaint);
        }
    }

    public void setRippleColor(int color){
        mPaint.setColor(color);
    }

    public void startRipple(){
        mRadius=0;
        mHandler.post(mRipple);
    }

    private Handler mHandler=new Handler(Looper.myLooper());
    private Runnable mRipple=new Runnable() {
        @Override
        public void run() {
            mRadius+=mIncrease;
            if(mRadius*mRadius>(mWidth*mWidth/4+mHeight*mHeight/4)){
                mRadius=0;
                mIncrease=Utils.dp2px(mContext,5);
            }else{
                mIncrease+=Utils.dp2px(mContext,1);
                mHandler.postDelayed(this,50);
            }
            postInvalidate();
        }
    };

}

布局引用如下：

<top.lc951.myandroid.views.RippleImageView
        android:id="@+id/iv_ripple"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_label"

        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@mipmap/ic_img01"
        android:scaleType="fitXY"
        android:layout_margin="10dp"
        />

应用控制如下：

package top.lc951.myandroid.activity;

import android.content.Context;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

import top.lc951.myandroid.R;
import top.lc951.myandroid.views.RippleImageView;

/**
 * 水波图像效果
 * 参考{@link RippleImageView}
 */
public class RippleImageViewActivity extends AppCompatActivity {

    private RippleImageView rippleImageView;

    public static void actionActivity(Context context) {
        Intent intent = new Intent(context, RippleImageViewActivity.class);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ripple_image_view);
        rippleImageView=findViewById(R.id.iv_ripple);
        rippleImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rippleImageView.startRipple();
            }
        });
        initSpinner();
    }
    private String[] rippleNameArray = {"白色", "红色", "绿色", "蓝色", "黄色", "青色", "紫色"};
    private int[] rippleColoArray = {0x99ffffff, 0x99ff0000
            , 0x9900ff00, 0x990000ff
            , 0x99ffff00, 0x9900ffff
            , 0x99ff00ff};
    private void initSpinner() {
        ArrayAdapter<String> rippleAdapter = new ArrayAdapter<>(this,
                android.R.layout.simple_list_item_1, rippleNameArray);
        Spinner sp_ripple = findViewById(R.id.spinner);
        sp_ripple.setPrompt("请选择水波特效");
        sp_ripple.setAdapter(rippleAdapter);
        sp_ripple.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                rippleImageView.setRippleColor(rippleColoArray[position]);
                rippleImageView.startRipple();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });
        sp_ripple.setSelection(0);
    }
}