【问题标题】:How to put AppBarLayout with collapseMode overlay content layout?如何将 AppBarLayout 与 collapseMode 覆盖内容布局?
【发布时间】:2018-07-10 14:21:24
【问题描述】:

我已将 AppBarLayout 与 app:layout_collapseMode="pin" 叠加在内容 FrameLayout 上。但是当我在片段中滚动时,AppBarLayout 不会崩溃。

如何让 AppBarLayout 可折叠并覆盖 FrameLayout?

这是我当前的页面,但工具栏没有折叠,但我需要覆盖和折叠它:

这是我当前的 xml:

 <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">

            <FrameLayout
                android:id="@+id/fragment_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:nestedScrollingEnabled="true"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

            <android.support.design.widget.CoordinatorLayout
                android:id="@+id/coordinator"
                android:layout_alignParentTop="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                    <android.support.design.widget.AppBarLayout
                        xmlns:android="http://schemas.android.com/apk/res/android"
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                        xmlns:tools="http://schemas.android.com/tools"
                        android:id="@+id/appBarLayout"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_alignParentTop="true"
                        android:background="@android:color/transparent"
                        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                        app:elevation="0dp"
                        app:layout_collapseMode="pin">



                            <android.support.v7.widget.Toolbar
                                xmlns:android="http://schemas.android.com/apk/res/android"
                                xmlns:app="http://schemas.android.com/apk/res-auto"
                                xmlns:tools="http://schemas.android.com/tools"
                                app:layout_collapseMode="pin"
                                app:layout_scrollFlags="scroll|enterAlways"
                                android:id="@+id/toolbar"
                                style="?android:attr/toolbarStyle"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:background="@android:color/transparent"
                                android:minHeight="?attr/actionBarSize"
                                app:elevation="0dp"
                                app:popupTheme="@style/ToolbarStyle"
                                tools:ignore="NewApi"/>

                    </android.support.design.widget.AppBarLayout>
            </android.support.design.widget.CoordinatorLayout>
        </RelativeLayout>

【问题讨论】:

    标签: android collapse android-coordinatorlayout android-relativelayout android-appbarlayout


    【解决方案1】:

    检查此代码。希望对你有帮助

    <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="@color/white"
    android:fitsSystemWindows="true">
    
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="@color/bg"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
    
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical"
                app:layout_collapseMode="parallax">
    
                <FrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/scale_30dp">
    
                    <com.tncstories.stories.utils.CircularImageView
                        android:id="@+id/ivProfile"
                        android:layout_width="@dimen/scale_90dp"
                        android:layout_height="@dimen/scale_90dp" />
    
                </FrameLayout>
    
                <com.tncstories.stories.widget.CustomTextView
                    android:id="@+id/tvUserName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/scale_15dp"
                    android:textColor="@color/black"
                    android:textSize="16sp"
                    app:typeface="gotham_medium" />
    
                <com.tncstories.stories.widget.CustomTextView
                    android:id="@+id/tvHoots"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/scale_5dp"
                    android:textColor="@color/text_color"
                    android:textSize="12sp"
                    app:typeface="gotham_book" />
    
                <com.vanniktech.emoji.EmojiTextView
                    android:id="@+id/tvSmiley"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/scale_10dp"
                    android:textIsSelectable="true"
                    app:emojiSize="25sp" />
    
    
                <com.tncstories.stories.widget.CustomTextView
                    android:id="@+id/tvMyFriends"
                    android:layout_width="120dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/scale_15dp"
                    android:background="@drawable/red_rect_box"
                    android:gravity="center"
                    android:paddingBottom="@dimen/scale_10dp"
                    android:paddingEnd="@dimen/scale_15dp"
                    android:paddingStart="@dimen/scale_15dp"
                    android:paddingTop="@dimen/scale_10dp"
                    android:text="@string/my_friends"
                    android:textColor="@color/red"
                    android:textSize="13sp" />
            </LinearLayout>
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:theme="@style/AppTheme">
    
                <com.tncstories.stories.widget.CustomTextView
                    android:id="@+id/tvTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/text_color"
                    android:textSize="18sp"
                    app:typeface="bariol_bold" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical">
    
            <View
                android:layout_width="match_parent"
                android:layout_height="2px"
                android:background="#eae6e6" />
    
            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/red"
                app:tabIndicatorHeight="3dp"
                app:tabMode="scrollable"
                app:tabPaddingEnd="10dp"
                app:tabPaddingStart="10dp"
                app:tabSelectedTextColor="@color/black"
                app:tabTextColor="@color/light_grey" />
    
            <View
                android:layout_width="match_parent"
                android:layout_height="2px"
                android:background="#eae6e6" />
        </LinearLayout>
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/mPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/scale_10dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    <!--<android.support.v7.widget.RecyclerView-->
    <!--android:id="@+id/recyclerReading"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="@dimen/scale_210dp"-->
    <!--android:clipToPadding="false"-->
    <!--android:paddingLeft="@dimen/scale_10dp" />-->
    
     </android.support.design.widget.CoordinatorLayout>
    

    【讨论】:

    • 似乎你的 ViewPager 低于 AppBarLayout ,但我需要低于
    • 将此行添加到您的工具栏应用程序:layout_scrollFlags="scroll|enterAlways|snap"
    • 在它后面使用 snap
    • snap - 在滚动结束时,如果视图仅部分可见,它将被扭曲到最近的边缘......所以它不会影响覆盖
    猜你喜欢
    • 1970-01-01
    • 2015-09-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-16
    • 1970-01-01
    • 2011-02-25
    • 1970-01-01
    相关资源
    最近更新 更多