AppBarLayout

本文详细介绍了AppBarLayout组件的特点和使用方法,包括如何通过设置属性实现滚动行为、折叠效果等。此外,还提供了具体的XML布局示例及代码示例,帮助开发者更好地理解和应用AppBarLayout。

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.
Children should provide their desired scrolling behavior through AppBarLayout.LayoutParams.setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.
This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of its functionality will not work.

AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior behavior class, meaning that you should set your scrolling view’s behavior to be an instance of AppBarLayout.ScrollingViewBehavior. A string resource containing the full class name is available.

<androidx.coordinatorlayout.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">
  
       <androidx.core.widget.NestedScrollView
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               app:layout_behavior="@string/appbar_scrolling_view_behavior">
  
           <!-- Your scrolling content -->
  
       </androidx.core.widget.NestedScrollView>
  
       <com.google.android.material.appbar.AppBarLayout
               android:layout_height="wrap_content"
               android:layout_width="match_parent">
  
           <androidx.appcompat.widget.Toolbar
                   ...
                   app:layout_scrollFlags="scroll|enterAlways"/>
  
           <com.google.android.material.tabs.TabLayout
                   ...
                   app:layout_scrollFlags="scroll|enterAlways"/>
  
       </com.google.android.material.appbar.AppBarLayout>
  
   </androidx.coordinatorlayout.widget.CoordinatorLayout>

app:layout_collapseMode

    <attr name="layout_collapseMode">
      <!-- The view will act as normal with no collapsing behavior. -->
      <enum name="none" value="0"/>
      <!-- The view will pin in place. -->
      <enum name="pin" value="1"/>
      <!-- The view will scroll in a parallax fashion. See the
           layout_collapseParallaxMultiplier attribute to change the multiplier. -->
      <enum name="parallax" value="2"/>
    </attr>
    
    <!-- The multiplier used when layout_collapseMode is set to 'parallax'. The value should
         be between 0.0 and 1.0. -->
    <attr format="float" name="layout_collapseParallaxMultiplier"/>

app:layout_scrollFlags

   <attr name="layout_scrollFlags">
      <!-- Disable scrolling on the view. This flag should not be combined with any of the other
           scroll flags. -->
      <flag name="noScroll" value="0x0"/>

      <!-- The view will be scroll in direct relation to scroll events. This flag needs to be
           set for any of the other flags to take effect. If any sibling views
           before this one do not have this flag, then this value has no effect. -->
      <flag name="scroll" value="0x1"/>

      <!-- When exiting (scrolling off screen) the view will be scrolled until it is
           'collapsed'. The collapsed height is defined by the view's minimum height. -->
      <flag name="exitUntilCollapsed" value="0x2"/>

      <!-- When entering (scrolling on screen) the view will scroll on any downwards
           scroll event, regardless of whether the scrolling view is also scrolling. This
           is commonly referred to as the 'quick return' pattern. -->
      <flag name="enterAlways" value="0x4"/>

      <!-- An additional flag for 'enterAlways' which modifies the returning view to
           only initially scroll back to it's collapsed height. Once the scrolling view has
           reached the end of it's scroll range, the remainder of this view will be scrolled
           into view. -->
      <flag name="enterAlwaysCollapsed" value="0x8"/>

      <!-- Upon a scroll ending, if the view is only partially visible then it will be
           snapped and scrolled to it's closest edge. -->
      <flag name="snap" value="0x10"/>

      <!-- An additional flag to be used with 'snap'. If set, the view will be snapped to its
           top and bottom margins, as opposed to the edges of the view itself. -->
      <flag name="snapMargins" value="0x20"/>
    </attr>
NestedScrollView 
app:behavior_overlapTop="30dp"

  <!-- The amount that the scrolling view should overlap the bottom of any AppBarLayout -->
    <attr format="dimension" name="behavior_overlapTop"/>
           var isToolbarShown = false

            // scroll change listener begins at Y = 0 when image is fully collapsed
            plantDetailScrollview.setOnScrollChangeListener(
                NestedScrollView.OnScrollChangeListener { _, _, scrollY, _, _ ->

                    // User scrolled past image to height of toolbar and the title text is
                    // underneath the toolbar, so the toolbar should be shown.
                    val shouldShowToolbar = scrollY > toolbar.height

                    // The new state of the toolbar differs from the previous state; update
                    // appbar and toolbar attributes.
                    if (isToolbarShown != shouldShowToolbar) {
                        isToolbarShown = shouldShowToolbar

                        // Use shadow animator to add elevation if toolbar is shown
                        appbar.isActivated = shouldShowToolbar

                        // Show the plant name if toolbar is shown
                        toolbarLayout.isTitleEnabled = shouldShowToolbar
                    }
                }
            )

demo

https://github.com/android/sunflower PlantDetailFragment

AppBarLayout是一个用于实现Material Design风格应用栏的组件,它继承自LinearLayout,子控件默认为竖直方向显示,通常直接作为CoordinatorLayout的直接子View使用,否则其大部分功能将失效 [^3][^4]。 ### 功能介绍 与传统的ActionBar相比,AppBarLayout提供了更多的灵活性和功能。它不仅可以包含Toolbar作为其子视图,还能包含多个视图组件以实现复杂的交互和动态效果。并且,AppBarLayout支持滚动行为,能响应滚动事件并改变其子视图的显示状态,如折叠和展开,而传统的ActionBar通常通过编程直接控制显示和隐藏,不支持动态响应用户的滚动操作 [^1]。 ### 使用指南 - **根布局要求**:要实现AppBarLayout的滑动等功能,其根布局必须是CoordinatorLayout [^3]。 - **设置滚动行为**:子控件可以通过在代码里调用`setScrollFlags(int)`或者在XML里使用`app:layout_scrollFlags`属性来设置滑动手势。这里的滑动手势指的是当某个可滚动View的滚动手势发生变化时,AppBarLayout内部的子View实现某种动作 [^3]。 ### 示例代码 #### 示例一:包含Toolbar的简单AppBarLayout ```xml <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="150dp" android:minHeight="?attr/actionBarSize" android:gravity="bottom" android:layout_marginBottom="25dp" android:background="?attr/colorPrimary" app:title="appbarlayout" app:layout_scrollFlags="scroll|enterAlwaysCollapsed" /> </android.support.design.widget.AppBarLayout> <!-- 可滚动的视图,如RecyclerView等 --> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> ``` #### 示例二:使用CollapsingToolbarLayout ```xml <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapse_layout" android:layout_width="match_parent" android:layout_height="250dp" app:contentScrim="@mipmap/kyo" app:statusBarScrim="@color/colorAccent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/iori" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.6" /> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="60dp" android:gravity="bottom" app:title="Collapsing title" app:titleTextColor="@android:color/white" app:layout_scrollFlags="scroll|snap" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- 可滚动的视图,如RecyclerView等 --> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值