前段時間我在GitHub上開源了一個Android滑動布局ConsecutiveScrollerLayout样漆,主要是為了解決布局嵌套滑動和滑動沖突的問題乌企。另外還寫了兩篇文章用于介紹ConsecutiveScrollerLayout的實現(xiàn)原理和使用查乒。這篇文章是對講解ConsecutiveScrollerLayout實現(xiàn)原理的補充敦锌,主要是講解ConsecutiveScrollerLayout實現(xiàn)布局吸頂?shù)脑砟]有看過我前面那兩篇文章的朋友可以去看一下。
Android可持續(xù)滑動布局:ConsecutiveScrollerLayout
Android持續(xù)滑動布局ConsecutiveScrollerLayout的使用
雖然我寫ConsecutiveScrollerLayout是為了解決復雜布局的滑動問題凰棉,不過布局滑動吸頂?shù)男枨笤谄匠5拈_發(fā)中也很常見损拢,既然我已經實現(xiàn)了一個滑動布局陌粹,所以就干脆給它加上吸頂?shù)墓δ芰恕?/p>
以前我們實現(xiàn)布局滑動吸頂?shù)墓δ苋鱿畛S玫姆椒ň褪窃贔rameLayout里嵌套一個隱藏的、放在頂部的布局,和一個ScrollView或舞,ScrollView里再放一個跟隱藏的頂部布局一摸一樣的布局荆姆,然后監(jiān)聽ScrollView的滑動,如果ScrollView里需要吸頂?shù)牟季只銎帘斡车剩桶秧敳侩[藏的布局顯示出來胆筒。這種方法實現(xiàn)起來既麻煩也不優(yōu)雅。ConsecutiveScrollerLayout通過計算滑動位置和給需要吸頂?shù)膙iew設置y軸偏移量诈豌,讓需要吸頂?shù)牟季衷诨銎聊粫r懸浮在布局的頂部仆救。只要給布局設置一個屬性,就可以實現(xiàn)吸頂?shù)墓δ堋?/p>
ConsecutiveScrollerLayout吸頂懸浮功能的主要實現(xiàn)是在resetSticky()方法矫渔。當布局滑動或者發(fā)生變化的時候會調用這個方法彤蔽。
private void resetSticky() {
// 吸頂功能使用了Android 5.0才支持的API,所以Android 5.0才能吸頂
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// 獲取需要吸頂?shù)淖觱iew庙洼,ConsecutiveScrollerLayout支持設置多個吸頂?shù)膙iew顿痪。
List<View> children = getStickyChildren();
if (!children.isEmpty()) {
int count = children.size();
// 重置吸頂布局時,先讓所有的View恢復原來的狀態(tài)
for (int i = 0; i < count; i++) {
View child = children.get(i);
child.setTranslationY(0);
child.setTranslationZ(0);
}
// 需要吸頂?shù)腣iew
View stickyView = null;
// 下一個需要吸頂?shù)腣iew
View nextStickyView = null;
// 找到需要吸頂?shù)腣iew
for (int i = count - 1; i >= 0; i--) {
View child = children.get(i);
if (child.getTop() <= getScrollY()) {
stickyView = child;
if (i != count - 1) {
nextStickyView = children.get(i + 1);
}
break;
}
}
if (stickyView != null) {
int offset = 0;
if (nextStickyView != null) {
// 如果nextStickyView不為空油够,計算布局吸頂時需要設置的偏移量蚁袭。
// 因為下一個吸頂?shù)膙iew頂?shù)搅水斍拔數(shù)膙iew,需要把當前的view頂出屏幕
offset = Math.max(0, stickyView.getHeight() - (nextStickyView.getTop() - getScrollY()));
}
stickyChild(stickyView, offset);
}
}
}
}
private void stickyChild(View child, int offset) {
// 設置吸頂view的y軸偏移量石咬,讓它懸浮在頂部
child.setY(getScrollY() - offset);
// 設置吸頂view的translationZ為1
child.setTranslationZ(1);
}
/**
* 返回所有的吸頂子View(非GONE)
*/
private List<View> getStickyChildren() {
List<View> children = new ArrayList<>();
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() != GONE && isStickyChild(child)) {
children.add(child);
}
}
return children;
}
/**
* 是否是需要吸頂?shù)腣iew
*/
private boolean isStickyChild(View child) {
ViewGroup.LayoutParams lp = child.getLayoutParams();
if (lp instanceof LayoutParams) {
// 是否需要吸頂
return ((LayoutParams) lp).isSticky;
}
return false;
}
這里使用了一個isSticky的自定義LayoutParams屬性揩悄,這個屬性用于表示子view是否需要吸頂,如果ConsecutiveScrollerLayout的子view設置了app:layout_isSticky="true"鬼悠,表示這個view需要吸頂虏束。
吸頂?shù)脑硎峭ㄟ^ConsecutiveScrollerLayout的scrollY找到需要吸頂?shù)膙iew和下一個需要吸頂?shù)膙iew,之所以要找到下一個吸頂?shù)膙iew厦章,是因為布局繼續(xù)向上滑動時镇匀,下一個吸頂?shù)膙iew需要把當前吸頂?shù)膙iew頂出屏幕,所以要計算它們之間的偏移量袜啃。吸頂?shù)膙iew通過setY()設置y軸偏移量汗侵,讓它停留在頂部。最后我給吸頂?shù)膙iew設置了translationZ為1群发,這是由于Android布局的顯示層級晰韵,兩個view重疊時,后添加的會將先添加的覆蓋熟妓。為了讓吸頂?shù)膙iew不被后面的view覆蓋掉雪猪,所以需要給它設置一下z軸,z越大的view起愈,顯示的層級越高只恨。view的z等于translationZ+elevation译仗。除了一些特殊的控件,Android幾乎所有的view的這兩個值都是0。
下面是吸頂功能的使用和效果。
<?xml version="1.0" encoding="utf-8"?>
<com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scrollerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
<!-- 設置app:layout_isSticky="true"就可以使View吸頂 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:padding="10dp"
android:text="吸頂View - 1"
android:textColor="@android:color/black"
android:textSize="18sp"
app:layout_isSticky="true" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical"
app:layout_isSticky="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="吸頂View - 2 我是個LinearLayout"
android:textColor="@android:color/black"
android:textSize="18sp" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:padding="10dp"
android:text="吸頂View - 3"
android:textColor="@android:color/black"
android:textSize="18sp"
app:layout_isSticky="true" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.core.widget.NestedScrollView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:padding="10dp"
android:text="吸頂View - 4"
android:textColor="@android:color/black"
android:textSize="18sp"
app:layout_isSticky="true" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout>
項目地址: ConsecutiveScroller