美文网首页
学习水波进度条--自定义view(二)

学习水波进度条--自定义view(二)

作者: 姬94 | 来源:发表于2017-05-21 20:00 被阅读26次

    帖子太长,我换一个新帖子,以为,两个代码并没有什么重叠的东西,可以分来来讲,
    先看之前的intent吧,仅仅是一个,常驻内存用的server,他的,没有了。重点看看FloatWindowManager这个。


    FloatViewService.java

    FloatWindowManager

    //主类名字 是不是感觉,,有点,window的意思呀。
    public class FloatWindowManager implements View.OnTouchListener{
    //构造方法。
        private FloatWindowManager(Context context) {
            this.mContext = context;
    //看到,window中了吗?这是要干什么?哈哈,就是添加到主窗口中了。
            mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
            mFloatCircleView = new FloatCircleView(context);
            mFloatCircleView.setOnTouchListener(this);
            mFloatCircleView.setOnClickListener(new View.OnClickListener() {
                //FloatCircleView点击事件
                @Override
                public void onClick(View view) {
                    Log.d("tag","onclick");
    //                Toast.makeText(mContext,"FloatCircleView onclicked",Toast.LENGTH_SHORT).show();
    //下面会讲 这三个很重要的方法。
                    hideFloatCircleView();
                    showFloatMenuView();
                    mFloatMenuView.startAnimation();
                }
            });
    
            mFloatMenuView = new FloatMenuView(context);
    
            //初始化最小手动响应距离
            mTouchSlop = ViewConfiguration.get(mContext).getScaledTouchSlop();
        }
    
     /**
         * 显示浮窗体
         */
        public void showFloatCircleView() {
            if(mFloatCircleViewLayoutParams == null) {
                mFloatCircleViewLayoutParams = new WindowManager.LayoutParams();
                //设置宽和高为FloatCircleView的宽和高
                mFloatCircleViewLayoutParams.width = mFloatCircleView.getWidth();
                mFloatCircleViewLayoutParams.height = mFloatCircleView.getHeight();
                //设置对齐方式
                mFloatCircleViewLayoutParams.gravity = Gravity.LEFT|Gravity.TOP;
                //设置x,y点坐标
                mFloatCircleViewLayoutParams.x = 0;
                mFloatCircleViewLayoutParams.y = 0;
                //设置不可抢占焦点
                mFloatCircleViewLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;
                //设置类型为phone
                mFloatCircleViewLayoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;
                //设置背景颜色类型
                mFloatCircleViewLayoutParams.format = PixelFormat.RGBA_8888;
            }
    // 添加到,window中。
            mWindowManager.addView(mFloatCircleView, mFloatCircleViewLayoutParams);
        }
    
     /**
         * 显示浮窗体
         */
        public void showFloatMenuView() {
            if(mFloatMenuViewLayoutParams == null) {
                mFloatMenuViewLayoutParams = new WindowManager.LayoutParams();
                //设置宽和高为FloatCircleView的宽和高
                mFloatMenuViewLayoutParams.width = DesityUtils.getScreenWidth(mContext);
                mFloatMenuViewLayoutParams.height = DesityUtils.getScreenHeight(mContext)-DesityUtils.getStatubarHeight(mContext);
                //设置对齐方式
                mFloatMenuViewLayoutParams.gravity = Gravity.LEFT|Gravity.BOTTOM;
                //设置x,y点坐标
                mFloatMenuViewLayoutParams.x = 0;
                mFloatMenuViewLayoutParams.y = 0;
                //设置不可抢占焦点
                mFloatMenuViewLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;
                //设置类型为phone
                mFloatMenuViewLayoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;
                //设置背景颜色类型
                mFloatMenuViewLayoutParams.format = PixelFormat.RGBA_8888;
            }
            mWindowManager.addView(mFloatMenuView, mFloatMenuViewLayoutParams);
        }
    
     /**
         * 处理手势触摸事件 其实手势识别代码,还是比较简单的,很好看
         * @param view
         * @param event
         * @return
         */
        @Override
        public boolean onTouch(View view, MotionEvent event) {
            float x = event.getRawX();
            float y = event.getRawY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //记录第一次触摸点的坐标
                    mLastX = x;
                    mLastY = y;
    
                    mFirstX = x;
                    mFirstY = y;
                    break;
                case MotionEvent.ACTION_MOVE:
                    float deltaX = x - mLastX;
                    float deltay = y - mLastY;
                    //当手指移动时,更新其layoutParams,更新位置
                    mFloatCircleViewLayoutParams.x += deltaX;
                    mFloatCircleViewLayoutParams.y += deltay;
    
    //运动的时候 不停更新位置                 mWindowManager.updateViewLayout(mFloatCircleView, mFloatCircleViewLayoutParams);
    
                    mLastX = x;
                    mLastY = y;
    //运动的时候 刷新mFloatCircleView,
                    mFloatCircleView.setDragState(true);
                    break;
    
                case MotionEvent.ACTION_UP:
                    //当放开手指的时候,让FloatCircleView移动到左边或右边
                    //如果处于屏幕中间线的左边则让其移动到左边,如果处理屏幕中间线的右边则让其移动到右边
                    int width = DesityUtils.getScreenWidth(mContext);
    
                    if(x > width/2) {
                        mFloatCircleViewLayoutParams.x = width - mFloatCircleView.getWidth();
                    } else {
                        mFloatCircleViewLayoutParams.x = 0;
                    }
                    mWindowManager.updateViewLayout(mFloatCircleView, mFloatCircleViewLayoutParams);
                    mFloatCircleView.setDragState(false);
    
                    //处理拖动与点击事件冲突的解决:当搬运距离大于3的时候,不响应点击事件,否则响应点击事件
                    Log.d("action_up","can drag "+canDragAction(x - mFirstX, y - mFirstY));
                    return canDragAction(x - mFirstX, y - mFirstY);
            }
    
            return false;
        }
    }
    

    添加的是一个,mFloatCircleView ,和mFloatMenuView 哎呀,这个是啥,看看吧,

    mFloatCircleView 重点代码 有一套自定义 再来一遍

    public class FloatCircleView extends View {
    //触笔的初始化没有什么特别
    private void initPaint() {
    
            //设置画圆的paint的属性
            mCirclePaint = new Paint();
            mCirclePaint.setColor(mCirclePaintColor);
            mCirclePaint.setAntiAlias(true);
            mCirclePaint.setDither(true);
            mCirclePaint.setStyle(Paint.Style.FILL);
    
            //设置画text的paint的属性
            mTextPaint = new Paint();
            mTextPaint.setColor(mTextPaintColor);
            mTextPaint.setAntiAlias(true);
            mTextPaint.setDither(true);
            mTextPaint.setStyle(Paint.Style.STROKE);
            mTextPaint.setTextSize(mTextSize);
    // 图标的后面会用,一个初始化
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dragging_icon);
            mDraggingBitmap = Bitmap.createScaledBitmap(bitmap,mWidth,mHeight,true);
    
        }
    //看吧,有画画。。了 代码其实没有什么,画一个圆形,然后上面画一个文字。
     @Override
        protected void onDraw(Canvas canvas) {
        //这里的mDrag 是setDragState 下面的方法修改的
        //这里就是图标,和数字的切换
            if(mDrag) {
                //如果在drag状态则draw draggingbitmap,否则draw circle和text
                canvas.drawBitmap(mDraggingBitmap,0,0,null);
            } else {
                //画圆
                canvas.drawCircle(mWidth/2,mWidth/2,mHeight/2,mCirclePaint);
    
                //画text
                float textWidth = mTextPaint.measureText(mText);
                //draw text起始点
                int textX = (int) (getWidth()/2 - textWidth/2);
                Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
                //获取baseLine离descent的height
                float textBaseLineHeight = -(metrics.descent+metrics.ascent)/2;
                //因为drawText是从baseLine开始画的
                int textY = (int) (getHeight()/2 + textBaseLineHeight);
                canvas.drawText(mText,textX,textY,mTextPaint);
            }
          / * 设置当前控件是否为拖拽状态  FloatWindowManager 之前      
            *代码的用意
         * @param drag
         */
        public void setDragState(boolean drag) {
            this.mDrag = drag;
            invalidate();
        }
        }
    }
    

    FloatMenuView 代码,我们先看 flow_menu_layout.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical"
                    android:background="#33000000">
    
        <LinearLayout
            android:id="@+id/ll_menu_root"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:clickable="true"
            android:background="#f02f3942">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp">
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/fire"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:textColor="#ffffff"
                    android:textSize="20sp"
                    android:text="悬浮球"/>
            </LinearLayout>
    // 又出来自定义,,view一会看看是不是很幸福。。。
            <com.wanghaisheng.view.floatwindow.FloatProgressView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginBottom="18dp"/>
        </LinearLayout>
    </RelativeLayout>
    

    简单的可怕的代码,仅仅是一个继承的布局是不是思路的原因仅仅好布局。哈哈。而且LinearLayout也是一个view,可以随意添加windows中。。

    public class FloatMenuView extends LinearLayout {
    
        Animation animation;
    
        public FloatMenuView(Context context) {
            super(context);
    
    //        View menu = LayoutInflater.from(context).inflate(R.layout.flow_menu_layout,this);
            View menu = View.inflate(getContext(),R.layout.flow_menu_layout,null);
            LinearLayout llMenuRoot = (LinearLayout) menu.findViewById(R.id.ll_menu_root);
            animation = AnimationUtils.loadAnimation(context,R.anim.float_menu_in);
            animation.setFillAfter(true);
            llMenuRoot.setAnimation(animation);
    
            menu.setOnTouchListener(new OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {
                    FloatWindowManager manager = FloatWindowManager.getInstance(getContext());
                    manager.hideFloatMenuView();
                    manager.showFloatCircleView();
                    return false;
                }
            });
            addView(menu);
        }
        public void startAnimation() {
            animation.start();
        }
    }
    

    自定义的 FloatProgressView 还是继承 ProgressBar 代码我们就看重点的吧。

    public class FloatProgressView extends ProgressBar {
      //完全的,,,抄袭WaterProgressView 么有是没变化。。哈哈
    }
    

    整体的思路很简单,我比较喜欢对代码里面解释,感觉,这样和代码结合,好说话,,哈哈,如果有什么问题,就告诉我。我们一起来,,撸代码呀,,撸出血。

    相关文章

      网友评论

          本文标题:学习水波进度条--自定义view(二)

          本文链接:https://www.haomeiwen.com/subject/karvxxtx.html