使用折叠工具栏和选项卡滚动

时间：2015-09-30 12:21:22

标签： android android-layout android-toolbar android-coordinatorlayout

我正在尝试使用CollapsingToolbarLayout制作scroll|exitUntilCollapsed标记的布局，以及TabLayout具有scroll|enterAlways scrollFlag属性的布局。基本上我希望我的工具栏固定，并在滚动时显示和隐藏选项卡。我已经从https://github.com/chrisbanes/cheesesquare修改了cheesesquare应用程序。这是我的布局xml; 

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        </android.support.design.widget.CollapsingToolbarLayout>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_discuss"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

这是结果;

标签位置不正确。他们并不关心enterAlways财产。

enter image description here

5 个答案:

答案 0 :(得分：18)

嘿this可能会解决您的问题。

只需将android：layout_gravity =“bottom”添加到tablayout，将android：gravity =“top”添加到tollbar。

enter image description here

答案 1 :(得分：3)

  1. 删除属性app:layout_behavior="@string/appbar_scrolling_view_behavior"＆amp;来自app:layout_scrollFlags="scroll|enterAlways"的{​​{1}}并添加属性android.support.design.widget.TabLayout。

  2. 同时将android:layout_gravity="bottom"身高设置为android.support.v7.widget.Toolbar，以便在104(Toolbar+TabLayout height)州期间显示Toolbar和TabLayout。

    3. 以下是一个工作示例： 

    collapsed

    希望这会有所帮助〜

答案 2 :(得分：2)

我对这里要取得的成就有点不清楚。

  1. 你不想让TAB在滚动时上下移动吗？如果是，您希望将TabLayout置于CollapsingToolbarLayout之外。因为你放在CollapsingToolbarLayout内的任何东西都会继续滚动。

    2. 根据您提出的评论，我修改了您的xml以模仿YouTube屏幕的内容。工具栏放在协调器布局之外，因为它是永久固定的，不受滚动影响。值得一提的是"One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind."这是从android blogpost http://android-developers.blogspot.in/2015/05/android-design-support-library.html中获取的。这就是我将工具栏移出AppBarLayout的原因。

    <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

</RelativeLayout>

    我已将TabLayout设置为静态，但您可以将其设置为可滚动。如果这不是您想要的，请以图形方式解释这里要实现的目标。我很乐意帮忙。

答案 3 :(得分：0)

添加android：layout_gravity =＆＃34; bottom＆＃34;到android.support.design.widget.TabLayout

答案 4 :(得分：0)

我制作了两个具有视差的样本，一个制作了RecyclerView上方的AppbarLayout

只有视差的是

enter image description here 

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/htab_maincontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <!--
    OUTLINE
    <CoordinatorLayout>
        <AppbarLayout>
               <CollapsingToolbarLayout>
                    <ImageView/>
                 <Toolbar/>
                 <TabLayout/>
            </CollapsingToolbarLayout>
        </ AppbarLayout >
        <NestedScrollView/>
    </CoordinatorLayout>
    -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <ImageView
                android:id="@+id/ivHeader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:layout_gravity="top"
                android:layout_marginBottom="?attr/actionBarSize" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@android:color/transparent"
                app:tabIconTint="#F57C00"
                app:tabIndicatorColor="#F57C00"
                app:tabIndicatorHeight="4dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#F5F5F5"
                app:tabTextColor="#FFE0B2" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

AppbarLayout上方的RecyclerView是

enter image description here 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/htab_maincontent"
    android:layout_width="match_parent"
    android:background="#EEEEEE"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <!--
    OUTLINE
    <CoordinatorLayout>
        <AppbarLayout>
               <CollapsingToolbarLayout>
                    <ImageView/>
                 <Toolbar/>
                 <TabLayout/>
            </CollapsingToolbarLayout>
        </ AppbarLayout >
        <NestedScrollView/>
    </CoordinatorLayout>
    -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="330dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <ImageView
                android:id="@+id/ivHeader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                android:layout_gravity="top"
                android:layout_marginBottom="?attr/actionBarSize" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@android:color/transparent"
                app:tabIconTint="#F57C00"
                app:tabIndicatorColor="#F57C00"
                android:translationY="-30dp"
                app:tabIndicatorHeight="4dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#F5F5F5"
                app:tabTextColor="#FFE0B2" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/constraintLayout"
        app:behavior_overlapTop="30dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager2"
            android:layout_width="match_parent"
            android:background="#fff"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:layout_height="match_parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

并通过滚动设置TabLayout translationY 

// Check if scrolling up or down
   var initTransitionY = tabLayout.translationY
    tabLayout.post {
        initTransitionY = tabLayout.translationY
    }

appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->

    //Check if the view is collapsed
    if (abs(verticalOffset) >= appbar.totalScrollRange) {
        collapsingToolbar.title = "Collapsed"
    } else {
        collapsingToolbar.title = ""
    }

        tabLayout.translationY =
            initTransitionY + initTransitionY * (verticalOffset / appBarLayout.totalScrollRange.toFloat())

})

有关完整样本和其他样本，您可以签出this repo

相关问题
最新问题