概述
点聚式导航最初应用于Path中,它将用户最频繁使用的多个核心功能点汇聚在主界面中显示,方便用户随时呼出使用,它不同于传统标签栏那样占据界面最下方一栏,而是通过一个点的方式汇聚这些功能的入口。最新的Android平台设计规范在MATERIAL DESIGN中定义了这种导航交互方式,希望原生Android系统的应用大量采用这种导航方式。
几种不同形式的点聚式导航(图片来源)
在以前的项目中,遇到过很多次点聚式按钮的需求,不过每次都是从头开始写,要写大量的动画,而且几乎都是针对当前项目的,没什么扩展性,最近发现这种导航方式已经成为了一种设计的标准,因此封装了一个相对灵活的控件,方便以后使用。源码地址见:https://github.com/steveyg/PopButton
集成方式
本来打算封装成一个lib依赖提到maven库中的,但是由于实现的过程中使用了Activity,所以还是需要将部分代码拷贝到实际项目中。
然后在manifest中增加PopActivity
<activity
android: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.PopButton
android:id="@+id/popbutton"
android:layout_centerInParent="true"
android:background="@drawable/chooser_button"
android:layout_width="50dp"
android:layout_height="50dp" />
</RelativeLayout>
接着,创建一个Activity用来展示这个布局文件,我们在这个Activity中堆PopButton的部分属性进行设置
//获取PopButton
mPopButton = (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等方法设置了包括按钮样式在内的几个属性,我们还可以通过其他方法,实现别的效果
按钮弹出方向
PopButton共包含8中按钮弹出的方向:
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的效果
半透明遮罩
有时候,我们并不希望弹出后的背景是完全透明的,那么我们可以通过设置背景颜色的方式增加半透明的遮罩,比如下面我们设置了一个透明度为50%的黑色遮罩
mPopButton.getPopmodel().setBackground(0x88000000); //设置遮罩
当我们点击导航按钮的时候,背景会变暗,但由于是半透明的效果,所以仍能够看到上一级Activiy中的内容。
按钮旋转
在导航栏弹出的过程中,导航按钮和弹出的按钮都可以进行旋转,导航按钮的旋转很简单,只需要设置一个属性
mPopButton.getPopmodel().setRotateOfMainButton(45); //设置导航按钮旋转
而设置弹出按钮的旋转相对复杂,需要设置三个属性
mPopButton.getPopmodel()
.setRotateOfMenuButton(360) //设置弹出按钮旋转角度
.setRotateTime(200) //设置旋转的时间
.setRotateDelayTime(180); //设置旋转动画的延迟
导航按钮和弹出的按钮旋转效果如下图
点击事件
点聚式标签最关键的功能是为用户进行导航,因此需要我们为弹出的按钮增加点击事件的监听,PopButton使用ArrayList对其进行管理
ArrayList<View.OnClickListener> clickListenerList = new ArrayList<>();
for(int i = 0; i < 3 ; i++){
final int fi = i + 1;
clickListenerList.add(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(PopActivity.instance,"click button" + fi ,Toast.LENGTH_SHORT).show();
}
});
}
mPopButton.getPopmodel().setButtonClickListener(clickListenerList);
如果需要使用context,可以直接调用PopActivity.instance,点击事件监听的效果如下图
PopButton的功能就介绍到这里,这些属性已经能够满足大部分经典点聚式效果的需求,欢迎大家提出各种问题和建议,让PopButton变得更加完善。