简体   繁体   English

Android:CoordinatorLayout-如何在顶部屏幕显示修复标题视图?

[英]Android : CoordinatorLayout - How to have a fix header view at the top screen?

I have this kind of layout, and the red area must be fix when this area moves to top (just below toolbar). 我有这种布局,当红色区域移到顶部时(在工具栏下方),红色区域必须固定。 The rest (above this red area) can move to top. 其余部分(在红色区域上方)可以移到顶部。

在此处输入图片说明

The layout: 布局:

<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.CollapsingToolbarLayout>

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

<android.support.v4.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">

       <!-- This view MUST STOP on the top of screen (below toobar)
        <View
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#ff6677"
            android:layout_marginBottom="24dp"/>

       ... rest of view

The result should be like that: 结果应该是这样的:

在此处输入图片说明

Try to put your view that you need to keep static in AppBarLayout As: The layout: 尝试将需要保持静态的视图放在AppBarLayout中,如下所示:布局:

<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.CollapsingToolbarLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"/> // THIS WILL BE FIXED ON TOP
</android.support.design.widget.AppBarLayout>

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更改 android::CoordinatorLayout 屏幕 - How to change the android::CoordinatorLayout screen 如何在 CoordinatorLayout 中使视图位于另一个视图之上? - How to make view on top of another view in CoordinatorLayout? 如何在CoordinatorLayout中滚动滚动顶部和底部工具栏(或任何其他视图)进入/退出屏幕? - How to animate both top and bottom Toolbars(or any other view) enter/exit screen on scroll in CoordinatorLayout? 如何在ViewPager和CoordinatorLayout中修复视图的位置 - How to fix the position of a view inside a ViewPager and CoordinatorLayout CoordinatorLayout 上不必要的视图 - Unnecessary view on top of CoordinatorLayout 如何在Android中滚动视图时修复顶部视图 - How to fix a view on top while scrolling a view in android 当Android中的键盘向上时如何在屏幕上修复顶部布局 - how top layout fix in screen when keyboard up in android android coordinatorlayout与视差标题中的linearlayout? - android coordinatorlayout with a linearlayout in parallax header? 如何在CoordinatorLayout android中修复底部导航菜单项的位置? - How to fix place for bottomnavigation menu item in their place in CoordinatorLayout android? 如何在屏幕顶部固定布局 - How to fix a layout on top of screen
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM