【问题标题】:CollapsingToolbarLayout not collapsing when softkeyboard is visible当软键盘可见时,CollapsingToolbarLayout 不会折叠
【发布时间】:2019-04-04 09:50:04
【问题描述】:

我有一个用于工具栏的布局;

<?xml version="1.0" encoding="utf-8"?>
<merge
 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="wrap_content">

 <android.support.design.widget.AppBarLayout
     android:id="@+id/appbar_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/expanded_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

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

我在我的布局中使用它;

<com.dan.finance.ui.ExpandedToolbar
    android:id="@+id/expandable_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:toolbarNavColor="?attr/NavigationIconColor"
    app:toolbarNavIcon="?attr/NavigationUpArrow"
    app:toolbarTitle="My Finances"
    app:toolbarTitleColor="?attr/NavigationTitleColor"/>

在我的大多数布局中,在此下方我有一个嵌套的滚动视图,我的问题是在默认情况下内容不应滚动的布局上,打开软键盘允许使用 adjustResize 滚动内容,但我的工具栏没有对此做出反应并崩溃。

我的布局的完整代码是;

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <com.dan.finance.ui.ExpandedToolbar
                android:id="@+id/expandable_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:toolbarNavColor="?attr/NavigationIconColor"
                app:toolbarNavIcon="?attr/NavigationUpArrow"
                app:toolbarTitle="My Finances"
                app:toolbarTitleColor="?attr/NavigationTitleColor"/>

            <android.support.v4.widget.NestedScrollView
                android:id="@+id/nested_scrollview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true"
                app:layout_anchor="@id/expandable_toolbar"
                app:layout_anchorGravity="bottom"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/container"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                <android.support.v7.widget.AppCompatTextView
                    android:id="@+id/title"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingStart="32dp"
                    android:paddingEnd="0dp"
                    android:text="Finances"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edit_text"                       
                    android:layout_width="0dp"
                    android:layout_height="56dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                   app:layout_constraintTop_toBottomOf="@id/title"/>

                <android.support.v7.widget.AppCompatTextView
                    android:id="@+id/details"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="DETAILS TODO"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/edit_text"/>

                <android.support.v7.widget.RecyclerView                                                      android:id="@+id/finances_list"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layoutManager="android.support.v7.widget.LinearLayoutManager"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/details"/>

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/button_see_all"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="See All"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/finances_list"
                    app:layout_constraintVertical_bias="1.0"/>

                </android.support.constraint.ConstraintLayout>

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

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

    </RelativeLayout>

这个布局作为一个整体不会在大型设备上滚动,但可能会在较小的设备/未来版本上滚动,所以我相信这可能是我的问题所在,但我尝试了很多不同的东西,但没有任何结果.我还尝试使用

以编程方式扩展和折叠工具栏
mAppBarLayout.setExpanded(expand, true);

但这不会为我假设的布局设置动画,因为它不在滚动布局中,因为可能没有内容可以显示?

【问题讨论】:

  • 看看 ExpandedToolbar 会很有帮助。可以发一下吗
  • @Cheticamp ExpandedToolbar 是顶级sn-p
  • 也许我遗漏了一些东西,但 ExpandedToolbar 不是自定义视图吗?我试图了解顶部 sn-p 是如何实际添加到布局中的。我认为发布 ExpandedToolbar 的代码会有所帮助。
  • 是的,顶部的代码在一个名为 ExpandedToolbar 的自定义视图中
  • 你能发布那个自定义视图吗? ExpandedToolbar.java 还是 ExpandedToolbar.kt?

标签: java android android-collapsingtoolbarlayout


【解决方案1】:

AppBarLayout 必须是 CoordinatorLayout 的直接子级,以便布局的滚动和折叠按预期工作。 (见AppBarLayout documentation。)

此视图在很大程度上取决于在 CoordinatorLayout 中用作直接子级。如果您在不同的 ViewGroup 中使用 AppBarLayout,它的大部分功能都将不起作用。

这是您的布局当前编码的样子。 (这来自 Layout Inspector。)

如您所见,AppBarLayout 不是 CoordinatorLayout 的直接子代,而是 ExpandedToolbar 的子代,它本身就是一个AppBarLayout.

要解决此问题,您需要将 expanded_toolbar.xml 更改为以下内容:

<?xml version="1.0" encoding="utf-8"?>
<merge 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="wrap_content">

    <!--<android.support.design.widget.AppBarLayout-->
    <!--android:id="@+id/appbar_layout"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="wrap_content"-->
    <!--android:fitsSystemWindows="true">-->

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/expanded_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

    <!--</android.support.design.widget.AppBarLayout>-->
</merge>

如您所见,我通过注释掉了 AppBarLayout。现在,当我们运行应用程序时,我们会看到以下层次结构:

在这里,您可以看到 ExpandedToolbar 确实是 AppBarLayoutCoordinatorLayout 的直接子级。这行得通。这是一个视觉效果。我没有实现整个自定义布局 - 仅用于演示目的。

这是更新后的主布局:

