使用TabLayout时工具栏消失

时间:2016-01-08 23:18:20

标签: android android-fragments android-toolbar android-tablayout android-collapsingtoolbarlayout

我的活动包含一些CollapsingToolbarLayout的片段。在特定片段中,我希望工具栏显示TabLayout。我已经做好了......差不多。

更改为必须显示TabLayout的片段时,CollapsingToolbarLayout将使用以下内容折叠:

collapsingToolbarLayout.setExpanded(false,true);

在片段代码中使用此选项卡显示选项卡:

tabs.setVisibility(View.VISIBLE);

问题是CollapsingToolbarLayout完全隐藏,它只显示标签栏,而不是应用栏上方的折叠工具栏。

这是布局:

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

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

        <ImageView
            android:id="@+id/toolbarHeader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/black"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/header"
            android:visibility="invisible"
            app:layout_collapseMode="parallax"
            tools:ignore="ContentDescription"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:elevation="0dp"
            android:minHeight="?actionBarSize"
            android:paddingTop="@dimen/tool_bar_top_padding"
            android:transitionName="actionBar"
            app:contentInsetStart="@dimen/toolbar_contentInset"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            tools:ignore="UnusedAttribute">

            <TextView
                android:id="@+id/title"
                android:layout_width="fill_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="left|center_vertical"
                android:layout_weight="1"
                android:gravity="left|center_vertical"
                android:text=""
                android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
                android:textColor="#fff"
                android:textSize="20sp"/>
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/primary"
            android:clipToPadding="false"
            android:minHeight="?actionBarSize"
            android:paddingLeft="@dimen/tabs_contentInset"
            android:paddingStart="@dimen/tabs_contentInset"
            android:visibility="gone"
            app:tabIndicatorColor="@android:color/white"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@color/semitransparent_white"
            tools:ignore="NewApi,RtlSymmetry,UnusedAttribute"/>

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

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

这就是它目前的样子,(我不希望它是这样)。

enter image description here

这就是我期望/想要它的样子:

enter image description here

提前感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

请试试这个:

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

    <ImageView
        android:id="@+id/toolbarHeader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:fitsSystemWindows="true"
        android:scaleType="centerCrop"
        android:src="@drawable/header"
        android:visibility="invisible"
        app:layout_collapseMode="parallax"
        tools:ignore="ContentDescription"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="0dp"
        android:minHeight="?attr/actionBarSize"
        android:paddingTop="@dimen/tool_bar_top_padding"
        android:transitionName="actionBar"
        app:contentInsetStart="@dimen/toolbar_contentInset"
        app:layout_collapseMode="pin"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        tools:ignore="UnusedAttribute">

        <TextView
            android:id="@+id/title"
            android:layout_width="fill_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="left|center_vertical"
            android:layout_weight="1"
            android:gravity="left|center_vertical"
            android:text=""
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
            android:textColor="#fff"
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/primary"
        android:clipToPadding="false"
        android:minHeight="?actionBarSize"
        android:paddingLeft="@dimen/tabs_contentInset"
        android:paddingStart="@dimen/tabs_contentInset"
        android:visibility="gone"
        app:tabIndicatorColor="@android:color/white"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="@color/semitransparent_white"
        tools:ignore="NewApi,RtlSymmetry,UnusedAttribute"/>

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

请在评论中告诉我它是否有效

祝你好运

答案 1 :(得分:0)

Hello删除下一个代码行

app:layout_scrollFlags="scroll|enterAlways|snap"

答案 2 :(得分:0)

我已经在这里= https://stackoverflow.com/a/54817940/4258880中回答了这个问题。 但是,您可以添加偏移量更改侦听器,以在达到百分比以上时显式设置操作栏。 (有时我不知道为什么,偏移量会在滚动行为上发生变化,即使它具有固定的高度)

在科特林:

app_bar_layout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
        val percentage: Float = Math.abs(verticalOffset) / appBarLayout.totalScrollRange.toFloat()
        Log.d("%", "$percentage")
        when {
            percentage < 0.1 ->  (activity as MainActivity).bottom_navigation.visibility = View.GONE
            percentage >= 1.0.toFloat() -> (activity as MainActivity).setSupportActionBar(where_toolbar) // This is hack to avoid toolbar disappearing
            else ->  (activity as MainActivity).bottom_navigation.visibility = View.VISIBLE

        }
    })

这里,当percetange大于1(怪异)时,我用它在片段中对其进行充气。