Android滑動布局ConsecutiveScrollerLayout實現(xiàn)布局吸頂功能

前段時間我在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>
sticky.gif

項目地址: ConsecutiveScroller

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末恰矩,一起剝皮案震驚了整個濱河市缩功,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異序苏,居然都是意外死亡,警方通過查閱死者的電腦和手機捷凄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門杠览,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人纵势,你說我怎么就攤上這事踱阿。” “怎么了钦铁?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵软舌,是天一觀的道長。 經常有香客問我牛曹,道長佛点,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任黎比,我火速辦了婚禮超营,結果婚禮上,老公的妹妹穿的比我還像新娘阅虫。我一直安慰自己演闭,他們只是感情好,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布颓帝。 她就那樣靜靜地躺著米碰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪购城。 梳的紋絲不亂的頭發(fā)上吕座,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天,我揣著相機與錄音瘪板,去河邊找鬼吴趴。 笑死,一個胖子當著我的面吹牛侮攀,可吹牛的內容都是我干的锣枝。 我是一名探鬼主播厢拭,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼惊橱!你這毒婦竟也來了?” 一聲冷哼從身側響起箭昵,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤税朴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后家制,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體正林,經...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年颤殴,在試婚紗的時候發(fā)現(xiàn)自己被綠了觅廓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡涵但,死狀恐怖杈绸,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情矮瘟,我是刑警寧澤瞳脓,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站澈侠,受9級特大地震影響劫侧,放射性物質發(fā)生泄漏。R本人自食惡果不足惜哨啃,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一烧栋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拳球,春花似錦审姓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至呼猪,卻和暖如春画畅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背宋距。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工轴踱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谚赎。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓淫僻,卻偏偏與公主長得像诱篷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子雳灵,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內容