Android 点击屏幕其他位置隐藏Floating Action Button

来源:互联网 发布:淘宝夏季新款女装 编辑:程序博客网 时间:2024/06/18 09:15

功能要求

当用户点击fab的时候,屏幕上的其他区域应该是不可点击的,如果用户点击其他区域,那么就应该收缩fab回到初始状态。
观察一下其他应用:
这里写图片描述

这里写图片描述
发现实质点击按钮之后启动了新的fragment,并将背景设置为半透明。

具体实现

首先,随便找一个fab的开源库:

compile 'net.i2p.android.ext:floatingactionbutton:1.9.0'

然后,activity里的fab的作用是启动一个新的fragment:

public class MainActivity extends AppCompatActivity {    private FloatingActionsMenu fab_menu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        fab_menu = (FloatingActionsMenu) findViewById(R.id.fab_activity);        fab_menu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {            @Override            public void onMenuExpanded() {                getSupportFragmentManager()                        .beginTransaction()                        .add(android.R.id.content, new FabFragment(), "fragment_fab")                        .addToBackStack("fragment:fab")                        .commit();                //点击之后回复原状,这样在从fragment返回之后仍然是原来的样子                fab_menu.collapse();            }            @Override            public void onMenuCollapsed() {            }        });    }}

为了实现点击屏幕其他地方隐藏fab,需要实现onTouchListener接口中的onTouch()方法,将返回值改为true,这样就说明成功处理了触摸事件,会结束当前的fragment。

public class FabFragment extends Fragment implements View.OnClickListener, View.OnTouchListener {    private FloatingActionButton fab_commmon;    private FloatingActionButton fab_help;    private FloatingActionsMenu fab;    public FabFragment() {        // Required empty public constructor    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        View v = inflater.inflate(R.layout.fragment_blank, container, false);        v.setOnClickListener(this);        initView(v);        initEvent();        return v;    }    private void initView(View v) {        fab = (FloatingActionsMenu) v.findViewById(R.id.fab);        fab_commmon = (FloatingActionButton) v.findViewById(R.id.action_a);        fab_help = (FloatingActionButton) v.findViewById(R.id.action_b);        fab.expand();    }    private void initEvent() {        fab_commmon.setOnClickListener(this);        fab_help.setOnClickListener(this);    }    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.root:                getActivity().getSupportFragmentManager().popBackStack();                break;            case R.id.action_a:                //执行某些操作                getActivity().getSupportFragmentManager().popBackStack();                break;            case R.id.action_b:                //执行某些操作                getActivity().getSupportFragmentManager().popBackStack();                break;        }    }    @Override    public boolean onTouch(View view, MotionEvent motionEvent) {        return true;    }}

这时实现后的效果:
这里写图片描述

源码下载

原创粉丝点击