CoordinatorLayout+TabLayout + AppBarLayout + CollapsingToolbarLayout + ViewPager 实现悬停效果

当APP 运行起来这是效果，请看上面 .现在问题来了,我想让TabLayout悬停在顶部，同时让标题栏消失

1	fragment_home.xml布局如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorBlack">

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/homeAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="90dp"
android:gravity="top"
android:minHeight="40dp"
app:layout_collapseMode="pin" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="420dp"
android:background="@color/colorBlack"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:overScrollMode="never">

<GridLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="48dp"
android:background="@color/colorBlack"
android:columnCount="4"
android:baselineAligned="false"
android:rowCount="1">

<TextView
android:id="@+id/tvQuickBuying"
style="@style/HomeGridViewStyle"
android:drawableTop="@drawable/app_home_icon_quick_buying"
android:text="@string/app_home_quick_buying" />

<TextView
android:id="@+id/tvContractTrade"
style="@style/HomeGridViewStyle"
android:drawableTop="@drawable/app_home_icon_contract_trade"
android:text="@string/app_home_contract_trade" />

<TextView
android:id="@+id/tvContractData"
style="@style/HomeGridViewStyle"
android:drawableTop="@drawable/app_home_icon_contract_data"
android:text="@string/app_home_contract_data" />

<TextView
android:id="@+id/tvHelpCenter"
style="@style/HomeGridViewStyle"
android:drawableTop="@drawable/app_home_icon_help_center"
android:text="@string/app_home_help_center" />

</GridLayout>

<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:baselineAligned="false"
android:layout_height="160dp" />

<com.bbx.bmtc.views.PageIndicatorView
android:id="@+id/pageIndicator1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:baselineAligned="false"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="6dp"
android:drawableRight="@drawable/app_icon_home_dropdown"
android:drawablePadding="6dp"
android:text="@string/app_home_ranking_list"
android:textColor="@color/colorWhite"
android:baselineAligned="false"
android:textSize="@dimen/text_size_h2" />
</LinearLayout>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="@drawable/bg_tablayout_grey">

<com.google.android.material.tabs.TabLayout
android:id="@+id/homeTabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:textAllCaps="false"
app:tabIndicator="@drawable/bg_tab_tab_indicator"
app:tabIndicatorColor="@color/bg_tablayout_glide"
app:tabIndicatorHeight="39dp"
app:tabSelectedTextColor="@color/colorWhite"
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="@color/colorWhite">

<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="38dp"
android:text="@string/app_home_up_ranking" />

<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="38dp"
android:text="@string/app_home_down_ranking" />

<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="38dp"
android:text="@string/app_home_24_deal_vol" />

</com.google.android.material.tabs.TabLayout>
</FrameLayout>

<com.bbx.bmtc.views.HeadNavigationView
android:id="@+id/homeHeadView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backText="@string/app_home_title"
app:backTextColor="@color/colorWhite"
app:backTextSize="20"
app:hasBack="false"
app:layout_collapseMode="pin"
app:rightIcon="@drawable/app_icon_home_msg" />

</com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这时要注意几个问题:

1、CollapsingToolbarLayout上的app:layout_scrollFlags="scroll|exitUntilCollapsed"

2、Toolbar上的app:layout_collapseMode="pin" 这个主要用于占位，并且在原位置不动

3、ViewPager上的app:layout_behavior="@string/appbar_scrolling_view_behavior"

4、bg_tab_tab_indicator.xml 在drawable目录下

1
2
3
4

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp" />
</shape>

5、bg_tablayout_glide.xml

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#40FFFFFF" android:state_selected="true" />
<item android:color="#646464" android:state_selected="false" />
</selector>

6、用于监听滑过的偏移量，方便做UI效果处理

1
2
3
4
5
6
7

homeAppBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
if (verticalOffset < -1000) {
homeHeadView.visibility = View.GONE
} else {
homeHeadView.visibility = View.VISIBLE
}
})

当滑动的时候，到顶部会出现下面的效果

这时候问题又来了, viewPager里面添加的fragment内容，不能滑动，只好添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

NestedScrollView包裹内容

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorDefaultDark"
android:fillViewport="true"
android:overScrollMode="never">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<com.bbx.bmtc.views.NodataLayout
android:id="@+id/noDataLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />

<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srlEnableAutoLoadMore="false"
app:srlEnableLoadMore="true"
app:srlEnablePureScrollMode="true">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/pageList"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>

</androidx.core.widget.NestedScrollView>

完美解决，哈哈