滚动时如何在工具栏下方固定两个按钮 [英] How to pin two buttons below toolbar while scrolling
问题描述
我想要实现如图所示的类似效果
I want to achieve something like this as shown in image
我已经尝试过此代码,但无法将按钮固定在顶部图片或工具栏下方
I have tried this code but not able to pin button below top image or toolbar
在这种情况下,我尝试使用工具栏,在其下方,我嵌套了滚动视图,在该滚动视图内部,我又有一个scrollview(scrollview2).
In this I am trying to have toolbar and below that i have nested scrollview and inside that scrollview I have one more scrollview(scrollview2).
我想将按钮固定或锚定到scrollview2,当我向上滚动此scrollview2时,我希望按钮固定至工具栏
I want to pin or anchor a button to scrollview2 and when i scroll this scrollview2 up then i want button to pin to toolbar
<?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>
这正是我想要实现的目标.
this is what exactly i want to achieve.
我有一个折叠的工具栏,我想滚动一半,并且能够实现.
I have a collapsing toolbar which I want to scroll half and I am able to achieve that.
此外,我在嵌套的滚动视图中有两个按钮,当我向下滚动(如gif所示)时,我想将其固定在工具栏上.
Further I have two buttons in nested scrollview which i want to pin to toolbar when I scrolldown as shown in gif.
推荐答案
我建议通过将内容放在CollapsingToolbarLayout
中选项卡上方的方式来利用CoordinatorLayout
.并使用TabLayout
而不是两个Buttons
,这应该更符合Android设计准则(尽管您可以根据需要将两个两个按钮的TabLayout
换成一个LinearLayout
):
I would suggest taking advantage of the CoordinatorLayout
by putting the content above the tabs inside a CollapsingToolbarLayout
. And using a TabLayout
instead of two Buttons
, which should be more in line with the Android design guidelines (though you could just swap the TabLayout
for a LinearLayout
with two buttons if your prefer):
<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
布局.
Notice that the TabLayout
is outside of the CollapsingToolbarLayout
, but still inside of the AppBarLayout
. This will keep the TabLayout
pinned underneath the Toolbar
and whatever content you put inside the CollapsingToolbarLayout
. And no need for multiple NestedScrollView
layouts.
LinearLayout
的间距可能存在一些问题(某些内容可能隐藏在Toolbar
下),但是在这种情况下,您应该能够设置LinearLayout
的上边距到?attr/actionBarSize
.我还没有测试过任何一个,如果遇到问题,请发表评论.
There may be some problems with the spacing of the LinearLayout
(some content may be hidden under the Toolbar
), but if that is the case, you should be able to set the top margin of the LinearLayout
to ?attr/actionBarSize
. I haven't tested any of this, so comment if you run into issues.
您甚至可以将NestedScrollView
换成ViewPager
(尽管请确保保留app:layout_behavior
).这将使您可以使用mTabLayout.setupWithViewPager(mViewPager)
轻松将选项卡绑定到两个片段.
You can even swap out the NestedScrollView
for a ViewPager
(make sure you keep the app:layout_behavior
though). This would allow you to easily tie the tabs to two fragments using mTabLayout.setupWithViewPager(mViewPager)
.
编辑,不幸的是,经过测试,这似乎不符合我希望的那样.问题是,即使您将上边距设置为?attr/actionBarSize
,部分内容也会隐藏在Toolbar
下方.这是因为由于某种原因,状态栏的高度未包括在布局的顶部边缘中.您可以尝试猜测应该的最高边距,但这会导致工具栏和内容之间出现意外填充.
EDIT After testing, unfortunately this does not seem to work the way I had hoped. The problem is that part of the content is hidden underneath the Toolbar
, even if you set the top margin to ?attr/actionBarSize
. This is because, for some reason, the height of the status bar is not included in the top margin of the layout. You could try to guess what the top margin should be, but this can lead to unexpected padding between the toolbar and the content.
这篇关于滚动时如何在工具栏下方固定两个按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!