廢話不多說摊鸡，直接上代碼，xml布局如下：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_ffffff">
<!--互動詳情頁面布局-->
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_f1f1f6"
android:stateListAnimator="@null"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior=".view.FlingBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
app:contentScrim="@color/color_ffffff"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- 背景圖 -->
<ImageView
android:id="@+id/ivBackGround"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/bg_lesson"
app:layout_collapseMode="parallax" />
<!-- 內容 -->
<LinearLayout
android:id="@+id/llTitleContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/s_50dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<!--app:layout_collapseParallaxMultiplier="0.7"-->
<TextView
android:id="@+id/tvDetailName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/s_15dp"
android:layout_marginRight="@dimen/s_15dp"
android:lineSpacingExtra="@dimen/s_4dp"
android:text="@string/str_place_holder"
android:textColor="@color/color_333333"
android:textSize="@dimen/s_18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tvClassName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/s_15dp"
android:layout_marginTop="@dimen/s_12dp"
android:layout_marginRight="@dimen/s_15dp"
android:text="@string/str_place_holder"
android:textColor="@color/color_666666"
android:textSize="@dimen/s_14sp"
android:textStyle="normal" />
<!--str_release_class-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/s_15dp"
android:layout_marginRight="@dimen/s_15dp"
android:orientation="horizontal">
<TextView
android:id="@+id/tvAccessCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/str_place_holder"
android:textColor="@color/color_666666"
android:textSize="@dimen/s_14sp"
android:textStyle="normal" />
<!--str_assess_code-->
<TextView
android:id="@+id/tvCopyAccessCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/s_15sp"
android:paddingTop="@dimen/s_12dp"
android:paddingRight="@dimen/s_15sp"
android:paddingBottom="@dimen/s_12dp"
android:text="復制"
android:textColor="@color/color_2b96ff"
android:textSize="@dimen/s_14sp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/s_15dp"
android:layout_marginRight="@dimen/s_15dp"
android:layout_marginBottom="@dimen/s_20dp">
<TextView
android:id="@+id/tvAccessMemberCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="0"
android:textColor="@color/color_ff9100"
android:textSize="@dimen/s_20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/tvAccessMemberCount"
android:layout_toRightOf="@+id/tvAccessMemberCount"
android:text="人參與"
android:textColor="@color/color_666666"
android:textSize="@dimen/s_14sp" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rvAccessMemberList"
android:layout_width="wrap_content"
android:layout_height="@dimen/s_28dp"
android:layout_alignParentRight="true" />
</RelativeLayout>
<!--腳下的圓角占位布局-->
<View
android:layout_width="match_parent"
android:layout_height="@dimen/s_10dp"
android:background="@drawable/shape_ffffff_top_left_right_5dp" />
</LinearLayout>
<!-- 一級標題 -->
<android.support.v7.widget.Toolbar
android:id="@+id/tbFirstTitle"
android:layout_width="match_parent"
android:layout_height="@dimen/s_44dp"
android:background="@android:color/transparent"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/s_44dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/ivBack"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="@dimen/s_15dp"
android:paddingRight="@dimen/s_15dp"
android:src="@drawable/nav_btn_back" />
<TextView
android:id="@+id/tvTitle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/color_333333"
android:textSize="@dimen/s_18sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/ivShare"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="@dimen/s_15dp"
android:paddingRight="@dimen/s_15dp"
android:src="@drawable/lesson_share_selector"
android:visibility="invisible" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<!-- 二級標題 -->
<RelativeLayout
android:id="@+id/rlSecondTitle"
android:layout_width="match_parent"
android:layout_height="@dimen/s_44dp"
android:layout_gravity="bottom"
android:background="@color/color_ffffff">
<TextView
android:id="@+id/tvCourseSummary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/s_15dp"
android:text="課程小節(jié)"
android:textColor="@color/color_333333"
android:textSize="@dimen/s_16sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tvCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/tvCourseSummary"
android:text="@string/str_place_holder"
android:textColor="@color/color_999999"
android:textSize="@dimen/s_14sp" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<!--單個item布局：layout_interactive_detail_first_item-->
<!--單個item布局：layout_interactive_detail_second_item-->
<android.support.v7.widget.RecyclerView
android:id="@+id/rvContentList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<TextView
android:id="@+id/tvContentEmpty"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:drawableTop="@drawable/balnk_file"
android:drawablePadding="@dimen/s_13dp"
android:enabled="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center_horizontal"
android:nestedScrollingEnabled="true"
android:paddingTop="@dimen/s_50dp"
android:paddingBottom="@dimen/s_50dp"
android:text="暫無內容"
android:textColor="@color/color_bbbbbb"
android:textSize="@dimen/s_15sp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
效果圖如下：
展開狀態(tài).jpg
收起狀態(tài).jpg
需要針對RecyclerView添加滾動監(jiān)聽器妙蔗，當RecyclerView停下來的時候判定它距離屏幕頂部的高度傲霸，然后讓appBarLayout執(zhí)行展開或者收起，這樣就能夠規(guī)避掉RecyclerView和CoordinatorLayout組合發(fā)生抖動之后卡住不動的問題，具體代碼如下：
// 添加頂部滑動監(jiān)聽器
if (appBarOffsetListener == null) {
appBarOffsetListener = new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (llTitleContent != null && tvTitle != null) {
if (verticalOffset <= -llTitleContent.getHeight() / 2) {
tvTitle.setText("互動課程詳情");
} else {
tvTitle.setText("");
}
}
}
};
}
// 頭條發(fā)生拖動時昙啄，需要變換主標題
appBarLayout.addOnOffsetChangedListener(appBarOffsetListener);
// 設置內容滾動監(jiān)聽器
if (scrollListener == null) {
scrollListener = new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
// 如果當前處于空閑狀態(tài)穆役，那么可以執(zhí)行判定操作
if (newState == RecyclerView.SCROLL_STATE_IDLE && rvContentList != null) {
int[] location = new int[2];
rvContentList.getLocationInWindow(location);
// 兩個標題欄的高度（一級標題和二級標題的高度） 加上 狀態(tài)欄的高度就是recyclerView距離屏幕頂部可能到達最近的距離
float minY = titleHeight * 2 + statusHeight;
// 如果當前recyclerView距離最高位置小于5個像素，那么認為應該關閉梳凛，否則打開
if (location[1] - minY <= 5) {
if (appBarLayout != null) {
appBarLayout.setExpanded(false, true);
}
}
// 否則打開整體布局
else if (appBarLayout != null) {
appBarLayout.setExpanded(true, true);
}
}
}
};
}
// 添加滾動監(jiān)聽器耿币，防止卡頓的發(fā)生
rvContentList.addOnScrollListener(scrollListener);
下面這個FlingBehavior 主要用于解決RecyclerView滑動之后，第一次點擊發(fā)生失效的問題
import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.view.ViewCompat;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.View;
/**
* 用于解決CoordinatorLayout與RecyclerView之間發(fā)生的點擊問題
*/
public class FlingBehavior extends AppBarLayout.Behavior {
public FlingBehavior() {
}
public FlingBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
stopNestedScrollIfNeeded(dyUnconsumed, child, target, type);
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int type) {
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
stopNestedScrollIfNeeded(dy, child, target, type);
}
private void stopNestedScrollIfNeeded(int dy, AppBarLayout child, View target, int type) {
if (type == ViewCompat.TYPE_NON_TOUCH) {
final int currOffset = getTopAndBottomOffset();
if ((dy < 0 && currOffset == 0) || (dy > 0 && currOffset == -child.getTotalScrollRange())) {
ViewCompat.stopNestedScroll(target, ViewCompat.TYPE_NON_TOUCH);
}
}
}
}
