我想实现如图所示的这样的事情
我已尝试过此代码,但无法在顶部图片或工具栏下方固定按钮
在这里我试图有工具栏,下面我已经嵌套了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>
这正是我想要实现的目标。
我有一个折叠工具栏,我想滚动一半,我能够实现这一点。
此外,我在嵌套滚动视图中有两个按钮,当我向下滚动时,我想将其固定到工具栏上,如图所示。
答案 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/actionBarSize
到NestedScrollView
。我还没有测试过这些,所以如果你遇到问题就要发表评论。
您甚至可以将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内的所有内容。
就是这样。