1. 程式人生 > >使用RecyclerView滑動時設定標題欄漸變或隱藏效果

使用RecyclerView滑動時設定標題欄漸變或隱藏效果

看一下效果圖。
wapchief.gif
這樣設計有利於發揮手機螢幕的利用空間,如果首頁內容較多的時候,不影響體驗。
所有的操作都是在RecyclerView監聽方法的onScrolled方法裡實現。
直接看該方法的官方介紹:

        /**
         * Callback method to be invoked when the RecyclerView has been scrolled. This will be
         * called after the scroll has completed.
         * <p>
         * This callback will also be called if visible item range changes after a layout
         * calculation. In that case, dx and dy will be 0.
         *
         * @param
recyclerView The RecyclerView which scrolled. * @param dx The amount of horizontal scroll. * @param dy The amount of vertical scroll. */
public void onScrolled(RecyclerView recyclerView, int dx, int dy){} }

意思是說放Recyclerview發生滾動的時候,該方法一直被呼叫。所有因滾動所產生的狀態改變都在這裡實現。
所以因滾動產生的檢視狀態改變也在這個方法內。
上篇文章,在該方法內實現滾動到底部自動載入的方法,思路是一個頁面內item的個數,當載入完後,就執行再載入一條資料。

現在我們要獲取滑動的距離
怎麼做?
onScrolled提供了一個dx,dy的方法。
但是該方法只能判定一次性滑動的距離,dx是橫向,dy是縱向。
而且預設停滯狀態距離是0,如果要向上返回滑動,那麼就會變成負數。也就是每一次滑動,只要停滯,距離都會重新計算。
所以我們只能重新定義一個方法,用來計算整體滑動的距離

   public int getScollYDistance() {
        int position = layoutManager.findFirstVisibleItemPosition();
        View firstVisiableChildView = layoutManager.findViewByPosition(position);
        int
itemHeight = firstVisiableChildView.getHeight(); return (position) * itemHeight - firstVisiableChildView.getTop(); }

LinearLayoutManager提供了獲取第一條item可見位置的方法。
然後通過findviewby例項化。
然後再用getHeight獲取item的高度。
最後計算得出實際的child。

獲取了child之後,我們就可以在onScolled方法根據距離進行操作

if (getScollYDistance() <= 0) {
            //靜止並處於最頂端狀態
            tvTitle.setBackgroundColor(black_transparent);
            tvTitle.setTextColor(white);
            tvTitle.setVisibility(View.VISIBLE);
        } else if (getScollYDistance() > 0 && getScollYDistance() <= 400) {//滑動在0-400距離的時候
            if (getScollYDistance() <= 200) {//處於滑動到中間的時候
                tvTitle.setTextColor(blue);
            } else {//滑出到200以外
//                tvTitle.setBackgroundColor(Color.argb((int) 255, 254, 184, 6));
                tvTitle.setTextColor(white);
            }
            float scale = (float) getScollYDistance() / 400;
            float alpha = (255 * scale);
            // 只是layout背景透明(仿知乎滑動效果)
            tvTitle.setBackgroundColor(Color.argb((int) alpha, 254, 184, 6));
        } else {
            tvTitle.setVisibility(View.GONE);
        }

這裡的數值是以畫素px為單位。在這裡可以根據距離在指定的位置設定想要的效果。
其中

            float scale = (float) getScollYDistance() / 400;
            float alpha = (255 * scale);
            // 只是layout背景透明(仿知乎滑動效果)
            tvTitle.setBackgroundColor(Color.argb((int) alpha, 254, 184, 6));

就是設定從全部到透明的方法。或者是反過來。

相關推薦

使用RecyclerView滑動設定標題漸變隱藏效果

