android中上滑縮進最簡單的方法,CoordinatorLayout + CollapsingToolbarLayout

仿造 bilibili 的播放界面+推特的個人中心界面改造的
掌握這種布局后,任何需要上滑縮進的界面,全部可以實現,一勞永逸。
只需要掌握布局和幾行監聽代碼

gif效果

代碼走起

需要兩個包 (如何導入:略) compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.4.0'

布局:

<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="?attr/colorBackground">

          <android.support.design.widget.AppBarLayout                
                android:id="@+id/appbar"    
                android:layout_width="match_parent"    
                android:layout_height="wrap_content"    
                //當狀態欄收縮時候,同樣是沉浸式,需要在AppBarLayout內加上這個,讓AppBarLayout留出來一個狀態欄的位置,另需要一行代碼          
                android:fitsSystemWindows="true"   
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <!--滾動的時候縮進的方式,共5種-->
                 <!--enterAlways-->
                 <!--enterAlwaysCollapsed-->
                 <!--exitUntilCollapsed-->
                 <!--scroll-->
                 <!--snap-->
                <!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->

                <!--CollapsingToolbarLayout內的title文字不顯示-->
                <!--app:titleEnabled="false"-->

                <android.support.design.widget.CollapsingToolbarLayout    
                        android:layout_width="match_parent"    
                        android:layout_height="wrap_content"    
                        app:contentScrim="?attr/colorPrimary" 
                        app:layout_scrollFlags="scroll|exitUntilCollapsed"    
                        app:titleEnabled="false">

                <!--最后,將你需要滾動收縮的布局放到這里邊-->
                <!--舉例-->

                       <!--折疊模式 parallax/pin/none-->
                       <!--app:layout_collapseMode="parallax"-->

                       <!--設置視差滾動因子,值為:0~1-->
                       <!--app:layout_collapseParallaxMultiplier="0.5"-->

                       <RelativeLayout    
                             android:layout_width="match_parent"    
                             android:layout_height="160dp"    
                            //這一句為了收縮前的狀態欄也是沉浸式
                             android:fitsSystemWindows="true"    
                             app:layout_collapseMode="parallax">
                       </RelativeLayout>

                </android.support.design.widget.CollapsingToolbarLayout>
  
         <android.support.v7.widget.Toolbar    
               android:id="@+id/toolbar"    
               android:layout_width="match_parent"    
               android:layout_height="wrap_content"    
               app:layout_collapseMode="pin"    
               app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
         </android.support.v7.widget.Toolbar>

          </android.support.design.widget.AppBarLayout>


    <!--這里是滾動后停留的tablayout-->
  
     <!--app:layout_behavior,這個屬性作用就是聯動滾動-->
     <!--關于behavior:可以自定義出無數種聯動滾動特效,這里的上滑縮進是谷歌提供的,引用的是一個類文件。更多特效可去搜索這個屬性-->
    <LinearLayout   
          android:layout_width="match_parent"    
          android:layout_height="match_parent"    
          android:orientation="vertical"    
          app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout    
              android:id="@+id/main_tablayout"    
              android:layout_width="match_parent"    
              android:layout_height="wrap_content"    
              android:background="@color/color100White"   
              //注意這個只有5.0生效,5.0以下運行報錯,增加1dp的陰影
              android:elevation="1dp"    
              //以下都是一些tablayout的屬性
              app:tabGravity="fill"    
              app:tabIndicatorColor="?attr/colorMPrimary"    
              app:tabIndicatorHeight="4dp"    
              app:tabMode="fixed"   
              app:tabSelectedTextColor="?attr/colorMPrimary"    
              app:tabTextColor="?attr/colorTwoText">
        </android.support.design.widget.TabLayout>

       <!--ViewPager的fragment內必須有支持滾動的控件-->
        <android.support.v4.view.ViewPager        
              android:id="@+id/viewPager"       
              android:layout_width="match_parent"                                                  
              android:layout_height="match_parent" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

代碼:

1.設置沉浸狀態欄
//加上版本判斷,大于android4.4才有的屬性
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    
      window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);    
}
2.監聽actionbar滾動
appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {   
  @Override    
  public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {          
        //appbar.getTotalScrollRange() 拿到actionbar可滾動的最大距離
        //verticalOffset 當前的滾動距離
         if (Math.abs(verticalOffset) > appbar.getTotalScrollRange()/1.2) {                    
              toolbar.setTitle("文字");        
         } else {           
              toolbar.setTitle("");      
         }    
    }
});

END

如有解釋錯誤,請指出。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,401評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,011評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,263評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,543評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,323評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,874評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,968評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,095評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,605評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,551評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,720評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,242評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,961評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,358評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,612評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,330評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,690評論 2 370

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,582評論 25 707
  • 一.榜單介紹 排行榜包括四大類: 單一框架:僅提供路由、網絡層、UI層、通信層或其他單一功能的框架 混合開發框架:...
    偉子男閱讀 5,250評論 0 161
  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,461評論 2 45
  • 小寧的故事,與很多人不同。 第一次面詢小寧,她的出現,便是如黑塵一般寂靜。她悄無聲息站在我桌子旁邊,以致她試探性地...
    點點天恩閱讀 358評論 0 0
  • 天一下子就涼下來了,氣溫驟降,怪不得人家說秋天容易生愁緒,綿綿秋雨,晚涼西風,怎不叫人傷懷……
    自由和安閱讀 295評論 3 0