工具栏位于应用栏之上 - 协调布局

6

我一直在努力处理 AppBarLayout/Toolbar/CoordinatorView。想要让 Toolbar 在滚动时向上滑动,并在向下滚动时立即返回(就像大多数阅读应用程序,例如 G+)。但是,这就是我得到的结果:

正常:

Normal

稍微滚动:

A little scroll

完全滚动:

Everything scrolled

这是我的代码:

<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="main.MainActivity">

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

        <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
        android:title="Hello World"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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


    <include layout="@layout/main__activitycontent"/>

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

main__activitycontent:

<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="main.MainActivity"
tools:showIn="@layout/main__activity">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text"/>

</android.support.v4.widget.NestedScrollView>

我阅读了很多博客文章,但他们的配置似乎都不适用于我。我的页面向上滚动时隐藏,向下滚动时显示正常工作,只有 Toolbar 移动到了应用栏之上。通过检查Android视图层次结构,我发现 Toolbar 位于深蓝色应用栏之上,并且它们一起向上移动。

编辑1

CoordinatorLayout 中删除 fitsSytemWindows=true 可以得到预期的行为,但是无论 CoordinatorLayout 的背景颜色是什么,应用栏都会变成白色:

enter image description here

我猜测实际上行为并没有改变,发生的是它不再覆盖应用栏,因此工具栏不会超过它。

编辑2

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>

编辑三

package main;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import com.ee.oef.refactor.R;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main__activity);
    Toolbar toolbar = (Toolbar) findViewById(R.id.main__toolbar);
    setSupportActionBar(toolbar);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main__menu, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}

尝试删除android:fitsSystemWindows="true",因为你设置了这个属性,导致你的工具栏被系统应用栏遮挡了。 - kandroidj
如果我删除android:fitsSystemWindows="true",则行为将按预期工作,但是应用栏将变为白色而不是colorPrimaryDark。我尝试更改CoordinatorLayout的背景颜色,但它仍然是白色的。 - Eduardo Bonet
即使在布局中更改为#0000FF也没有任何作用,因此这不是声明问题。删除fitsSystemWindow后,Coordinator Layout从AppBar正下方开始。 - Eduardo Bonet
添加了该活动。那里没有太多东西。 - Eduardo Bonet
在清单文件中,活动主题是否设置为AppTheme.NoActionBar? - kris larson
显示剩余3条评论
1个回答

11

问题出在:

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

您可以将此内容添加到您的CollapsingToolbarLayout中。enterAlwaysCollapsedCollapsingToolbarLayout的最佳实践,而不是Toolbar

更新:我看到了一些布局和ID方面的问题。

例如,不确定您是否注意到了,但我会解释一下。第一件事是,Toolbar的ID: id_toolbar,在onCreate中为:

Toolbar toolbar = (Toolbar) findViewById(R.id.main__toolbar);

那么,只需要将它改为:

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

顺便说一下,我刚刚删除了标题以及标题来自于Manifest -> android:labelScrollflag,如果你想改变它,需要通过编程实现。

并且在向下滚动时立即返回(像大多数阅读应用程序一样,例如g+)。

只需将以下内容添加到您的Toolbar中:

app:layout_scrollFlags="scroll|enterAlways"

最后,您可以在这里看到我对此问题的回答:https://dev59.com/EVsW5IYBdhLWcg3wSFjW#35241363

我们有:

enter image description here

更新:我没有使用:

android:fitsSystemWindows="true"

CoordinatorLayout中,你可以看到这里的例子:

https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/include_list_viewpager.xml

更新: 为了解决白色工具栏的问题,请在values-v21/styles.xml中设置:

<item name="android:statusBarColor">@color/colorPrimaryDark</item>

这会提供恰当的行为和外观。


更新,我又看到了 cheesesquare,似乎他没有将它添加到 CoordinatorLayout 中,但是他在 Drawer 中添加了它,无论如何,我认为我的答案是关于那些标志的正确答案。 - ʍѳђઽ૯ท
我已经添加了修改到你的答案。应该没问题了。谢谢你的帮助。 - Eduardo Bonet
不用谢,顺便说一下,你不需要那个 statusBarColor 因为你已经有了 colorPrimaryDark ;),祝编程愉快。 - ʍѳђઽ૯ท
1
这是我发现最奇怪的事情:它应该可以,但实际上却不行。后来我检查了v21/styles.xml文件,发现statusBarColor被覆盖并设置为透明(这是Code Studio自动生成的代码)。 - Eduardo Bonet
嗯,奇怪,谢谢你指出v21,这很有趣,我也会去看看。祝好运。 - ʍѳђઽ૯ท
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接