具有浮动动作菜单的折叠工具栏 [英] Collapsing toolbar with floating action Menu
本文介绍了具有浮动动作菜单的折叠工具栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我点击了此链接，以使用fab创建浮动工具栏.
I followed this link to create floating toolbar with fab ..
当我单击flab时，我试图将fab更改为具有很少选项的浮动菜单，但是当我将fab与工具栏连接在一起时，我无法将fab折叠在一起的工具栏并隐藏浮动菜单.
I tried to change the fab to a floating menu with few options when i click on the flab but when i attached the fab along with the toolbar,I couldn't collapse the toolbar along with the fab and hide the floating menu.
这是我用来创建浮动菜单的链接 fab中的子菜单项
This is the link which i followed to create floating menu Sub menu items in fab
任何人都可以帮我吗......
Can any one help me please....
我的布局
<?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:background="@color/bg_card"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
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="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/header_image"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/app_bg_overlay"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:elevation="4dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:id="@+id/textViewJob"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/bg_card"
android:maxLines="2"
android:paddingBottom="8dp"
android:paddingEnd="96dp"
android:paddingStart="24dp"
android:paddingTop="8dp"
android:textColor="@color/white"
android:textSize="16sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/black" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabBackground="@color/bg_card"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/hint_color" />
</android.support.design.widget.AppBarLayout>
<!--<com.github.clans.fab.FloatingActionMenu
app:layout_anchor="@id/collapsing_toolbar"
app:layout_anchorGravity="bottom|right|end">-->
<!--
<include layout="@layout/layout_fab" />-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fraToolFloat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:orientation="vertical"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end">
<LinearLayout
android:id="@+id/linFab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="80dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="#FFF"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/lblMenu1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="2dp"
android:text="Mentorship"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabSub1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/mentorship"
app:backgroundTint="@color/colorPrimaryDark"
app:fabSize="mini" />
</LinearLayout>
<LinearLayout
android:id="@+id/linFab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="130dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="#FFF"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/lblMenu2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="2dp"
android:text="Alumni Meet"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabSub2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/alumni"
app:backgroundTint="@color/colorPrimaryDark"
app:fabSize="mini" />
</LinearLayout>
<LinearLayout
android:id="@+id/linFab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="180dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="#FFF"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/lblMenu3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="2dp"
android:text="Lunch Meetup"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabSub3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/lunch"
app:backgroundTint="@color/colorPrimaryDark"
app:fabSize="mini" />
</LinearLayout>
<LinearLayout
android:id="@+id/linFab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="230dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="#FFF"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/lblMenu4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="2dp"
android:text="Coffee Connect"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabSub4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/lunch"
app:backgroundTint="@color/colorPrimaryDark"
app:fabSize="mini" />
</LinearLayout>
<LinearLayout
android:id="@+id/linFabSetting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="280dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabSetting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="20dp"
android:src="@drawable/prof_plus"
app:backgroundTint="@color/colorPrimaryDark"
app:fabSize="normal" />
</LinearLayout>
</FrameLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
我正在折叠的工具栏功能
My collapsing toolbar funtion
private void setupCollapsingToolbar(){
private void setupCollapsingToolbar() {
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
headerImageView = (ImageView) findViewById(R.id.header_image);
headerImageView.setImageBitmap(sqLiteDBHelper.getUserImage(Prefs.getUserKey()));
collapsingToolbar.setTitleEnabled(true);
collapsingToolbar.setTitle(sqLiteDBHelper.getName(Prefs.getUserKey()));
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.expandedappbar);
subtitleTextView = (TextView) findViewById(R.id.textViewJob);
appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
int scrollRange = -1;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//Initialize the size of the scroll
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
//Check if the view is collapsed
if (scrollRange + verticalOffset == 0) {
toolbar.setBackgroundColor(ContextCompat.getColor(ProfileActivity.this, R.color.colorPrimary));
subtitleTextView.setVisibility(View.GONE);
fraToolFloat.setVisibility(View.GONE);
} else {
toolbar.setBackgroundColor(ContextCompat.getColor(ProfileActivity.this, android.R.color.transparent));
subtitleTextView.setText(sqLiteDBHelper.getCompanyName(Prefs.getUserKey()));
subtitleTextView.setVisibility(View.VISIBLE);
fraToolFloat.setVisibility(View.VISIBLE);
}
}
});
}
如何实现这一目标
推荐答案
我为您创建新布局的解决方案 layout_fab_submenu
i got solution for you create a new layout layout_fab_submenu like this
<LinearLayout
android:id="@+id/layoutFabSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_gravity="bottom|end"
android:layout_marginRight="8dp"
android:layout_marginBottom="120dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/cardview_light_background"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true" >
<TextView
android:id="@+id/cvtSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="132456"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold"
/>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_favorite_fill"
app:backgroundTint="@android:color/holo_green_light"
app:fabSize="mini" />
</LinearLayout>
<LinearLayout
android:id="@+id/layoutFabEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_gravity="bottom|end"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="170dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/cardview_light_background"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true" >
<TextView
android:id="@+id/cvtEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12346"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold"
/>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_favorite_fill"
app:backgroundTint="@android:color/holo_green_dark"
app:fabSize="mini" />
</LinearLayout>
现在将此布局包括在您这样的折叠式工具栏布局中
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".temp">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_barbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/disha2"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_my"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="-30dp"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:id="@+id/tv_home_welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="10dp"
android:text="Welcome,"
android:textColor="@color/colorWhite"
android:textSize="18dp"
app:layout_collapseMode="pin" />
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/layout_fab_submenu" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/app_barbar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@android:drawable/ic_dialog_info" />
</android.support.design.widget.CoordinatorLayout>
现在在您的Java文件中添加此代码
// declare variables
//boolean flag to know if main FAB is in open or closed state.
private boolean fabExpanded = false;
private FloatingActionButton fabSettings;
//Linear layout holding the Save submenu
private LinearLayout layoutFabSave;
//Linear layout holding the Edit submenu
private LinearLayout layoutFabEdit;
private LinearLayout layoutFabPhoto;
设置工厂按钮点击监听器
layoutFabSave = (LinearLayout) this.findViewById(R.id.layoutFabSave);
layoutFabEdit = (LinearLayout) this.findViewById(R.id.layoutFabEdit);
layoutFabPhoto = (LinearLayout) this.findViewById(R.id.layoutFabPhoto);
private void closeSubMenusFab(){
layoutFabSave.setVisibility(View.INVISIBLE);
layoutFabEdit.setVisibility(View.INVISIBLE);
layoutFabPhoto.setVisibility(View.INVISIBLE);
fabSettings.setImageResource(R.drawable.ic_favorite_fill);
fabExpanded = false;
}
//Opens FAB submenus
private void openSubMenusFab(){
layoutFabSave.setVisibility(View.VISIBLE);
layoutFabEdit.setVisibility(View.VISIBLE);
layoutFabPhoto.setVisibility(View.VISIBLE);
//Change settings icon to 'X' icon
fabSettings.setImageResource(R.drawable.ic_favorite_fill);
fabExpanded = true;
}
如有任何疑问，请问我 github链接
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (fabExpanded == true){
closeSubMenusFab();
} else {
openSubMenusFab();
}
}
});
这篇关于具有浮动动作菜单的折叠工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
