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

时间:2016-04-22 12:53:40

标签: android scrollview

Enter image description here

我想实现如图所示的这样的事情

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

在这里我试图有工具栏,下面我已经嵌套了scrollview,在滚动视图中我还有一个scrollview(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>

这正是我想要实现的目标。

我有一个折叠工具栏,我想滚动一半,我能够实现这一点。

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

2 个答案:

答案 0 :(得分:5)

我建议将CoordinatorLayout放在标签上方的CollapsingToolbarLayout内,以利用TabLayout。使用Buttons代替两个TabLayout,这应该更符合Android设计指南(尽管您可以通过两个按钮将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/actionBarSizeNestedScrollView。我还没有测试过这些,所以如果你遇到问题就要发表评论。

您甚至可以将ViewPager替换为app:layout_behavior(请确保保留mTabLayout.setupWithViewPager(mViewPager))。这样您就可以使用Toolbar轻松地将标签绑定到两个片段。

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

答案 1 :(得分:0)

为您的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内的所有内容。

就是这样。