美文网首页自定义控件
移花接木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