zoukankan      html  css  js  c++  java
  • Android 自定义控件之圆形扩散View(DiffuseView)

    实现效果

    这里写图片描述

    使用

    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

  • 相关阅读:
    centos通过yum安装mongodb
    js基于另一个数组排序数组
    centos 7 安装emule客户端
    typescript中interface和type的区别
    nodejs安装管理工具nvm的安装和使用
    PM2的参数配置
    centOS添加ipv6支持(仅限已分配ipv6地址和网关)
    linux执行计划任务at命令
    mysql中获取本月第一天、本月最后一天、上月第一天、上月最后一天等等
    win10子系统ubuntu内的nginx启动问题
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/7515592.html
Copyright © 2011-2022 走看看