FloatingActionButton不隐藏

时间:2015-07-07 13:29:45

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

我试图以编程方式隐藏我的FloatingActionButton fabLocation

fabLocation.setVisibility(View.GONE)

但它不起作用。

如果我在XML布局中添加android:visibility="gone",则在运行活动时会隐藏fabLocation,但在滚动时会再次出现。{/ p>

这是我的布局:

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/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/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorOverlay"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/img_couverture"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_navigation_drawer_header"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:layout_marginTop="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="18sp" />

                <View
                    android:background="@drawable/separator_orange_gradient"
                    android:layout_marginTop="8dp"
                    android:layout_marginBottom="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="2dp"/>

                <TextView
                    android:id="@+id/tv_history"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/TextAppearance.RobotoLight" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:id="@+id/fab_location"
    android:src="@drawable/ic_fab_location_24dp"
    app:backgroundTint="@color/colorOrange"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

17 个答案:

答案 0 :(得分:42)

这是由app:layout_anchor属性引起的。在更改可见性之前,您必须摆脱锚点:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setAnchorId(View.NO_ID);
fab.setLayoutParams(p);
fab.setVisibility(View.GONE);

答案 1 :(得分:11)

锚定到AppBarLayouts的FloatingActionButtons有一个特殊关系,其可见性由AppBarLayout的滚动位置控制。

您可以通过behavior_autoHide属性

关闭此功能
<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="..."
    app:behavior_autoHide="false"/>

如果您愿意,也可以通过编程方式执行此操作:

修改

fab.getBehavior()不正确,请使用getBehavior()

中的LayoutParams
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
FloatingActionButton.Behavior behavior = (FloatingActionButton.Behavior) lp.getBehavior();
if (behavior != null) {
    behavior.setAutoHideEnabled(false);
} else {
    behavior = new FloatingActionButton.Behavior();
    behavior.setAutoHideEnabled(false);
    lp.setBehavior(behavior);
}

答案 2 :(得分:8)

我对发布的任何解决方案都不满意。有些只在部分时间工作,而有些只在fab.setVisibility()工作。虽然我知道这在技术上是原始问题所要求的,但是一些回复表示对使用fab.hide()感兴趣,并且弄乱布局参数并没有完全找到问题的根源。

正如@ChrisBanes指出的那样,与FloatingActionButton.Behavior绑定的AppBarLayout是造成问题的原因。因此,与他的答案一样,您必须setAutoHideEnabled(false)禁用该功能。但是,当您实际希望FloatingActionButton在您手动调用hide()时自动隐藏时,此解决方案无效。

所以为了做到这一点;在手动隐藏Button之前,我只是禁用自动隐藏功能,然后在我手动显示Button之后重新启用该功能:

private void hideFloatingActionButton(FloatingActionButton fab) {
    CoordinatorLayout.LayoutParams params =
            (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
    FloatingActionButton.Behavior behavior =
            (FloatingActionButton.Behavior) params.getBehavior();

    if (behavior != null) {
        behavior.setAutoHideEnabled(false);
    }

    fab.hide();
}

private void showFloatingActionButton(FloatingActionButton fab) {
    fab.show();
    CoordinatorLayout.LayoutParams params =
            (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
    FloatingActionButton.Behavior behavior =
            (FloatingActionButton.Behavior) params.getBehavior();

    if (behavior != null) {
        behavior.setAutoHideEnabled(true);
    }
}

答案 3 :(得分:5)

如果您想显示隐藏的FAB

    <android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">


    <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true">
    ...

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

    ...

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:visibility="gone"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:clickable="true"/>

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

    CoordinatorLayout.LayoutParams p = new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.WRAP_CONTENT, CoordinatorLayout.LayoutParams.WRAP_CONTENT);
    p.anchorGravity = Gravity.BOTTOM | Gravity.END;
    p.setAnchorId(R.id.appbar);
    p.setMargins(...);
    fab.setLayoutParams(p);
    fab.setVisibility(View.VISIBLE);

答案 4 :(得分:5)

FloatingActionButton layers = (FloatingActionButton) findViewById(R.id.layers);
layers.hide();

它对我有用,setVisibilityFloatingActionButton不起作用,因为它属于另一个没有viewGroup方法的setVisibility

答案 5 :(得分:2)

隐藏和显示浮动操作栏的最简单方法是在您的活动中调用它。

隐藏:

nameOfYourFAB.Hide();

显示:

nameOfYourFAB.Show();

答案 6 :(得分:2)

经过一番回答后,我为我的问题找到了解决方案(当工厂被隐藏时,它可以处理行动!)。

首先,我建议您使用.setVisibility(View.GONE).setVisibility(View.VISIBLE)方法替换.show().hide()。这最后一个句柄也是actionMode

对我来说,第二个问题是当工厂被隐藏时也会处理这个动作,为了解决这个问题,我做到了:

final CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams)floatingActionButton.getLayoutParams();
    if (show){
        p.setAnchorId(R.id.appBarLayout);
        p.width = CoordinatorLayout.LayoutParams.WRAP_CONTENT;
        p.height = CoordinatorLayout.LayoutParams.WRAP_CONTENT;
        floatingActionButton.setLayoutParams(p);
        floatingActionButton.show();
    }else{
        p.setAnchorId(View.NO_ID);
        p.width = 0;
        p.height = 0;
        floatingActionButton.setLayoutParams(p);
        floatingActionButton.hide();
    }

答案 7 :(得分:1)

您的问题的真正解决方案是将默认FloatingActionButton.Behavior子类化为在其构造函数中调用setAutoHide(false),以便您自己控制它。

请注意,我在讨论下面的底页,但它对于所有已锚定的浮动操作按钮都是完全相同的问题,并且它确实响应了问题并应按预期解决问题。

或者,您可以从自定义行为中覆盖boolean onDependentViewChanged(…)方法,复制isBottomSheet(…)类中存在的FloatingActionButton.Behavior静态方法,并且只调用&amp;如果超级方法不是底页,则返回它的值。

您可以通过这种方式进一步自定义默认行为,或者直接扩展vanilla CoordinatorLayout.Behavior类,如果需要,您可以选择代码从FloatingActionButton.Behavior类复制粘贴。

这是我用来控制FAB可见性的代码:

/**
 * Allows controlling the FAB visibility manually.
 */
@SuppressWarnings("unused")
public class FabManualHideBehavior extends FloatingActionButton.Behavior {

    public FabManualHideBehavior() {
        super();
        setAutoHideEnabled(false);
    }

    public FabManualHideBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        setAutoHideEnabled(false);
    }
}

我以这种方式将它以xml的形式应用到我的FAB中:

<android.support.design.widget.CoordinatorLayout
    ...>
    ...
    <android.support.design.widget.FloatingActionButton
        ...
        app:layout_anchor="@+id/bottom_sheet"
        app:layout_anchorGravity="top|end"
        app:layout_behavior="your.package.name.ui.behavior.FabManualHideBehavior"/>

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

答案 8 :(得分:1)

隐藏浮动按钮

fab = (FloatingActionButton) findViewById(R.id.fab);
CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setAnchorId(View.NO_ID);
fab.setLayoutParams(p);
fab.hide;

并重新显示

fab = (FloatingActionButton) findViewById(R.id.fab);
CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setAnchorId(View.NO_ID);
fab.setLayoutParams(p);
fab.show;

答案 9 :(得分:1)

如果要隐藏晶圆厂,可以尝试以下操作: fab.hide();

其他尝试 fab.show();

享受。

答案 10 :(得分:1)

这里是简单的解决方案

private var fabAnchorId: Int = View.NO_ID
private val fabParams: CoordinatorLayout.LayoutParams
        get() = (fab.layoutParams as CoordinatorLayout.LayoutParams)

fun showFab() {
    fabParams.anchorId = fabAnchorId
    fabParams.gravity = Gravity.NO_GRAVITY
    fab.show()
}

fun hideFab() {
    fabParams.anchorId = View.NO_ID
    fabParams.gravity = Gravity.END.or(Gravity.BOTTOM)
    fab.hide()
}

在显示/隐藏之前我们必须改变锚点和重力

答案 11 :(得分:0)

我使用此代码:

boolean mFabShouldBeShown;
FloatingActionButton.OnVisibilityChangedListener fabListener = new FloatingActionButton.OnVisibilityChangedListener() {
        @Override
        public void onShown(FloatingActionButton fab) {
            super.onShown(fab);
            if(!mFabShouldBeShown){
                fab.hide();
            }
        }

        @Override
        public void onHidden(FloatingActionButton fab) {
            super.onHidden(fab);
            if(mFabShouldBeShown){
                fab.show();
            }
        }
};

public void methodWhereFabIsHidden() {
    mFabShouldBeShown = false;
    mFloatingActionButton.hide(fabListener);
}

public void methodWhereFabIsShown() {
    mFabShouldBeShown = true;
    mFloatingActionButton.show(fabListener);
}

答案 12 :(得分:0)

我使用布局边距将FAB放入或放出屏幕,从而解决了show()/ hide()的缺点。例如:

CoordinatorLayout.LayoutParams p =
   new CoordinatorLayout.LayoutParams(
      CoordinatorLayout.LayoutParams.WRAP_CONTENT,
      CoordinatorLayout.LayoutParams.WRAP_CONTENT);

p.gravity = Gravity.BOTTOM | Gravity.LEFT;
int fabMargin = (int)res.getDimension(R.dimen.fab_margin);

if( enabled ) {
   p.setMargins(fabMargin,0,0,fabMargin);
}
else {
   p.setMargins(-200,0,0,fabMargin);
}
mFab.setLayoutParams(p);

答案 13 :(得分:0)

我知道您的回答是关于如何使其适用于gone可见性,但如果您使用invisible而不是担心,那么代码就会减少。

答案 14 :(得分:0)

简单代码:

   public static void setVisibilityFab(FloatingActionButton fab, int visibility)
  {

        CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
        p.setAnchorId(View.NO_ID);
        fab.setLayoutParams(p);
        if(visibility==View.GONE || visibility==View.INVISIBLE)
            fab.setVisibility(View.GONE);
        else
            fab.setVisibility(View.VISIBLE);
    }

答案 15 :(得分:0)

这些其他解决方案都没有帮助我100%。我需要重复的动画节目和隐藏(例如FAB.show()hide()),同时在可见时锚定到应用栏。

每次我展示它时,我都会创建FAB new,手动插入和锚定它,并根据支持库实现动画。这很糟糕,但效果很好。

private void hidePlayButton(final FloatingActionButton fab) {
    // Cancel any animation from the default behavior
    fab.animate().cancel();
    fab.animate()
               .scaleX(0f)
               .scaleY(0f)
               .alpha(0f)
               .setDuration(200)
               .setInterpolator(new FastOutLinearInInterpolator())
               .setListener(new Animator.AnimatorListener() {
                   @Override public void onAnimationStart(Animator animation) {}

                   @Override public void onAnimationEnd(Animator animation) {
                      coordinatorLayout.removeView(fab);
                   }

                   @Override public void onAnimationCancel(Animator animation) {}

                   @Override public void onAnimationRepeat(Animator animation) {}
               });
}

private void showPlayButton() {
    int fabSize = getResources().getDimensionPixelSize(R.dimen.fab_size);
    int margin = getResources().getDimensionPixelSize(R.dimen.fab_margin);
    final FloatingActionButton fab = new FloatingActionButton(getActivity());
    fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(getActivity(), R.color.tint)));
    fab.setImageDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.play));
    CoordinatorLayout.LayoutParams p = new CoordinatorLayout.LayoutParams(fabSize, fabSize);
    p.rightMargin = p.leftMargin = p.bottomMargin = p.topMargin = margin;
    p.anchorGravity = Gravity.BOTTOM | Gravity.END;
    p.setAnchorId(R.id.appbar);
    fab.setLayoutParams(p);
    // Start from 1 pixel
    fab.setAlpha(0f);
    fab.setScaleX(0f);
    fab.setScaleY(0f);
    binding.coordinatorLayout.addView(fab);
    fab.animate()
       .alpha(1f)
       .scaleX(1f)
       .scaleY(1f)
       .setDuration(200)
       .setInterpolator(new FastOutLinearInInterpolator());

    fab.setOnClickListener(new View.OnClickListener() {
        @Override public void onClick(View v) {
            hidePlayButton(fab);
            // do action
        }
    });
}

答案 16 :(得分:0)

您可以使用以下方法做到这一点:

fab.setEnabled(false);
fab.setClickable(false);
fab.setAlpha(0.0f);

这与View.Gone

类似