activity_main.xml

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <com.example.customviewtoolbar.ExpandedToolbar
            android:id="@+id/expandable_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:toolbarNavColor="?attr/NavigationIconColor"
            app:toolbarNavIcon="?attr/NavigationUpArrow"
            app:toolbarTitle="My Finances"
            app:toolbarTitleColor="?attr/NavigationTitleColor" />

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nested_scrollview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.constraint.ConstraintLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <android.support.v7.widget.AppCompatTextView
                    android:id="@+id/title"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingStart="32dp"
                    android:paddingEnd="0dp"
                    android:text="@string/finances"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edit_text"
                    android:layout_width="0dp"
                    android:layout_height="56dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/title" />

                <android.support.v7.widget.AppCompatTextView
                    android:id="@+id/details"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="DETAILS TODO"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/edit_text" />

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/finances_list"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layoutManager="android.support.v7.widget.LinearLayoutManager"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/details" />

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/button_see_all"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="See All"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/finances_list"
                    app:layout_constraintVertical_bias="1.0" />

            </android.support.constraint.ConstraintLayout>

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

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

</RelativeLayout>

作为旁注,我从 NestedScrollView 中删除了与锚点相关的标签和 android:fillViewport="true",因为它们并不是真正需要的,并且阻止了布局检查器工作。

您总是可以不使用自定义视图,但我假设您想要它是为了方便。

这是我用于演示目的的 ExpandedToolbar 的模型。

ExpandedToolbar.java

public class ExpandedToolbar extends AppBarLayout {
    public ExpandedToolbar(Context context) {
        super(context);
        init();
    }

    public ExpandedToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.MyToolbar,
                0, 0);

        try {
            String title = a.getString(R.styleable.MyToolbar_toolbarTitle);
            ((Toolbar) findViewById(R.id.expanded_toolbar)).setTitle(title);
        } finally {
            a.recycle();
        }
    }

    private void init() {
        inflate(getContext(), R.layout.expanded_toolbar, this);
    }
}

【讨论】:

    【解决方案2】:

    我在 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.support.design.widget.CoordinatorLayout
                android:id="@+id/coordinator_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true">
    
            <android.support.design.widget.AppBarLayout
                    android:id="@+id/appbar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fitsSystemWindows="true">
    
                <android.support.design.widget.CollapsingToolbarLayout
                        android:id="@+id/expanded_collapsing_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="120dp"
                        app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                    <android.support.v7.widget.Toolbar
                            android:id="@+id/expanded_toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            app:layout_collapseMode="pin"/>
    
                </android.support.design.widget.CollapsingToolbarLayout>
    
            </android.support.design.widget.AppBarLayout>
    
            <android.support.v4.widget.NestedScrollView
                    android:id="@+id/nested_scrollview"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fillViewport="true"
                    app:layout_anchor="@id/appbar_layout"
                    app:layout_anchorGravity="bottom"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
                <android.support.constraint.ConstraintLayout
                        android:id="@+id/container"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
    
                    <android.support.v7.widget.AppCompatTextView
                            android:id="@+id/title"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:paddingStart="32dp"
                            android:paddingEnd="0dp"
                            android:text="Finances"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent"/>
    
                    <android.support.v7.widget.AppCompatEditText
                            android:id="@+id/edit_text"
                            android:layout_width="0dp"
                            android:layout_height="56dp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/title"/>
    
                    <android.support.v7.widget.AppCompatTextView
                            android:id="@+id/details"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:text="DETAILS TODO"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/edit_text"/>
    
                    <android.support.v7.widget.RecyclerView
                            android:id="@+id/finances_list"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            app:layoutManager="android.support.v7.widget.LinearLayoutManager"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/details"/>
    
                    <android.support.v7.widget.AppCompatButton
                            android:id="@+id/button_see_all"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="See All"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/finances_list"
                            app:layout_constraintVertical_bias="1.0"/>
    
                </android.support.constraint.ConstraintLayout>
    
            </android.support.v4.widget.NestedScrollView>
    
        </android.support.design.widget.CoordinatorLayout>
    
    </RelativeLayout>
    

    您还可以使用此侦听器检查您的活动 AppBarLayout 折叠/展开过程:

    appbar_layout.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
                override fun onOffsetChanged(p0: AppBarLayout?, p1: Int) {
                    if (Math.abs(p1) - appbar_layout.totalScrollRange == 0) {
                        Log.d("tag", "Collapsed")
                    } else {
                        Log.d("tag", "Expanded")
                    }
                }
            })
    

    我认为这是因为您在自定义 xml 中使用 AppBarLayout。

    【讨论】:

      【解决方案3】:

      尝试删除android:fitsSystemWindows="true" 最终使用adjustResize。应该工作

      【讨论】:

      • 不,这不起作用,我尝试了大多数删除和添加类似内容的组合都没有成功,我的活动也只调整调整大小。
      猜你喜欢
      • 1970-01-01
      • 2015-09-14
      • 1970-01-01
      • 2016-03-06
      • 1970-01-01
      • 1970-01-01
      • 2012-07-01
      • 1970-01-01
      相关资源
      最近更新 更多