看一下效果圖。 這樣設計有利於發揮手機螢幕的利用空間,如果首頁內容較多的時候,不影響體驗。 所有的操作都是在RecyclerView監聽方法的onScrolled方法裡實現。 直接看該方法的官方介紹: /**

Recyclerview滑動設定標題漸變效果

  前言 最近有這麼個需求,通過Recyclerview滑動監聽來設定標題欄漸變,整個介面是一個RecyclerView,一開始是沒有標題欄的,向上滑動到一定程度標題欄漸變。需求是不難,但是我想記錄一下這個基本的過程,有人需要了可以快速拿走,如果幫到你了,點個贊留個言都行,

Android 首頁當ScrollView向上滑動設定標題的背景透明變化

頁面整個佈局大體上是ScrollView裡面包含了一個ImageView和RecyclerView,所以先得到ImageView的高度,當ScrollView向上滑動時,設定標題欄的背景色、文字顏色,當超過ImageView的高度時,設定其背景為白色,字型為黑色。 重寫ScrollV

android 監聽webView滑動距離和標題顏色漸變

重寫webView之 X5WebView import android.annotation.SuppressLint; import android.content.Context; import android.graphics.drawable.Drawable;

android Recyclerview仿京東,滾動屏幕標題漸變

search oca net align sym enc href 分享 www 首先,本文代碼部分參考了conglida博主寫的自定義scrollview 實現標題欄漸變: http://download.csdn.net/download/conglida/918

微信小程式教程系列之設定標題和導航

微信小程式標題欄和導航欄的設定方法,具體內容如下 設定標題欄 標題欄window 在app.json檔案裡面,通過window物件裡面的屬性進行設定     示例: app.json:     執行: 設定導航欄 導航欄TabBar

Qt設定標題圖示、文字和標題樣式的方法

1.在專案資料夾裡建立名為*.rc的檔案,如mya.rc。 2.檔案中寫入IDI_ICON1 ICON DISCARDABLE "my.ico" 其中,my.ico為圖示的檔名。 3.將檔案my.ico拷貝到專案資料夾內。 4.若在visual studio中開發,在解決

繼承式自定義控制元件——滑動ScrollView,標題顏色漸變

MainActivity.java public class MainActivity extends AppCompatActivity { private ImageView mIvDetail; private ObservableScr

Android關於滾動View標題漸變的解決方案

這個工具類是在做某電商專案的時候通宵搞出來的,所以分享給各位開發者,避免無效的加班 /** * @文件說明: 處理滾動view的漸變效果 * @開發者: 江榮濤 * @建立時間: 2018/6/13 0:34 **/ public class Scroll

Android設定標題透明

在res\values\styles.xml 的中新增如下兩段程式碼即可 <item name="android:windowTranslucentStatus">true</item> <item name="an

微信小程式 --動態設定標題的文字

tabBar配置好以後,發現每個頁面的標題欄的文字都是一樣,這樣不符合需求哇。 開始把APP.JSON裡面的window相關內容複製到對應頁面,然後在修改文字標題, 但是沒有效果呀。 經過一番嘗試查詢測試。。。 原來是在對應頁面的JSON檔案了直接加入一句話就行了呀。 例如

Android帶你解析ScrollView--仿QQ空間標題漸變

緒論 今天來研究的是ScrollView-滾動檢視,滾動檢視又分橫向滾動檢視(HorizontalScrollView)和縱向滾動檢視(ScrollView),今天主要研究縱向的。相信大家在開發中經常用到,ScrollView的功能已經很強大了,但是仍然滿足不

實現滾動到一定位置,導航置頂的效果

html部分: <body> <h1>標題1</h1> <h1>標題2</h1> <h1>標題1</h1> <h1>標題2</h1> <div cl

Android中自定義ScrollView的滑動監聽事件,並在滑動漸變標題背景顏色

效果圖 滑動前: 滑動中: 滑動到底部: 專案結構 ObservableScrollView package com.jukopro.titlebarcolor; import android.content.Context; import android.u

IONIC下螢幕向上滑動漸變顯示隱藏標題

要達到的效果: 在向上滑動螢幕時漸變顯示原本隱藏的標題欄,向下滑動到某個位置時隱藏標題欄。 處理方法: 1、本想用指令來實現,以方便以後的重用,但是碰到幾個坑。 2、指令行不通以後,才實現第二種,也

iOS-UIScrollview滑動標題自動隱藏和顯示效果

  本文主要介紹如何實現當UIScrollview滑動時,自動隱藏和顯示標題欄的效果。其中佈局採用Autolayout的方式,並且為了程式碼精簡,使用了第三方庫Masonry,其使用參考【iOS-Masonry學習筆記】。使用它的原因是可以很好的結合動畫效果的實

iOS UITableView 滑動順序混亂多個cell內容相同

view sin 也會 一個隊列 section 一個 排序 一行 bsp 在使用UITableView時,由於cell的重用機制,在獲取後臺數據並填充cell時,會發生cell重復出現,界面紊亂。但這僅僅在擁有多個section的情況下會出現,沒有滾動的時候,單個se

Android ViewPager+HorizontalScrollView實現標題滑動(騰訊新聞)

flat off net 單位 上一個 undle scrollto 一起 ava 1) ViewPager提供了左右滑動切換頁面的方法,但是它所提供的標題只是無語,估計沒有真正的項目會照搬拿過來;並且它只能一頁一頁滑,我想直接查看最後一頁要滑半天; 2) 看了騰訊新聞客

Qt---去掉標題後,最大化應用程序窗口,窗口遮住了任務的問題

cat bsp zed 任務欄 available des 問題 ica try 不應該使用: this->showFullScreen(); 或 this->showMaximized(); 而應該使用: this->setGeometry(

WPF中自定義標題窗體最大化處理之WindowChrome

注意: 本文方法基礎是WindowChrome,而WindowChrome在.NET Framework 4.5之後才整合釋出的。見:WindowChrome Class 在.NET Framework 4.0中使用WindowChrome,需要安裝Ribbon來支援WindowCh