var floatyWin = floaty.window(
<vertical padding="4" h="260dp" layout_weight="1">
<horizontal gravity="center" marginTop="1"> <!-- 减小间距 -->
<text id="timeDisplay" textSize="10" layout_weight="1" textColor="#FF0000" />
</horizontal>
<horizontal gravity="center_vertical" marginTop="1" visibility="gone"> <!-- 减小间距 -->
<text text="密码:" textSize="12" />
<input id="pwdInput" text="" password="true" layout_weight="1" hint="支付密码" width="100dp" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1"> <!-- 减小间距 -->
<button id="countToggleBtn" text="1" h="40"layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1"> <!-- 减小间距 -->
<button id="shopType" text="送到家" h="40"layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1"> <!-- 减小间距 -->
<button id="startBtn" text="小程序开始" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1"> <!-- 减小间距 -->
<button id="hjStartBtn" text="盒机会员购" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1"> <!-- 减小间距 -->
<button id="closeBtn" text="关闭" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
</vertical>
);
增加背景,可以让页面随意拖动,其它不要变化
回答
要在现有浮窗中添加背景并实现拖动功能,需修改布局并添加触摸事件处理。以下是修改后的代码:
// 文档地址 https://docs.hamibot.com/
var floatyWin = floaty.window(
<vertical padding="4" h="260dp" layout_weight="1"
android:background="#888888"> <!-- 添加灰度背景 -->
<horizontal gravity="center" marginTop="1">
<text id="timeDisplay" textSize="10" layout_weight="1" textColor="#FF0000" />
</horizontal>
<horizontal gravity="center_vertical" marginTop="1" visibility="gone">
<text text="密码:" textSize="12" />
<input id="pwdInput" text="" password="true" layout_weight="1" hint="支付密码" width="100dp" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1">
<button id="countToggleBtn" text="1" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1">
<button id="shopType" text="送到家" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1">
<button id="startBtn" text="小程序开始" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1">
<button id="hjStartBtn" text="盒机会员购" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
<horizontal gravity="center" marginTop="1">
<button id="closeBtn" text="关闭" h="40" layout_weight="1" style="Widget.AppCompat.Button.Colored" textSize="10" />
</horizontal>
</vertical>
);
// 启用触摸事件(默认已启用)
floatyWin.setTouchable(true);
// 添加拖动逻辑
floatyWin.setOnTouchListener(function(view, event) {
switch(event.getAction()) {
case event.ACTION_DOWN:
// 记录初始触摸点坐标
this.x = event.getRawX();
this.y = event.getRawY();
break;
case event.ACTION_MOVE:
// 计算偏移量并更新窗口位置
var dx = event.getRawX() - this.x;
var dy = event.getRawY() - this.y;
floatyWin.setPosition(floatyWin.getX() + dx, floatyWin.getY() + dy);
this.x = event.getRawX();
this.y = event.getRawY();
break;
}
return true;
});
修改说明:
android:background="#888888"
为垂直布局添加灰度背景(可替换为具体图片路径)- 通过
setOnTouchListener
实现拖动功能:ACTION_DOWN
记录触摸起始坐标ACTION_MOVE
计算偏移量并更新窗口位置- 返回
true
表示消费事件(阻止后续传递)
注意: 拖动功能需要保持浮窗的 setTouchable(true)
状态(默认已启用),若需禁止拖动可设置 setTouchable(false)
。