zoukankan      html  css  js  c++  java
  • CoordinatorLayout实现的效果(标题栏效果)

    一、效果

    CoordinatorLayouy是一个能够协调子布局的容器布局。

    使用引入:

    compile 'com.android.support:design:24.1.1'

    常见的使用方法如下:
    1.与AppbarLayout共同包裹Toolbar可以实现滚动隐藏Toolbar和重现Toolbar。

    实现布局:(通过布局就可以实现这样的效果)CoordinatorLayout + AppBarLayout + Toolbar  实现该效果

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto"
     4     android:layout_width="match_parent"
     5     android:layout_height="match_parent"
     6     android:fitsSystemWindows="true"
     7     android:orientation="vertical">
     8 
     9     <android.support.design.widget.AppBarLayout
    10         android:id="@+id/app_bar"
    11         android:layout_width="match_parent"
    12         android:layout_height="wrp_content"
    13         android:fitsSystemWindows="true"
    14         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    15 
    16           <android.support.v7.widget.Toolbar
    17               android:id="@+id/toolbar"
    18               android:layout_width="match_parent"
    19               android:layout_height="?attr/actionBarSize"
    20               app:layout_scrollFlags="scroll|enterAlways"
    21               app:navigationIcon="@drawable/ic_arrow_back" />
    22     </android.support.design.widget.AppBarLayout>
    23 
    24     <LinearLayout
    25         android:layout_width="match_parent"
    26         android:layout_height="match_parent"
    27         android:orientation="vertical"
    28         app:layout_behavior="@string/appbar_scrolling_view_behavior">
    29 
    30         <LinearLayout
    31             android:layout_width="match_parent"
    32             android:layout_height="wrap_content"
    33             android:background="@color/colorPrimary">
    34 
    35             <TextView
    36                 android:layout_width="0dp"
    37                 android:layout_height="wrap_content"
    38                 android:layout_gravity="center"
    39                 android:layout_weight="1"
    40                 android:gravity="center"
    41                 android:padding="10dp"
    42                 android:text="未开始"
    43                 android:textColor="#fff"
    44                 android:textSize="16sp" />
    45 
    46             <TextView
    47                 android:layout_width="0dp"
    48                 android:layout_height="wrap_content"
    49                 android:layout_weight="1"
    50                 android:gravity="center"
    51                 android:padding="10dp"
    52                 android:text="已开始"
    53                 android:textColor="#fff"
    54                 android:textSize="16sp" />
    55         </LinearLayout>
    56 
    57         <android.support.v7.widget.RecyclerView
    58             android:id="@+id/recycle_view"
    59             android:layout_width="match_parent"
    60             android:layout_height="match_parent"
    61             android:padding="10dp"
    62             android:scrollbars="vertical" />
    63     </LinearLayout>
    64 
    65 </android.support.design.widget.CoordinatorLayout>

    2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView实现 视差 滚动效果

              (一)                      (二)

                

    视差效果一和二的区别看代码:(注释的一行放开,就是效果二) CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar 实现效果

     1 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     xmlns:app="http://schemas.android.com/apk/res-auto"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:fitsSystemWindows="true"
     6     android:orientation="vertical">
     7 
     8     <android.support.design.widget.AppBarLayout
     9         android:id="@+id/app_bar"
    10         android:layout_width="match_parent"
    11         android:layout_height="200dp"
    12         android:fitsSystemWindows="true"
    13         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    14 
    15         <android.support.design.widget.CollapsingToolbarLayout
    16             android:id="@+id/collapsing_toolbar"
    17             android:layout_width="match_parent"
    18             android:layout_height="match_parent"
    19             android:fitsSystemWindows="true"
    20             app:contentScrim="?attr/colorPrimary"
    21             app:expandedTitleMarginEnd="64dp"
    22             app:expandedTitleMarginStart="48dp"
    23             app:layout_scrollFlags="scroll|exitUntilCollapsed">
    24             
    25            <!-- <ImageView
    26                 android:layout_width="match_parent"
    27                 android:layout_height="match_parent"
    28                 android:scaleType="centerCrop"
    29                 android:src="@mipmap/a"
    30                 app:layout_collapseMode="parallax"
    31                 app:layout_collapseParallaxMultiplier="0.7" />-->
    32 
    33             <android.support.v7.widget.Toolbar
    34                 android:id="@+id/toolbar"
    35                 android:layout_width="match_parent"
    36                 android:layout_height="?attr/actionBarSize"
    37                 app:layout_collapseMode="pin"
    38                 app:navigationIcon="@drawable/ic_arrow_back"
    39                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    40 
    41         </android.support.design.widget.CollapsingToolbarLayout>
    42     </android.support.design.widget.AppBarLayout>
    43 
    44     <LinearLayout
    45         android:layout_width="match_parent"
    46         android:layout_height="match_parent"
    47         android:orientation="vertical"
    48         app:layout_behavior="@string/appbar_scrolling_view_behavior">
    49 
    50         <LinearLayout
    51             android:layout_width="match_parent"
    52             android:layout_height="wrap_content"
    53             android:background="@color/colorPrimary">
    54 
    55             <TextView
    56                 android:layout_width="0dp"
    57                 android:layout_height="wrap_content"
    58                 android:layout_gravity="center"
    59                 android:layout_weight="1"
    60                 android:gravity="center"
    61                 android:padding="10dp"
    62                 android:text="未开始"
    63                 android:textColor="#fff"
    64                 android:textSize="16sp" />
    65 
    66             <TextView
    67                 android:layout_width="0dp"
    68                 android:layout_height="wrap_content"
    69                 android:layout_weight="1"
    70                 android:gravity="center"
    71                 android:padding="10dp"
    72                 android:text="已开始"
    73                 android:textColor="#fff"
    74                 android:textSize="16sp" />
    75         </LinearLayout>
    76 
    77         <android.support.v7.widget.RecyclerView
    78             android:id="@+id/recycle_view"
    79             android:layout_width="match_parent"
    80             android:layout_height="match_parent"
    81             android:padding="10dp"
    82             android:scrollbars="vertical" />
    83     </LinearLayout>
    84 
    85 </android.support.design.widget.CoordinatorLayout>

    二、说明

    scrollFlags,通过设置它的值可以实现不同的滚动模式,有四种值

    1.scroll ,滚动。所有的Flag都要设置这个值,设置了之后可以向上滚动出屏幕。
    2.enterAlways ,设置了这个值的话,该View会在向下滑动的时候立刻显示出来。
    3.exitUntilCollapsed ,向上滑动时,所有组件都会滚出屏幕,但Toolbar除外。
    4.enterAlwaysCollapsed ,如果你的View设置了最小高度(minHeight),该View只会以这个最小高度滚出屏幕
    layout_collapseMode,设置折叠模式,设置 parallax 为折叠,Pin 是不折叠
    1  app:layout_collapseMode="parallax"
    
    

    视差效果中:

    1 app:contentScrim="?attr/colorPrimary"
    2 app:expandedTitleMarginEnd="64dp"
    3 app:expandedTitleMarginStart="48dp"
    
    
    contentScrim:作用是当整个视图收缩时,整个视图的颜色。
    expandedTitleMarginStart:设置Tittle文本的边距,当视图收缩后,Tittle离左边的距离
    expandedTitleMarginStart:设置Tittle文本的边距,当视图扩展后,Tittle离左边的距离

    图片视差中:
    app:layout_collapseParallaxMultiplier=”0.7”
    
    
    layout_collapseParallaxMultiplier:视差滚动因子,自动收缩的比例值。当手指操作收缩到宽展的70%时,放开会自动收缩。
    三、注意:
      1. AppBarLayout必须是CoordinatorLayout的直接子View
      2. 要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部
      3. android:fitsSystemWindows="true" 的使用注意
      4. app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。
      5. 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior,它的值为android.support.design.widget.AppBarLayout$ScrollingViewBehavior ,指向AppBarLayout.ScrollingViewBehavior,用来通知AppBarLayout 这个特殊的view何时发生了滚动事件,这个behavior需要设置在触发滚动事件的view之上。

    四、参考
    http://blog.csdn.net/a8341025123/article/details/53006865
    http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html
    http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

  • 相关阅读:
    15:链表中倒数第K个节点
    14:调整数组顺序使奇数位于偶数的前面
    13:在O(1)时间内删除单向链表中的一个节点
    centos7下zookeeper集群安装部署
    zabbix3.2监控mysql
    解决关于confluence缓慢 字体乱码 宏乱码 编辑不能贴图等问题
    nginx日志文件的定时切割与归纳
    centos7安装sonarqube6.7 代码质量管理平台
    centos7下安装vnc更改vnc默认端口号
    centos7安装java环境和maven环境
  • 原文地址:https://www.cnblogs.com/aimqqroad-13/p/7116532.html
Copyright © 2011-2022 走看看