美文网首页自定义控件
移花接木1-仿百度外卖悬浮选项

移花接木1-仿百度外卖悬浮选项

作者: Volodymyr | 来源:发表于2016-07-23 15:59 被阅读243次

效果图

如图悬浮选项.gif,当用户滑动超过“地区、种类”选项时,选项不会消失,而是悬浮在最上方。这种设计方便用户随时进行选项操作。

悬浮选项.gif

实现原理

1.代码请点击我
2.其实有两层选项卡,如下图原理图.png。处于下层的是ListView的headerView,我们是看不到的。我们真正看到的是上层的选项卡,好像听着有些蒙X,我们可以看一下布局文件activity_main.xml。其中include中方的就是选项的布局。
3.之所以我们没有同时看到两层选项,是因为我们让上层的布局随着下层的布局走。通过监听ListView的OnScrollListener接口,我们使选项布局的bottomMargin取选项布局的自身高度和选项布局下面第一个item的getTop()的比较大的一个值,即可实现该效果。

原理图.png

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"></ListView>

    <include
        android:id="@+id/v_choice"
        layout="@layout/choice"
        android:layout_height="40dp"
        android:layout_width="match_parent" />
</FrameLayout>

另一种方法

实现原理

同样是有两层布局,同样是监听Listview的OnScrollListener事件,不过这次不是让上层布局跟着下层布局走,而是让上层布局在“需要的时候”显示出来,在“不需要”的时候隐藏。“需要”即选项布局下第一个item滑到最上方,“不需要”则相反。

和上一种方法比较

优点:代码简单;
缺点:当选项有点击事件时,需要同时处理上下两层的事件,而第一种方法则只需处理上层的事件即可。

相关文章

网友评论

    本文标题:移花接木1-仿百度外卖悬浮选项

    本文链接:https://www.haomeiwen.com/subject/hllwjttx.html