StickHeaderLayout：Android悬浮导航栏的终极解决方案

孙娉果

于 2024-09-03 10:12:51 发布

阅读量575

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00576/article/details/141854182

版权

StickHeaderLayout：Android悬浮导航栏的终极解决方案

StickHeaderLayoutAn Android library supports sticking the navigator on the top when ItemView scrolls.项目地址:https://gitcode.com/gh_mirrors/st/StickHeaderLayout

在移动应用开发中，用户体验始终是设计的核心。特别是在Android平台上，如何优雅地处理界面滚动与导航栏的交互，一直是开发者关注的焦点。今天，我们要介绍的StickHeaderLayout库，正是为了解决这一痛点而生。

项目介绍

StickHeaderLayout是一个开源的Android库，旨在支持在滚动视图中将导航栏固定在顶部。与同类库相比，StickHeaderLayout提供了更加灵活、稳定且流畅的滚动体验。无论是RecyclerView、ScrollView、WebView还是ListView，它都能完美适配。

项目技术分析

StickHeaderLayout的核心优势在于其简洁而高效的设计。它通过在滚动视图上添加头部的方式，实现了导航栏的固定功能。这种方法不仅避免了重写视图或分发事件的复杂性，还确保了滚动的流畅性和稳定性。此外，该库无需预设高度值，所有布局都是自动调整的，大大简化了开发流程。

项目及技术应用场景

StickHeaderLayout适用于各种需要滚动视图与固定导航栏结合的场景。例如：

新闻阅读应用：在阅读长篇文章时，用户可以随时查看顶部导航栏，快速切换栏目或进行搜索。
电商应用：在商品列表页面，用户滚动浏览时，顶部导航栏始终可见，便于快速筛选或返回首页。
社交应用：在浏览动态或消息列表时，顶部导航栏提供便捷的操作入口，如发布新动态或查看通知。

项目特点

兼容性：支持API 11及以上版本，覆盖绝大多数Android设备。
灵活性：适用于多种滚动视图，包括RecyclerView、ScrollView、WebView和ListView。
流畅性：滚动体验平滑，即使在固定导航栏时也不会中断滚动动作。
自动化：无需手动设置高度，布局自动适应。
扩展性：支持下拉刷新功能，可与android-Ultra-Pull-To-Refresh等库无缝集成。

使用指南

Gradle依赖

首先，在项目的build.gradle文件中添加jitpack.io仓库：

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

然后，在模块的build.gradle文件中添加依赖：

dependencies { 
    compile 'com.github.w446108264:StickHeaderLayout:1.0.3'
}

布局配置

在布局文件中，StickHeaderLayout必须包含三个子视图，其中第一个子视图会随ViewPager滚动，第二个子视图会固定在顶部。

<com.stickheaderlayout.StickHeaderLayout 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=".ListViewSimpleActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#293"
        android:gravity="center"
        android:text="header" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#874"
        android:gravity="center"
        android:text="listview simple activity" />

    <ListView
        android:id="@+id/v_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</com.stickheaderlayout.StickHeaderLayout>

活动配置

在活动代码中，简单地设置列表视图的数据适配器即可。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_listview);

    ListView lv_data = (ListView)findViewById(R.id.v_scroll);

    int size = 100;
    String[] stringArray = new String[size];
    for (int i = 0; i < size; ++i) {
        stringArray[i] = ""+i;
    }

    ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, stringArray);

    lv_data.setAdapter(adapter);
}

下拉刷新

通过集成android-Ultra-Pull-To-Refresh库，可以轻松实现下拉刷新功能。

<in.srain.cube.views.ptr.PtrClassicFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:cube_ptr="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rotate_header_list_view_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    cube_ptr:ptr_duration_to_close="200"
    cube_ptr:ptr_duration_to_close_header="1000"
    cube_ptr:ptr_keep_header_when_refresh="false"
    cube_ptr:ptr_pull_to_fresh="false"
    cube_ptr:ptr_ratio_of_header_height_to_refresh="1"
    cube_ptr:ptr_resistance="1.1">

    <com.stickheaderlayout.StickHeaderLayout
        android:id="@+id/shl_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:scrollViewId="@+id/v_scroll"
        tools:context=".ListViewSimpleActivity">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#293"
            android:gravity="center"
            android:text="header" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#874"
            android:gravity="center"
            android:text="listview simple activity" />
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ListView
                android:id="@+id/v_scroll"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="80dp"
                android:text="TEST" />
        </RelativeLayout>
    </com.stickheaderlayout.StickHeaderLayout>

</in.srain.cube.views.ptr.PtrClassicFrameLayout>