如何在点击FloatingActionButton时打开隐藏主屏幕的图层

时间:2016-06-22 12:39:08

标签: android material-design floating-action-button

当用户点按FloatingActionButton时,应打开FloatingActionButton列表,同时应打开一个背景图层,其中包含背景主要布局,但不应隐藏FAB。

我能够在Lollipop及以上的地方做到这一点,但在KitKat中以及层下面也覆盖了FAB。

如何阻止图层覆盖FAB,例如环聊应用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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:m_oContext="com.starxsoft.batteryxnew.MainActivity">

    <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

     <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>



    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="@color/floating_bt"
    android:src="@drawable/ic_battery_floating"
    />
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_3"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginBottom="200dp"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="@dimen/fab_margin"
    android:visibility="invisible"
    app:backgroundTint="#5c6bc0"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_menu_compass" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_2"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginBottom="145dp"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="@dimen/fab_margin"
    android:visibility="invisible"
    app:elevation="6dp"
    app:backgroundTint="#3f51b5"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_menu_myplaces" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_1"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginBottom="90dp"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="@dimen/fab_margin"
    android:visibility="invisible"
    app:elevation="6dp"
    app:backgroundTint="#3949ab"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_notification_clear_all" />
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout_cover"
    android:visibility="invisible"
    android:orientation="vertical"
    android:elevation="4dp"
    ></LinearLayout>

和动画:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
<scale
    android:duration="300"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXScale="0.8"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toYScale="0.8" />
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="300"/>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
<scale
    android:duration="300"
    android:fromXScale="0.8"
    android:fromYScale="0.8"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toYScale="0.0" />
<alpha android:fromAlpha="1.0"
       android:toAlpha="0.0"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:duration="300"/>
 </set>

和活动:

 private Boolean isFabOpen = false;
private Boolean isLayerOpen =false;

//Animations
Animation fab_open;
Animation fab_close,rotate_forward,rotate_backward;
Animation layer_open;
Animation layer_close;
 @Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  m_fab_menu=(FloatingActionButton)findViewById(R.id.fab);
  lyt_coverLayer=(LinearLayout)findViewById(R.id.layout_cover);
 //   lyt_coverLayer.setBackgroundColor(Color.TRANSPARENT);
    lyt_coverLayer.setBackgroundColor(Color.CYAN);

    //Animations
        fab_open = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_open);
    fab_close=AnimationUtils.loadAnimation(getApplication(),R.anim.fab_close);
    rotate_forward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_forward);
        rotate_backward =     AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_backward);
    //Animate layer
        layer_open=AnimationUtils.loadAnimation(getApplication(),     R.anim.fab_open);
          layer_close=AnimationUtils.loadAnimation(getApplication(),R.anim.fab_close);
     m_fab_menu.setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            animateFAB();
            animateLayer();
        }
    });

  public void animateFAB(){

    if(isFabOpen){

        m_fab_menu.startAnimation(rotate_backward);
        m_fab_sensors.startAnimation(fab_close);
        m_fab_optimization.startAnimation(fab_close);
        m_fab_profiles.startAnimation(fab_close);
        m_fab_optimization.setClickable(false);
        m_fab_profiles.setClickable(false);
        m_fab_sensors.setClickable(false);
        isFabOpen = false;

    } else {

        m_fab_menu.startAnimation(rotate_forward);
        m_fab_sensors.startAnimation(fab_open);
        m_fab_optimization.startAnimation(fab_open);
        m_fab_profiles.startAnimation(fab_open);
        m_fab_profiles.setClickable(true);
        m_fab_optimization.setClickable(true);
        m_fab_sensors.setClickable(true);
        isFabOpen = true;
    }
}
public void animateLayer(){
    if(isLayerOpen){
        lyt_coverLayer.startAnimation(layer_close);
        lyt_coverLayer.setClickable(false);
        isLayerOpen = false;
    }else{
        lyt_coverLayer.startAnimation(layer_open);
        lyt_coverLayer.setClickable(true);
        isLayerOpen=true;
    }

}

2 个答案:

答案 0 :(得分:0)

尝试让浮动动作按钮高度大于其他视图,包括侧抽屉视图:

 android:elevation="10dp"

答案 1 :(得分:0)

我已经解决了这个问题:

      public void animateLayer(){
    if(isLayerOpen){
        lyt_coverLayer.startAnimation(layer_close);
        lyt_coverLayer.setClickable(false);
        lyt_coverLayer.getBackground().setAlpha(0);
        isLayerOpen = false;
    }else{
        lyt_coverLayer.startAnimation(layer_open);
        lyt_coverLayer.setClickable(true);
        lyt_coverLayer.getBackground().setAlpha(240);
        if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
        {

            m_fab_sensors.bringToFront();
            m_fab_optimization.bringToFront();
            m_fab_menu.bringToFront();
            m_fab_profiles.bringToFront();
            m_fab_sensors.invalidate();
            m_fab_optimization.invalidate();
            m_fab_menu.invalidate();
            m_fab_profiles.invalidate();
            lyt_coverLayer.invalidate();
        }
        isLayerOpen=true;
    }

}