一个可以弹出多个按钮的自定义View控件

1,234 阅读2分钟

最近自己动手写了一个能够展开的类似Button的自定义ViewGroup,这是实现效果

思路

  1. 主要关注ActionButtonItemsActionMenu这两个类,其中ActionMenu是一个ViewGroup,而ActionButtonItems则是我们需要的子View。
  2. ActionMenu中确定子View的位置,然后通过监听点击事件,用ViewPropertyAnimator这个类来实现各个子View的透明度渐变和移动效果

参数

  1. dimens代表的是相邻Button之间的间距
  2. circleRadius代表的是子view的半径

实现

  1. ActionMenu的onLayout方法所确定的是最开始各个子View的位置,其中l,t,r,b的位置需要根据expandDirect来进行计算,然后调用子view的layout方法

        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
            for (int i = 0; i < childViewCount; i++) {
                ActionButtonItems items = (ActionButtonItems)getChildAt(i);
    
                switch (expandDirect) {
    				....		
                }
                items.layout(l, t, r, b);
            }
        }
    
  2. buttonItemOpenAnimation所代表的是点击过后,各个子View的透明度渐变和移动效果,利用ViewPropertyAnimator可以比较方便的实现需要的动画

        /**
         * buttonItem open animation
         */
        private void buttonItemOpenAnimation(int index,ActionButtonItems view) {
            if (index == 0) {
            } else {
    
                ViewPropertyAnimator propertyAnimator = view.animate().alpha(1).
                        setInterpolator(new LinearInterpolator()).setDuration(duration / 5);
    
                switch (expandDirect) {
                	.....
                }
                if (isOpen) {
                    view.setVisibility(View.VISIBLE);
                }
    
                propertyAnimator.start();
    
            }
            view.setOpen(isOpen);
        }
    
  3. 有些时候我们需要将提供的bitmap放大或缩小,这里我依据的是circleRadius参数,也就是说Bitmap的尺寸需要根据circleRadius来进行放大或缩小,因此在ActionButtonItems中实现了的getSpecifiedDimen方法

    //根据需要的宽高缩放图片
        public Bitmap getSpecifiedDimen(Bitmap bitmap, int newWidth, int newHeight) {
    
    // 获得图片的宽高
            int width = bitmap.getWidth();
            int height = bitmap.getHeight();
            // 计算缩放比例
            float scaleWidth = ((float) newWidth) / width;
            float scaleHeight = ((float) newHeight) / height;
            // 取得想要缩放的matrix参数
            Matrix matrix = new Matrix();
            matrix.postScale(scaleWidth, scaleHeight);
            // 得到新的图片
            Bitmap newbm = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix,true);
            return newbm;
    
        }
    

这是我的github地址,如果有什么问题和建议,欢迎通过issue提问,同时欢迎star,我会不定期地更新自己写的自定义view在github上

github地址

本文主要参考了:

果冻特效