目前正在开发一款应用程序,我需要在“折叠”工具栏的右下角添加“共享”和“添加”按钮(用于视差效果).
这可能隐藏在滚动或可能坐在Actionbar上.添加了我想要实现的图像.目前还不知道如何做到这一点(尝试使用锚点的浮动操作按钮,但失败了).
这应该是这样的:
这是代码:
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android:id="@+id/htab_maincontent" 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:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/htab_appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/htab_collapse_toolbar" android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <ImageView android:id="@+id/htab_header" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/header" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/htab_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:gravity="top" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:titleMarginTop="13dp"/> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/htab_tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:background="@color/colorPrimary" app:tabIndicatorHeight="@dimen/tabIndicatorHeight"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/htab_viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
解决方法
如果您在CollapsingToolbarLayout中使用它,您可以这样做:
<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbarCollapse" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="match_parent" android:layout_height="190dp" android:background="@android:color/darker_gray" android:minHeight="190dp" android:src="@drawable/ic_email" app:layout_collapseMode="parallax" android:id="@+id/imageView8" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fabmain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@drawable/ic_add" app:backgroundTint="@color/ColorAccent" app:borderWidth="0dp" app:fabSize="mini" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_alignTop="@+id/fabmain2" android:layout_toStartOf="@+id/fabmain2" android:layout_marginEnd="20dp" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fabmain2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginLeft="16dp" android:src="@drawable/ic_add" app:backgroundTint="@color/ColorAccent" app:borderWidth="0dp" app:fabSize="mini" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end" android:layout_marginRight="16dp" android:layout_marginEnd="23dp" android:layout_alignBottom="@+id/imageView8" android:layout_alignParentEnd="true" android:layout_marginBottom="29dp" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" app:layout_collapseMode="pin" /> </RelativeLayout> </android.support.design.widget.CollapsingToolbarLayout>
另外,根据Google Material Design,我不认为这是两个按钮的标准方式/好方法!
另外,这是我的想法(标准方式):
您可以在操作栏上添加带有该图标的共享操作,然后像这样使用一个FloatingActionButton:
https://github.com/xuyisheng/DesignSupportLibraryDemo
或者我自己这样做:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#EEEEEE" android:fitsSystemWindows="true"> <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!--Your content--> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layoutdetails" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/thumbnaildetails" android:layout_width="match_parent" android:layout_height="200dp" android:layout_alignParentStart="true" android:contentDescription="@string/imghd" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <TextView android:id="@+id/txtitemdetailstitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="85dp" android:textAppearance="?android:attr/textAppearanceMedium" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/tbbardetails" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_alignParentStart="true" android:layout_alignParentTop="true" app:layout_collapseMode="pin" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@drawable/ic_work" app:backgroundTint="#E91E63" app:fabSize="normal" app:layout_anchor="@id/app_bar_layoutdetails" app:layout_anchorGravity="right|bottom" /> </android.support.design.widget.CoordinatorLayout>