开源库【FreeRadioGroup】--淡出、自由拖动、自动贴边，类似于苹果的虚拟辅助按钮

关注

原创最新推荐文章于 2026-04-21 09:21:11 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

FreeRadioGroup-类似于苹果的虚拟辅助按钮，可以淡出、拖动、松手后自动贴边等.zip 类似于苹果的虚拟辅助按钮，可以淡出、拖动、松手后自动贴边等使用在build.gradle 中添加:allprojects { repositories { ... maven { url "https://jitpack.io" } } }添加依赖compile 'com.github.Sbingo:FreeRadioGroup:v1.0.0'xml: <sbingo.freeradiogroup.FreeRadioGroup android:id="@ id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="5dp" android:background="@drawable/black_bg" app:autoBack="true" //松手后是否自动回到父布局左侧或右侧 app:millisInFuture="2500" //从松手到淡出的时间 app:toAlpha="0.3" //淡出后的透明度值 app:moveable="true"> //是否能拖动 <RadioButton ..... /> . . . <RadioButton ..... /> </sbingo.freeradiogroup.FreeRadioGroup> 立即下载

*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
###demo演示
这里写图片描述
###简单描述

这个可自由拖动的RadioGroup 在松手后能自动贴合父布局的左侧或右侧并淡出，同时它对setOnCheckedChangeListener 没有造成影响。
虽然它是个RadioGroup，但所用的思路和方法可以轻松地将任意的View或ViewGroup实现类似的功能。(有多简单？我会告诉你只要将继承的父类改一下就好了么……)

###由来
项目中需要用demo中所示的三个选择来切换页面，我选择了用RadioGroup来做这个，本来也很顺利，轻松就搞定这个了。但作为追求用户体验的程序员，对这一坨黑黑的区域实在看不下去了，决定给它加个淡出功能。本来弄个onTouchListener就可以了，可是这和setOnCheckedChangeListener有冲突，触摸事件被子view消耗了，就不会进入onTouch方法中了，如果把事件拦截了，OnCheckedChange方法又会没用了。所以我想了一下，可以在RadioGroup的分发或拦截方法中实现淡出，但不消耗事件，继续向下分发，也就不会对OnCheckedChange方法造成影响。后来自定义了RadioGroup就一发不可收拾，决定干脆将它的功能做得更完善，否则我会睡不着的！于是，一个功能还算可以的FreeRadioGroup就诞生了~
###技术分析
####淡出
我使用了定时器CountDownTimer，在初始化时开始倒计时：

private void init(Context context, AttributeSet attrs) {
    countDownTimer = new MyCountDownTimer(millisInFuture, countDownInterval);
    countDownTimer.start();
}

在倒计时结束时改变透明度，实现淡出效果：

 public class MyCountDownTimer extends CountDownTimer {

        public MyCountDownTimer(long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);
        }

        @Override
        public void onTick(long millisUntilFinished) {
        }

        @Override
        public void onFinish() {
            setAlpha(toAlpha);
        }
    }

在分发事件中，手指按下时取消倒计时，同时恢复到不透明状态：

case MotionEvent.ACTION_DOWN:
      setAlpha(1f);
      countDownTimer.cancel();
      break;

手指松开后，重新开始倒计时：

case MotionEvent.ACTION_UP:
     countDownTimer.start();
     break;

这样，就实现了触摸时不透明，松手后到达预定时间就淡出到预定透明度的效果。
####自由拖动
我通过控制leftMargin和topMargin来实现拖动功能，按照以下步骤实现：

在手指按下时，记录当前触摸点的绝对坐标和当前的margin：

case MotionEvent.ACTION_DOWN:
                setAlpha(1f);
                countDownTimer.cancel();
                if (moveable) {
                    MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
                    currentX = ev.getRawX();
                    currentY = ev.getRawY();
                    currentLeft = lp.leftMargin;
                    currentTop = lp.topMargin;
                }
                break;

手指移动过程中，计算出触摸点移动的距离，将算出的移动距离加上之前记录的margin值作为当前的margin并赋值，然后更新当前触摸点的绝对坐标，就可以实现跟随手指移动了。

case MotionEvent.ACTION_MOVE:
                if (moveable) {
                    currentLeft += ev.getRawX() - currentX;
                    currentTop += ev.getRawY() - currentY;
                    lp.leftMargin = currentLeft;
                    lp.topMargin = currentTop;
                    setLayoutParams(lp);
                    currentX = ev.getRawX();
                    currentY = ev.getRawY();
                }
                break;

但是光这样还不够，因为没有控制好边界，会出现你不想看到的画面，哈哈。

下面我们来控制移动边界，使其在合理的范围内移动。

既然我是通过leftMargin和topMargin来实现拖动功能，就要分别算出这两个值的最小和最大值，使它们一直处于最小和最大值之间，边界问题自然就解决了。

先来看我画的一张示意图：

这里写图片描述

如上图所示：我们要将移动范围控制在白色区域内，两个红色箭头所示的距离就是我们的控制手段。
很明显，minLeftMargin就是左侧的蓝色距离，minTopMargin就是上部的蓝色距离，而最大值的计算请看以下代码，相信聪明的你一看就懂了。这些计算我放在onSizeChanged方法中（为什么？你懂的）：

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        if (moveable) {
            ViewGroup parentView = ((ViewGroup) getParent());
            MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
            viewWidth = getRight() - getLeft();
            viewHight = getBottom() - getTop();
            parentWidth = parentView.getMeasuredWidth();
            parentHeight = parentView.getMeasuredHeight();
            minLeftMargin = lp.leftMargin;
            leftPadding = parentView.getPaddingLeft();
            rightDistance = lp.rightMargin + parentView.getPaddingRight();
            maxLeftMargin = parentWidth - rightDistance - viewWidth - leftPadding;
            minTopMargin = lp.topMargin;
            topPadding = parentView.getPaddingTop();
            bottomDistance = lp.bottomMargin + parentView.getPaddingBottom();
            maxTopMargin = parentHeight - bottomDistance - viewHight - topPadding;
        }
    }

这样就获得了minLeftMargin、maxLeftMargin、minTopMargin、maxTopMargin这4个主要数值以及其他辅助数值。

接下来就要在移动的过程中检查并控制在边界之内：

case MotionEvent.ACTION_MOVE:
                if (moveable) {
                    currentLeft += ev.getRawX() - currentX;
                    currentTop += ev.getRawY() - currentY;
                    //判断左边界
                    currentLeft = currentLeft < minLeftMargin ? minLeftMargin : currentLeft;
                    //判断右边界
                    currentLeft = (leftPadding + currentLeft + viewWidth + rightDistance) > parentWidth ? maxLeftMargin : currentLeft;
                    //判断上边界
                    currentTop = currentTop < minTopMargin ? minTopMargin : currentTop;
                    //判断下边界
                    currentTop = (topPadding + currentTop + viewHight + bottomDistance) > parentHeight ? maxTopMargin : currentTop;
                    MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
                    lp.leftMargin = currentLeft;
                    lp.topMargin = currentTop;
                    setLayoutParams(lp);
                    currentX = ev.getRawX();
                    currentY = ev.getRawY();
                }
                break;

这样不管怎么拖动，始终在合理的边界中，拖起来就更爽了！

####松手后贴边
我只做了左右贴边，简单地判断了下松手时距离父布局左右距离的大小来决定贴左侧还是右侧。

因为我们已经有了minLeftMargin和maxLeftMargin，所以这个就简单了，只需要将minLeftMargin或maxLeftMargin作为松手后的leftMargin就可以了。

但是这样直接赋值效果会很突兀，突然出现在侧边了。于是，我们给它加个属性动画，慢慢地回到侧边。

首先写一个包装类：

    class Wrapper {
        private ViewGroup mTarget;

        public Wrapper(ViewGroup mTarget) {
            this.mTarget = mTarget;
        }

        public int getLeftMargin() {
            MarginLayoutParams lp = (MarginLayoutParams) mTarget.getLayoutParams();
            return lp.leftMargin;
        }

        public void setLeftMargin(int leftMargin) {
            MarginLayoutParams lp = (MarginLayoutParams) mTarget.getLayoutParams();
            lp.leftMargin = leftMargin;
            mTarget.requestLayout();
        }
    }

这个包装类会告诉系统对leftMargin这个属性该干什么，在里面我们对leftMargin赋予新值并重绘，随着时间的推移，leftMargin不断改变，从而实现动画效果。

接着在手指放开后，判断左右距离，利用这个包装类，开始500ms的动画：

case MotionEvent.ACTION_UP:
                countDownTimer.start();
                if (moveable && autoBack) {
                    MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
                    int fromLeftMargin = lp.leftMargin;
                    if (getLeft() < (parentWidth - getLeft() - viewWidth)) {
                        lp.leftMargin = minLeftMargin;
                    } else {
                        lp.leftMargin = maxLeftMargin;
                    }
                    ObjectAnimator marginChange = ObjectAnimator.ofInt(new Wrapper(this), "leftMargin", fromLeftMargin, lp.leftMargin);
                    marginChange.setDuration(500);
                    marginChange.start();
                }
                break;

你会发现、你会讶异，它就这样回到了侧边~~~

####深藏功与名
要知道，我们这些功能是写在分发事件中的，可不能因此导致子view某些功能失效。因此最后别忘了加这么一句：

        return super.dispatchTouchEvent(ev);

就这样，深藏功与名，假装自己什么都没干，你的子View们啥也母鸡，哈哈哈。

###库使用方法

在项目的根 build.gradle 文件中添加：

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

在模块中添加依赖：

compile 'com.github.Sbingo:FreeRadioGroup:v1.0.0'

在xml布局文件中使用（有4个可配置选项）：

 <sbingo.freeradiogroup.FreeRadioGroup
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp"
        android:background="@drawable/black_bg"
        app:autoBack="true"           //松手后是否自动回到父布局左侧或右侧
        app:millisInFuture="2500"     //从松手到淡出的时间
        app:toAlpha="0.3"             //淡出结束的透明度值
        app:moveable="true">          //是否能拖动
        <RadioButton
		    .....
            />
            .
            .
            .
        <RadioButton
		    .....
            />
</sbingo.freeradiogroup.FreeRadioGroup>

###完整源码和demo点这里

###如果觉得有用，不妨顺手点个Star，谢谢。

收录于