美文网首页
实现吸顶滚动头部悬停效果

实现吸顶滚动头部悬停效果

作者: CarlosLynn | 来源:发表于2019-01-23 15:46 被阅读26次

    实现方式

    利用google的design包里的CoordinatorLayout和AppBarLayout即可快速便捷实现

    核心代码

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".demo.AppBarActivity">
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@android:color/holo_orange_light"
                android:gravity="center"
                android:text="这是头部滚动部分"
                app:layout_scrollFlags="scroll" />
    
            <com.kekstudio.dachshundtablayout.DachshundTabLayout
                android:id="@+id/dtb_cart"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_40"
                android:background="@color/c_ff0000"
                app:ddIndicatorColor="@color/c_ffffff"
                app:ddIndicatorHeight="@dimen/dp_3"
                app:tabIndicatorColor="@color/c_ffffff"
                app:tabSelectedTextColor="@color/c_ffffff"
                app:tabTextAppearance="@style/TabLayoutTextStyle2"
                app:tabTextColor="@color/c_ffffff" />
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_news"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/c_ffffff"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    实现过程分析

      1. 首先需要用CoordinatorLayout包住AppBarLayout
      1. 顶部可以滚动隐藏和悬停的部分都放在AppBarLayout里面
      1. 与AppBarLayout平级的部分放一个带有可滚动的View,比如上面的例子ViewPager
      1. 在第2步中可以滚动隐藏的View里面加上app:layout_scrollFlags="scroll"
      1. 在第3步添加的可滚动的View加上app:layout_behavior="@string/appbar_scrolling_view_behavior"

    design包带来的便利吧,很方便快捷地实现了滚动头部悬停效果

    属性总结:

    app:layout_scrollFlags有4种类型:
    分别可以产生四种不同的效果,有兴趣的同学可以自行研究吧!

    • scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen
    • enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
    • enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
    • exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting

    最后效果图

    01.gif

    源码demo已上传.
    原文:https://blog.csdn.net/andy092835/article/details/79817384

    相关文章

      网友评论

          本文标题:实现吸顶滚动头部悬停效果

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