AndroidWorldAndroid开发之路Android Material

android中上滑缩进最简单的方法,CoordinatorLa

2017-01-12  本文已影响1117人  丶dtdsn

仿造 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

如有解释错误,请指出。

上一篇下一篇

猜你喜欢

热点阅读