实现效果
使用
XML中:
<com.airsaid.diffuseview.widget.DiffuseView android:id="@+id/diffuseView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" app:diffuse_color="@color/colorAccent" app:diffuse_coreColor="@color/colorPrimaryDark" app:diffuse_coreImage="@android:drawable/ic_menu_search" app:diffuse_coreRadius="100" app:diffuse_maxWidth="300" app:diffuse_width="4"/>
代码中:
DiffuseView mDiffuseView = (DiffuseView) findViewById(R.id.diffuseView); mDiffuseView.start(); // 开始扩散 mDiffuseView.stop();// 停止扩散
属性&方法
属性名 | java方法 | 作用 |
---|---|---|
diffuse_color | setColor(int colorId) | 设置扩散圆颜色 |
diffuse_coreColor | setCoreColor(int colorId) | 设置中心圆颜色 |
diffuse_coreImage | setCoreImage(int imageId) | 设置中心圆图片 |
diffuse_coreRadius | setCoreRadius(int radius) | 设置中心圆半径 |
diffuse_maxWidth | setMaxWidth(int maxWidth) | 设置最大扩散宽度 |
diffuse_width | setDiffuseWidth(int width) | 设置扩散圆宽度,值越小越宽 |
代码
/** * Created by zhouyou on 2016/9/27. * Class desc: * * 这是一个自定义圆圈扩散View */ public class DiffuseView extends View { /** 扩散圆圈颜色 */ private int mColor = getResources().getColor(R.color.colorAccent); /** 圆圈中心颜色 */ private int mCoreColor = getResources().getColor(R.color.colorPrimary); /** 圆圈中心图片 */ private Bitmap mBitmap; /** 中心圆半径 */ private float mCoreRadius = 150; /** 扩散圆宽度 */ private int mDiffuseWidth = 3; /** 最大宽度 */ private Integer mMaxWidth = 255; /** 是否正在扩散中 */ private boolean mIsDiffuse = false; // 透明度集合 private List<Integer> mAlphas = new ArrayList<>(); // 扩散圆半径集合 private List<Integer> mWidths = new ArrayList<>(); private Paint mPaint; public DiffuseView(Context context) { this(context, null); } public DiffuseView(Context context, AttributeSet attrs) { this(context, attrs, -1); } public DiffuseView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DiffuseView, defStyleAttr, 0); mColor = a.getColor(R.styleable.DiffuseView_diffuse_color, mColor); mCoreColor = a.getColor(R.styleable.DiffuseView_diffuse_coreColor, mCoreColor); mCoreRadius = a.getFloat(R.styleable.DiffuseView_diffuse_coreRadius, mCoreRadius); mDiffuseWidth = a.getInt(R.styleable.DiffuseView_diffuse_width, mDiffuseWidth); mMaxWidth = a.getInt(R.styleable.DiffuseView_diffuse_maxWidth, mMaxWidth); int imageId = a.getResourceId(R.styleable.DiffuseView_diffuse_coreImage, -1); if(imageId != -1) mBitmap = BitmapFactory.decodeResource(getResources(), imageId); a.recycle(); } private void init() { mPaint = new Paint(); mPaint.setAntiAlias(true); mAlphas.add(255); mWidths.add(0); } @Override public void invalidate() { if(hasWindowFocus()){ super.invalidate(); } } @Override public void onDraw(Canvas canvas) { // 绘制扩散圆 mPaint.setColor(mColor); for (int i = 0; i < mAlphas.size(); i++) { // 设置透明度 Integer alpha = mAlphas.get(i); mPaint.setAlpha(alpha); // 绘制扩散圆 Integer width = mWidths.get(i); canvas.drawCircle(getWidth() / 2, getHeight() / 2, mCoreRadius + width, mPaint); if(alpha > 0 && width < mMaxWidth){ mAlphas.set(i, alpha - 1); mWidths.set(i, width + 1); } } // 判断当扩散圆扩散到指定宽度时添加新扩散圆 if (mWidths.get(mWidths.size() - 1) == mMaxWidth / mDiffuseWidth) { mAlphas.add(255); mWidths.add(0); } // 超过10个扩散圆,删除最外层 if(mWidths.size() >= 10){ mWidths.remove(0); mAlphas.remove(0); } // 绘制中心圆及图片 mPaint.setAlpha(255); mPaint.setColor(mCoreColor); canvas.drawCircle(getWidth() / 2, getHeight() / 2, mCoreRadius, mPaint); if(mBitmap != null){ canvas.drawBitmap(mBitmap, getWidth() / 2 - mBitmap.getWidth() / 2 , getHeight() / 2 - mBitmap.getHeight() / 2, mPaint); } if(mIsDiffuse){ invalidate(); } } /** * 开始扩散 */ public void start() { mIsDiffuse = true; invalidate(); } /** * 停止扩散 */ public void stop() { mIsDiffuse = false; } /** * 是否扩散中 */ public boolean isDiffuse(){ return mIsDiffuse; } /** * 设置扩散圆颜色 */ public void setColor(int colorId){ mColor = colorId; } /** * 设置中心圆颜色 */ public void setCoreColor(int colorId){ mCoreColor = colorId; } /** * 设置中心圆图片 */ public void setCoreImage(int imageId){ mBitmap = BitmapFactory.decodeResource(getResources(), imageId); } /** * 设置中心圆半径 */ public void setCoreRadius(int radius){ mCoreRadius = radius; } /** * 设置扩散圆宽度(值越小宽度越大) */ public void setDiffuseWidth(int width){ mDiffuseWidth = width; } /** * 设置最大宽度 */ public void setMaxWidth(int maxWidth){ mMaxWidth = maxWidth; } }
源码下载
GitHub:https://github.com/Airsaid/DiffuseView
时间: 2024-10-23 09:51:05