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阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,431评论 25 707
  • 一.榜单介绍 排行榜包括四大类: 单一框架:仅提供路由、网络层、UI层、通信层或其他单一功能的框架 混合开发框架:...
    伟子男阅读 5,239评论 0 161
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,396评论 2 45
  • 小宁的故事,与很多人不同。 第一次面询小宁,她的出现,便是如黑尘一般寂静。她悄无声息站在我桌子旁边,以致她试探性地...
    点点天恩阅读 342评论 0 0
  • 天一下子就凉下来了,气温骤降,怪不得人家说秋天容易生愁绪,绵绵秋雨,晚凉西风,怎不叫人伤怀……
    自由和安阅读 281评论 3 0