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

2019-01-23  本文已影响26人  CarlosLynn

实现方式

利用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>

实现过程分析

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

属性总结:

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

最后效果图

01.gif

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

上一篇下一篇

猜你喜欢

热点阅读