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

【问题标题】：How to pin two buttons below toolbar while scrolling滚动时如何在工具栏下方固定两个按钮
【发布时间】：2016-04-22 12:53:40
【问题描述】：

我想实现如下图所示

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

在此我尝试使用工具栏，在该工具栏下方我有嵌套的滚动视图，并且在该滚动视图内我还有一个滚动视图（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 所示。

【问题讨论】：

  • 我已经在我的 xml 代码中使用了 Co-ordinator 布局。请检查。
  • 点击此链接可能会对您有所帮助：stackoverflow.com/questions/17780591/…
  • @MohitGoel 试试下面我的回答。

标签： android scrollview


【解决方案1】：

我建议通过将内容放在CollapsingToolbarLayout 内的选项卡上方来利用CoordinatorLayout。并使用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) 轻松地将选项卡绑定到两个片段。

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

【讨论】：

  • 感谢您的解决方案。我正在尝试在工具栏中添加一个图像视图。即使我将其宽度作为匹配父级，它仍然为 imageview 提供一些填充。
  • @MohitGoel 嗯，这很奇怪。发布您的新布局？也许我会看到你错过的东西。
  • 还有其他方法可以做这件事吗？
  • @MohitGoel 肯定有其他方法可以做到这一点，只是更复杂。您始终可以创建自己的ViewGroup，它会拦截触摸事件，并以您想要的方式处理它们。这似乎是 Android 提供的最简单的解决方案，尽管它更多地意味着只是将图像放在工具栏后面，而不是整个布局。
  • @MohitGoel 实际上，这是您希望实现的唯一功能吗？我注意到在您的第一条评论中您说您尝试在工具栏中放置 ImageView，这与您最初的 GIF 显示的不完全一样，但 是 CollapsingToolbarLayout 的含义。 ImageView 周围的额外填充可能是由于 scaleType 造成的，但我必须知道更多才能确定。
【解决方案2】：

为您的 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 中。

仅此而已。

【讨论】：

  • NestedScrollView 只能有一个孩子。而且，如果我只是在线性布局下方添加按钮，它不会在滚动后固定在 NestedScrollView 和工具栏下方。
  • 没错，我忘了。因此，创建一个相对视图并将您的线性布局 (my_linear_layout) 和按钮放在里面。
猜你喜欢
  • 1970-01-01
  • 2017-06-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode