2

我跟着这个链接创建与晶圆厂浮动工具栏..折叠式工具浮动操作菜单

Collapsing toolbar with floating action Menu

我试图将工厂变成带几个选项的浮动菜单时,我对肥肉,但点击当我将工厂连同工具栏连接在一起时,我无法将工具栏与工厂一起折叠并隐藏浮动菜单。

I need the fab to be a menu,When i click on it,It show show options downward and also it should collpase along with the toolbar

这是我遵循创建浮动菜单 Sub menu items in fab

任何一个可以帮助我,请....

我的布局

<?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> 

的联系我折叠工具栏功能

私人无效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); 
     } 

    } 
}); 

}

如何实现这个

enter image description here

+0

请附上您的代码,使我们确切地知道你尝试的东西。 –

+0

你可以看看现在..我已经附上我的代码@ running.t –

+0

@ANITHASUNDARAMURTHY检查我的答案,并询问我的情况下任何查询 –

回答

2

我得到的解决方案为您创建一个新的布局layout_fab_submenu这样

<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 link

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
    fab.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View view) { 
      if (fabExpanded == true){ 
       closeSubMenusFab(); 
      } else { 
       openSubMenusFab(); 
      } 
     } 
    }); 
+0

我想有文字视图像子标题,而隐藏在崩溃...如何以达到那 –

+0

我没有得到你,你可以简要解释 –

+0

可以请检查我更新的问题...橙色是图像视图和下面我需要一个文本在图像中看到它应该崩溃并消失与晶圆厂...希望你得到我想说的 –