滚动时如何在工具栏下方固定两个按钮

Question

我想实现如图所示的效果

我试过此代码但无法将按钮固定在顶部图像或工具栏下方

在此我尝试使用工具栏，在工具栏下方我嵌套了滚动视图，在该滚动视图中我还有一个滚动视图（scrollview2）。

我想将按钮固定或锚定到 scrollview2，当我向上滚动此 scrollview2 时，我想将按钮固定到工具栏

 <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="match_parent">

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



    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <ImageView
            android:id="@+id/homescrn_logo"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:scaleType="fitXY"
            android:src="@drawable/restaurant"
            app:layout_collapseMode="parallax" />

    </android.support.v7.widget.Toolbar>


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


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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/scrlview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="@color/colorAccent"></LinearLayout>

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/restaurant" />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/restaurant" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/colorAccent"></LinearLayout>
    </LinearLayout>

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

<Button
    android:id="@+id/bt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hi I am here"
    app:layout_anchor="@id/scrlview"
    app:layout_anchorGravity="center|bottom" />

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RelativeLayout
            android:id="@+id/rl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:background="@drawable/restaurant" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true">

                <TextView
                    android:id="@+id/tv_business_profilescrn_business_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="16dp"
                    android:text="Chillis Kuwait"
                    android:textColor="#fff"
                    android:textSize="20sp" />


                <RelativeLayout
                    android:id="@+id/rl_business_profilescrn"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_business_profilescrn_business_name"
                    android:paddingBottom="10dp"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp">

                    <TextView
                        android:id="@+id/tv_business_profilescrn_type"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingRight="40dp"
                        android:text="Restaurent"
                        android:textColor="#fff"
                        android:textSize="20sp" />

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/tv_business_profilescrn_type"
                        android:background="#4989f2">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingLeft="5dp"
                            android:paddingRight="5dp"
                            android:text="Open"
                            android:textSize="20sp" />
                    </RelativeLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:background="#db4437"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" />

                        <TextView
                            android:id="@+id/tv_ratings"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:padding="3dp"
                            android:text="4.5"
                            android:textColor="#fff" />

                    </LinearLayout>
                </RelativeLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/rl_business_profilescrn"
                    android:background="#db4437"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:paddingLeft="10dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:orientation="horizontal"
                            android:paddingLeft="20dp">

                            <LinearLayout
                                android:id="@+id/ll_followers"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="right"
                                    android:text="243"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />

                                <TextView
                                    android:id="@+id/tv_business_profile_folowers"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Followers"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />
                            </LinearLayout>

                            <View
                                android:layout_width="1dp"
                                android:layout_height="30dp"
                                android:layout_margin="10dp"
                                android:background="#fff" />
                        </LinearLayout>
                    </RelativeLayout>

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_centerVertical="true"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="right"
                                    android:text="243"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Likes"
                                    android:textColor="#fff"
                                    android:textSize="20sp" />
                            </LinearLayout>

                            <View
                                android:layout_width="1dp"
                                android:layout_height="30dp"
                                android:layout_margin="10dp"
                                android:background="#fff" />
                        </LinearLayout>


                    </RelativeLayout>

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:paddingRight="16dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="right"
                                android:text="243"
                                android:textColor="#fff"
                                android:textSize="20sp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Views"
                                android:textColor="#fff"
                                android:textSize="20sp" />
                        </LinearLayout>


                    </RelativeLayout>
                </LinearLayout>
            </RelativeLayout>
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <RelativeLayout
                android:id="@+id/rl_business_profilescrn_top_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="20dp"
                    android:src="@drawable/ic_back_300wt" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_share_300wt" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_share_300wt" />
                </LinearLayout>

            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>

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


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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#db4437"
                android:text="Local Feed" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#db4437"
                android:text="My Feed" />
        </LinearLayout>

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />


        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/restaurant" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

这正是我想要实现的。

我有一个折叠工具栏，我想将其滚动一半，我能够实现。

此外，我在嵌套滚动视图中有两个按钮，我想在向下滚动时将其固定到工具栏，如图 gif 所示。

Answer 1

为您的 LinearLayout 设置一个 id：

        <LinearLayout
            android:@"+id/my_linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

然后在线性布局下方创建按钮，以对齐它们：

        <Button
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:text="My Button 1"
        android:id="@+id/mesa_btn_salva"

        android:layout_below="@+id/my_linear_layout" />

所有这些都在您的 ScroolView 中。

仅此而已。

Answer 2

我建议利用 CoordinatorLayout 将内容放在 CollapsingToolbarLayout 内的选项卡上方。并使用 TabLayout 而不是两个 Buttons，这应该更符合 Android 设计指南（尽管您可以将 TabLayout 换成 LinearLayout 如果您愿意，可以使用两个按钮）：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarlayout android:id="@+id/app_bar"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay" android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <LinearLayout android:id="@+id/toolbar_content"
                android:layout_width="match_parent" android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_collapseMode="parallax">

                <!-- YOUR SCROLLING TOOLBAR CONTENT HERE -->

            </LinearLayout>

            <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
                android:backgroud="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"
                app:layout_collapseMode="pin"/>

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

        <android.support.design.widget.TabLayout android:id="@+id/tab_layout"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            app:tabIndicatorColor="?attr/colorAccent"
            app:menu="@menu/tabs_main"/>

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

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

        <!-- YOUR MAIN SCROLLING CONTENT HERE -->

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

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

请注意 TabLayout 在 CollapsingToolbarLayout 之外，但仍在 AppBarLayout 之内。这将使 TabLayout 固定在 Toolbar 下方以及您放入 CollapsingToolbarLayout 中的任何内容。无需多个 NestedScrollView 布局。

LinearLayout的间距可能有些问题（有些内容可能隐藏在Toolbar下），但如果是这样，你应该可以设置顶部LinearLayout 到 ?attr/actionBarSize 的边距。我还没有测试过这些，所以如果你运行遇到问题，请发表评论。

您甚至可以将 NestedScrollView 换成 ViewPager（不过请确保保留 app:layout_behavior）。这将允许您使用 mTabLayout.setupWithViewPager(mViewPager).

轻松地将选项卡绑定到两个片段

EDIT 经过测试，不幸的是这似乎并没有像我希望的那样工作。问题是部分内容隐藏在 Toolbar 下方，即使您将上边距设置为 ?attr/actionBarSize。这是因为，出于某种原因，状态栏的高度未包含在布局的上边距中。您可以尝试猜测上边距应该是多少，但这可能会导致工具栏和内容之间出现意外的填充。

滚动时如何在工具栏下方固定两个按钮

How to pin two buttons below toolbar while scrolling

android

scrollview