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

如有解释错误,请指出。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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