首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android实现移动悬浮

    目的 我们在很多android应用中可能会看到悬浮按钮,最多应该就是360了,通过代码我们也可以实现这个功能 先上干货 Demo做完效果演示视频: ?...代码 整个程序代码我们在最后放到网盘里,这里我们只讲关键几点 首先我们先建一个windowmangerdemo项目 在activity_main里面增加一个button按钮 ?...重写onTouchEvent事件,我们用于可以随时点击移动和展开我们悬浮框 public boolean onTouchEvent(MotionEvent event) { switch...event.getRawX(); yInScreen = event.getRawY() - getStatusBarHeight(); // 手指移动时候更新小悬浮位置...我们把大小悬浮穿参数分别对应不同LayoutParams,都在这里处理 ---- FloatWindow 做一个floatWindow继承自Service 通过Handler和Time控件来刷新悬浮窗是否一直存在

    4.6K40

    Material Design 实战 之第三弹—— 悬浮按钮交互提示

    在官方给出示例中,最简单且最具代表性立面设计就是悬浮按钮了,这种按钮不属于主界面平面的一部分,而是位于另外一个维度,因此就会给人一种悬浮感觉。...以及,本文继续记录除了Toas另外一种交互式提示工具。 文章提要与总结 ---- 1. FloatingActionButton 1.1....一个漂亮悬浮按钮就出现在屏幕右下角了: ? ? ?...下面实战悬浮按钮点击事件: 在MainActivityonCreate()中添加以下代码: //悬浮按钮点击事件 FloatingActionButton fab = (FloatingActionButton...而Snackbar则在这方面进行了扩展,它允许在提示当中加人一个交互按钮,当用户点击按钮时候可以执行一些额外逻辑操作。

    1.8K30

    JS游戏开发 移动地图实现

    一、前言 这一讲内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他就轮到大家思考哦!...首先来说,我对游戏开发可以算是不怎么深入,因为现在程序员爱用canvas,我却就只会拿几个div凑和。不过没关系,因为做出来同样是游戏。哈!废话最近有点多,望大家原谅。接下来请看代码解析。...现在做一下解释:移动是代表可以向四面八方走动,地图就是地图,可以是世界地图,中国地图,游戏地图。。。反正必须是一张图。在此多说了两句,不过没关系,因为了解情况比不知庐山真面目要好得多。...另一点值得注意得是:当点击边框附近调用函数时,我用了一个很特别的方法让地图一直移动,除非你松开鼠标。...这个方法就是用setInterval()等待几秒后又移动,setInterval()又是个不停循环东东,于是就一直调用下去,当松开鼠标时,就用clearInterval();让setInterval(

    7.2K60

    Android实现悬浮拖拽Button

    本文实例为大家分享了Android实现悬浮拖拽Button具体代码,供大家参考,具体内容如下 1、简介 最近,因为项目需要,需要制作一个界面上拖拽按钮,网上也有多实例,看了下大部分都是示例不全或讲解不清晰...左边界距离, getRight():子View右边界到父View左边界距离 // 如下几个数据表示view应该在布局中位置 int left = getLeft...即可实现拖拽功能,具体原理主要在于onTouchEvent和layout两个函数使用,具体细节不在讲述,代码注释比较清晰。...drawable/drag_button_bg" android:layout_margin="20dp" android:padding="10dp" android:text="悬浮...\n按钮1" android:textSize="15sp" android:layout_gravity="right" android:textColor="#ffffff"

    2.4K10

    教你实现一个悬浮拖动并在滑动页面时会自动收缩vue侧边组件按钮

    一、前言 实现一个悬浮拖动且自定义一个侧边按钮,在实际业务开发中可以根据业务需要进行调整 效果图 最终实现效果,在移动端收缩时可以加点延时判断增加一下最终流畅性 二、创建组件 创建一个div.../assets/imgs/return-up-page.png" @click="XXX()"> 复制代码 定义组件样式设置悬浮层级等 .float-info{ box-shadow:...:首先获得页面宽度并减去按钮宽度及距离页面两侧距离得到按钮初始宽度位置,再通过页面高度*页面上下距离比例得到组件高度位置 created() { this.clientWidth = document.documentElement.clientWidth...,组件应该跟随手指移动移动。...,等于则代表了停止滑动,这时判断一下当前组件在页面左侧还是右侧并调整相关距离参数,这样就实现了停止拖动按钮按钮自动回缩至侧边效果。

    4.8K40

    Js+Css做一个弹起压下效果按钮

    好几天没写js和css了,昨天看一个大神博客时候无意中看到他一个效果做很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习过程! 效果: ? 我们今天做一个这样按钮!...我首先说一下我思路,我刚开时看到时候在想,无非就是画一个背景阴影,然后利用js改变阴影宽度,但是这样有一个问题就是上面的字体不会改变,我开始是做成了这样: ?...这里很明显就看出来了是有问题,上面的字体没有改变位置,说明我思路是不对,然后我在想,那么既然不改变阴影宽度,只能是改变按钮本身位置了,但是他在页面上怎么改变按钮位置呢?...给他一个相对固定位置不就行了吗?于是就想到最外侧加一个div就可以了! 源码: <!...这个其实主要用到没有什么新技术,只是一些不是很常用css,加阴影关键字: box-shadow 这个关键字可以直接打扫W3Cschool里面看详解,这里就不班门弄斧了!

    1.7K20

    Android快速实现触摸移动悬浮

    本文实例为大家分享了Android实现触摸移动悬浮具体代码,供大家参考,具体内容如下 1.触摸移动悬浮快速实现 UI ? 2....悬浮窗实现 2.1 悬浮窗权限 为了偷懒,我SDK选择比较低17,如果不配置权限,则应用会运行报错 正规流程,查询是否有悬浮窗权限,如果没有需要提示,并跳转到悬浮窗设置界面“即是否允许运行在其他应用上面...WindowManager.LayoutParams.WRAP_CONTENT; mParams.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT; // 实现悬浮窗可以移动属性...WindowManager.LayoutParams.WRAP_CONTENT; mParams.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT; // 实现悬浮窗可以移动属性...,希望对大家学习有所帮助。

    1.2K20

    Auto.js悬浮

    悬浮窗一般用来显示当前脚本运行状态和信息,是最为重要的人机交互方式。悬浮窗在脚本停止运行时会自动关闭,因此,要保持悬浮窗不被关闭,需要用一个空setInterval来实现。...与floaty.window()函数产生悬浮窗不同是:该悬浮窗不会增加任何额外功能(调整大小、位置按钮),可以根据自己需要编写任何布局。...FloatyWindow对象 悬浮窗对象,可通过ID获取悬浮窗界面上控件。...关闭悬浮窗; FloatyWindow.close() 如果悬浮窗已经是关闭状态,将不执行任何操作,被关闭后悬浮窗不能再显示。 2.9. ...设置是否可以触摸; FloatyRawWindow.setTouchable(touchable) touchable值为ture表示触摸悬浮窗 ,false表示不可触摸悬浮窗。

    5.6K20

    模拟按钮访问性

    为了创建更加漂亮按钮,我们在项目实践中经常使用A、SPAN等元素模拟按钮,而不是使用更合语义input[button]或者button元素。...使用这种方法我们可以快速创建各浏览器表现一致按钮,免受各种bug困扰,但同时也带来了访问性问题。...可能无法获得焦点 之所以是“可能”,是因为如果我们使用是A元素,那么这个“假”按钮是可以获得焦点,但如果我们使用span等其他不可聚焦元素,辅助工具用户就很难去发现这个按钮。...无法获得准确语义和指令 模拟按钮只是披上了按钮外衣,辅助工具获得信息仍然是它们真实面目。...解决办法:使用role=”button”增加语义,告知辅助工具自己角色。 缺少原生按钮默认键盘行为 激活一个原生按钮,除了使用鼠标点击外,还可以使用Enter或空格键进行键盘操作。

    88030

    移动端解决悬浮层(悬浮header、footer)会遮挡住内容方法

    固定Footer Bootstrap框架提供了两种固定导航条方式:    ☑  .navbar-fixed-top:导航条固定在浏览器窗口顶部    ☑  .navbar-fixed-bottom:导航条固定在浏览器窗口底部...使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应类名即可: 实现原理: 实现原理很简单,就是在navbar-fixed-top和navbar-fixed-bottom使用了position...:fixed属性,并且设置navbar-fixed-toptop值为0,而navbar-fixed-bottombottom值为0。...块,这个 块高度设置为与同样高,不包含任何内容,这样就可以起到一个占位符效果,在页面最底占据与同样高度空间,当然页面滑到最下方,原本悬动块就会与这个占位块完美重叠。...代码如下:   唯一缺点是不符合语义化,增加了无实质内容空标签。

    1.3K10

    简易拖动桌面悬浮窗效果Demo

    由此可知,要实现360手机卫士那样悬浮窗效果,就需要使用系统级别的悬浮窗 下面学习实现桌面悬浮窗效果代码步骤: Demo描述,悬浮窗为一个ImageView ,可以在桌面 ,任意应用,锁屏上方任意移动...此窗口不能获得输入焦点,否则影响锁屏 // FLAG_NOT_FOCUSABLE 悬浮窗口较小时,后面的应用图标由不可长按变为长按,不设置这个flag的话,home页划屏会有问题 // FLAG_NOT_TOUCH_MODAL...; 8、将悬浮窗添加到WindowManager对象中 windowManager.addView(imageView,lp); 9.设置悬浮响应事件  这里为移动悬浮窗操作,可以自己扩展添加点击等响应事件...,后面的应用图标由不可长按变为长按,不设置这个flag的话,home页划屏会有问题 47 lp.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE...private float nowY; 68 private float tranX; //悬浮移动位置相对值 69 private float

    3.2K70

    微信小程序|拖动悬浮实现

    问题描述 不管是小程序还是软件网页等,页面上悬浮窗总是能够引起我们注意,而一个悬浮实现,在微信小程序开发官方文档中,可将其理解为一个移动视图容器,那么该使用什么组件来实现这样一个功能呢?...解决方案 一个移动视图容器实现只需要调用官方文档一个movable-view组件,然后再对wxml进行简单配置即可实现。...需要了解是:movable-viewdirection属性支持以下四个值: 1、all-任意方向拖动 2、vertical-纵向拖动 3、horizontal-横向拖动 4、none-不能拖动 tips.../images/icon_component_HL.png'> 结语 我们总是在软件或者网页中,看到自由移动悬浮窗...,而通常是一个不需要拖动悬浮窗,甚至无法拖动悬浮窗,后续将继续深入学习这个过程实现。

    3.1K10

    教你制作移动导航栏

    目前移动导航栏非常常见,以网易、京东、淘宝为首,都用到了此类导航栏,即可以左右滑动,选择更多。...见下图紫色圈内 网易新闻客户端 本文将会介绍这类导航栏做法,方法很多,但关键思路是一样,希望给大家带来帮助 一、最顶滚动条 上面移动那个条,我们会想到带有滚动功能控件,无非就是UITableView...这也是本文重点:根据选中栏目(按钮),分别为topScroll设置不同ContentOffset,主要有三种情况:一、选中栏目是前几个 二、选中栏目时后几个 三、选中其他栏目 前两种情况没办法偏移到界面中间.../**选择某个项目*/ func selectButton(index:NSInteger){ //把当前按钮重置为原来颜色 self.selectButton?....contentOffset; //选中栏目的最前几个:scrollView偏移值 + 那个按钮X值 <= 当前显示窗口中间X值 if contentOffset.x <

    1.6K60
    领券