使用CoordinatorLayout和CollapsingToolbarLayout遇到Toolbar的title显示异常问题及解决

先看效果图

1、拉伸效果

2、收缩效果

可以看到这里,收缩之后,toolbar的title显示出了问题,没有居中

网上搜也没收到解决方法,经过我的尝试,发现是根布局CoordinatorLayout里面 这句 android:fitsSystemWindows="true" 导致的。

删掉这句,效果如下:

就可以了。

下面是我的xml代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:id="@+id/appbar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">
        <com.google.android.material.appbar.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"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:titleEnabled="true">
            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/eat"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>
            <androidx.appcompat.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"
                app:navigationIcon="@drawable/back"
                app:menu="@menu/toolbar_menu"
                app:title="coordinator"
                />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">
                <LinearLayout
                    android:layout_margin="@dimen/dp_10"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="CardView"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"/>
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/card_string"/>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_done"
        android:layout_margin="@dimen/dp_10"
        android:clickable="true"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: CoordinatoLayoutCollapsingToolbarLayoutAndroid开发中常用的两个控件,它们可以实现许多优秀的布局效果。其中,仿美团外卖、京东、安居客等搜索框的效果就可以通过使用这两个控件来实现。 首先,将CoordinatorLayout作为最外层布局,用AppBarLayout包裹CollapsingToolbarLayout和搜索框(Toolbar)的布局。在CollapsingToolbarLayout内部设置要展示的内容,如图片、文字等,以及折叠时隐藏的内容。而AppBarLayout则可以通过监听滚动事件来控制CollapsingToolbarLayout的展开与收缩。 接着,设置搜索框为Toolbar,并在Toolbar中加入EditText等控件来实现搜索功能。为了让搜索框在AppBarLayout的收缩中悬浮在顶部,可以将Toolbar设置为app:layout_scrollFlags="scroll|enterAlways|snap"。 最后,通过设置CollapsingToolbarLayoutcollapsedTitleGravity、expandedTitleGravity、collapsedTitleTextAppearance、expandedTitleTextAppearance等属性来调整标题的展示效果,以适应不同的布局要求。 总之,通过使用CoordinatorLayoutCollapsingToolbarLayout这两个强大的布局控件,我们可以实现许多炫酷的布局效果,特别是像搜索框这样的常见功能,能够轻松实现,提高应用的用户体验。 ### 回答2: CoordinatorLayout是一个新的父容器控件,可以让子控件之间产生联动效果。CollapsingToolbarLayoutCoordinatorLayout的一个子控件,可以实现ToolBar折叠效果。 通过使用CoordinatorLayoutCollapsingToolbarLayout可以实现仿美团外卖、京东、安居客等应用的搜索框。我们可以在CollapsingToolbarLayout中添加一个EditText控件作为搜索框,并对其进行样式设置和位置调整。 在CollapsingToolbarLayout中,我们可以为其设置一个折叠模式,在不同的模式下控件的显示样式也会变化。当需要显示搜索框(例如在展开状态)时,我们可以设置一个比较大的折叠模式,使得搜索框完全显示。而当折叠Toolbar时,搜索框会根据预设的模式变为一个小图标,同时不影响其他控件的显示。 总的来说,通过使用CoordinatorLayoutCollapsingToolbarLayout,我们可以实现复杂的联动效果,让UI界面更加高效、美观。而在实现类似搜索框这类单一控件时,只需要在CollapsingToolbarLayout中添加控件,并对其进行相应样式和位置的设置即可。 ### 回答3: CoordinatorLayoutAndroid Support Design库中新增的一个布局类,它可以协调子View的滑动行为,实现一些复杂的交互效果。其中,CollapsingToolbarLayoutCoordinatorLayout中的一个布局类,通常用于实现可以折叠或扩展的标题栏效果。 在实现仿美团外卖、京东、安居客等搜索框的效果时,我们可以使用CollapsingToolbarLayout来实现。具体步骤如下: 1. 在布局文件中,先将CoordinatorLayout作为父布局,再添加一个AppBarLayout作为子布局。 2. 在AppBarLayout中添加一个CollapsingToolbarLayout作为子布局,并设置app:layout_scrollFlags="scroll|exitUntilCollapsed"属性,表示该子View可以滚动,并在完全收缩前一直存在。 3. 在CollapsingToolbarLayout中添加一个Toolbar作为子布局,这个Toolbar就是我们的标题栏。可以在其中添加搜索框等控件。 4. 在CollapsingToolbarLayout中再添加一个ImageView或其他子View,作为背景图片或其他效果。(可选) 5. 在布局文件中添加一个RecyclerView或其他滑动控件,将其放入CoordinatorLayout中,并设置app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,表示该子View会受到AppBarLayout的滚动行为影响。 这样一来,当用户向下滑动页面时,CollapsingToolbarLayout会慢慢收缩,最后只剩下Toolbar,而背景图片则会消失或变成其他效果。与此同时,RecyclerView会随着滑动而滚动,实现搜索框随着页面滑动的效果。 总之,使用CoordinatorLayoutCollapsingToolbarLayout可以方便地实现一些复杂的交互效果,如此处的仿美团外卖、京东、安居客等搜索框效果。需要注意的是,该效果的实现还需进一步考虑适配、优化等问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值