利用PopButton实现类似Path的点聚式导航
概述
点聚式导航最初应用于Path中,它将用户最频繁使用的多个核心功能点汇聚在主界面中显示,方便用户随时呼出使用,它不同于传统标签栏那样占据界面最下方一栏,而是通过一个点的方式汇聚这些功能的入口。最新的Android平台设计规范在MATERIAL DESIGN中定义了这种导航交互方式,希望原生Android系统的应用大量采用这种导航方式。
几种不同形式的点聚式导航(图片来源)
在以前的项目中,遇到过很多次点聚式按钮的需求,不过每次都是从头开始写,要写大量的动画,而且几乎都是针对当前项目的,没什么扩展性,最近发现这种导航方式已经成为了一种设计的标准,因此封装了一个相对灵活的控件,方便以后使用。源码地址见:https://github.com/steveyg/PopButton
集成方式
本来打算封装成一个lib依赖提到maven库中的,但是由于实现的过程中使用了Activity,所以还是需要将部分代码拷贝到实际项目中。
然后在manifest中增加PopActivity
<activityandroid:name=".activity.PopActivity"android:theme="@android:style/Theme.Translucent" />
创建一个xml布局文件,在里面使用PopButton表示最主要的那个导航按钮(注意此处设置按钮的图片要使用background而不要用src)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.steveyg.popbutton.activity.MainActivity"><com.steveyg.popbutton.view.PopButtonandroid:id="@+id/popbutton"android:layout_centerInParent="true"android:background="@drawable/chooser_button"android:layout_width="50dp"android:layout_height="50dp" />
</RelativeLayout>
接着,创建一个Activity用来展示这个布局文件,我们在这个Activity中堆PopButton的部分属性进行设置
//获取PopButtonmPopButton = (PopButton) findViewById(R.id.popbutton);//设置弹出按钮的图标int[] res = {R.drawable.icon1,R.drawable.icon2,R.drawable.icon3};mPopButton.getPopmodel().setButtonImageResource(res);//设置其他属性mPopButton.getPopmodel().setNumOfButton(3) //弹出按钮的数量.setRadius(250) //按钮移动的距离.setDurationTime(400); //动画播放的时间
至此,一个最简单的点聚式导航完成,我们可以看到下面的效果
其他效果
在上面的例子中,我们通过setNumOfButton等方法设置了包括按钮样式在内的几个属性,我们还可以通过其他方法,实现别的效果
按钮弹出方向
public final static int UP = 1;public final static int DOWN = 2;public final static int LEFT = 3;public final static int RIGHT = 4;public final static int LEFT_UP = 5;public final static int LEFT_DOWN = 6;public final static int RIGHT_UP = 7;public final static int RIGHT_DOWN = 8;
通过setMenuDirection方法,可以设置不同的弹出方向,这样我们可以根据实际项目的需求,在不同的位置放置导航按钮。下图分别为DOWN和RIGHT_UP的效果
半透明遮罩
mPopButton.getPopmodel().setBackground(0x88000000); //设置遮罩
按钮旋转
mPopButton.getPopmodel().setRotateOfMainButton(45); //设置导航按钮旋转
而设置弹出按钮的旋转相对复杂,需要设置三个属性
mPopButton.getPopmodel().setRotateOfMenuButton(360) //设置弹出按钮旋转角度.setRotateTime(200) //设置旋转的时间.setRotateDelayTime(180); //设置旋转动画的延迟
导航按钮和弹出的按钮旋转效果如下图
点击事件
ArrayList<View.OnClickListener> clickListenerList = new ArrayList<>();for(int i = 0; i < 3 ; i++){final int fi = i + 1;clickListenerList.add(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(PopActivity.instance,"click button" + fi ,Toast.LENGTH_SHORT).show();}});}mPopButton.getPopmodel().setButtonClickListener(clickListenerList);
如果需要使用context,可以直接调用PopActivity.instance,点击事件监听的效果如下图
PopButton的功能就介绍到这里,这些属性已经能够满足大部分经典点聚式效果的需求,欢迎大家提出各种问题和建议,让PopButton变得更加完善。
利用PopButton实现类似Path的点聚式导航相关推荐
- NBT:利用细胞甘油三酯存储提高链霉菌中聚酮类化合物的效价
利用细胞内甘油三酯存储提高链霉菌中聚酮类化合物的效价 靶向代谢流分析(Glycosis, TCAcycle, beta-oxidation)由中科脂典平台完成 原文链接: https://www.na ...
- 利用SwipeRefreshLayout实现类似知乎客户端的一打开界面就自动刷新的效果
利用SwipeRefreshLayout实现类似知乎客户端的一打开界面就自动刷新的效果 看这里
- 利用html5实现类似微信的手机摇一摇功能
利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2 ...
- 利用VBA在EXCLE2010和2007中找回2003式的经典菜单和工具栏
2019独角兽企业重金招聘Python工程师标准>>> 众所周知,从微软的Office 12(也就是我们所说的Office 2007)开始,软件界面采用了Ribbon界面,又叫做功能 ...
- 利用NAS上的Web Station制作自己的导航页
利用NAS上的Web Station制作自己的导航页 先上图: 前言: NAS入手已经快两年了,基本上保持吃灰,可能是受消费主义思想影响,总觉得当时入手的DS220+配置太低(其实是一般人根本没有使用 ...
- mysql proxies_priv_Mysql5.7.18利用MySQLproxies_priv实现类似用户组管理实例分享
本文主要为大家详细介绍了Mysql 5.7.18利用MySQL proxies_priv实现类似用户组管理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 利用 MySQL pr ...
- android 自动界面刷新,利用SwipeRefreshLayout实现类似知乎客户端的一打开界面就自动刷新的效果...
前言 最近在学习下拉刷新的过程中,遇到了一个需求:实现一个图书馆藏的首页推荐页,为了追求良好的用户体验,要求刚进入页面时就开始刷新,如下图: 刚进入就刷新 为了实现这个效果使用了SwipeRefres ...
- matlab如何残差分析图,利用matlab绘制类似拟合、残差图(需手工合并)
对股票软件比较熟悉的同学都知道经常会看到这样的界面:上图显示的是股价的运行,下图显示的是一些技术指标(坐标轴可以不同向). 因而考虑用matlab绘制如上面所示的图形: function fit_pl ...
- weex开发实战(5)--利用wxc-tabbar实现类似安卓fragment分页效果
wxc-tabbar是官方提供的一个tabbar扩展,需要安装weex-components npm install weex-components --save 注意在安卓项目上,src最好写成 & ...
最新文章
- leetcode-55 跳跃游戏
- WPF xaml中列表依赖属性的定义
- 她说要介绍10000个开源项目?来!我们一起监督!
- 删除msconfig启动项不打勾的东西
- [2020.11.26NOIP模拟赛]询问【字符串hash】
- 前端学习(761):什么是对象为什么需要对象
- oracle表分区失效14400,Oracle11g:分区表数据操作出现ORA-14400异常处理详解
- varnish-cache使用
- mybatisplus查询今天的数据_Spring系列——MybatisPlus
- vuex使用模块的时候 获取state里的数据语法
- idea zookeeper插件使用_zookeeper的Java客户端操作
- TLV3501超高速电压比较器模块
- [Vue]动态加载组件的四种方式
- 关于iOS 12.2以及更高版本安装描述文件
- 华盛顿大学计算机科学,华盛顿大学UW(University of Washington)计算机科学Computer Science专业排名第21位(2021年THE世界大学商科排名)...
- 互斥事件的概念和公式_独立事件与互斥事件的区别与联系公式
- 3年功能测试经验,面试拿到15k难吗?
- Linux系统rar格式怎么解压,如何在linux下解压缩rar格式的文件压缩包
- Ubuntu教程,让你成为Ubuntu高手!
- 2017年最新App Store审核指南(官方)
热门文章
- jquery 时间戳与日期转换
- python修改列表元素_python 3 基础之列表和列表添加元素、修改元素、查找元素、删除元素、排序、嵌套、取最值...
- 线程 守护线程 递归锁
- 链路层交换机及和路由器的比较
- unity中将多个图片进行椭圆排序
- 计算机专业在清华学几年,考上清华退学,就为再考清华计算机?
- 国内首个《政务APP技术指标评价规范》团体标准正式出台
- GameStop逼空浪潮蔓延至白银市场,亚洲股市“韭菜”纷纷效仿,高盛: 如果逼空继续,整个金融市场将崩溃...
- 上海电子地图 来自百度电子地图库 含15、17、最高级别19级地图
- 新浪微博java开发_新浪微博API java开发