web-dev-qa-db-ger.com

Floating Action Button wird nicht vollständig in einem Fragment angezeigt

Ich verwende die FAB-Taste zusammen mit RecyclerView in einem Fragment. Dieses Fragment ist eine Instanz eines TabViewPagers. Ich habe ein Problem mit der FAB-Taste. Ich habe die RecyclerView- und die Fab-Schaltfläche in einem FrameLayout platziert, wobei der FAB-Button unten rechts positioniert ist. Jetzt ist das Problem, mit dem ich konfrontiert bin, der FAB-Button ist nicht vollständig sichtbar. Die Hälfte des Teils ist wie in der Abbildung unten ausgeblendet. Kann mir jemand helfen, dieses Problem zu lösen. Danke im Voraus. 

FAB with RecyclerView inside FrameLayout

Hinweis: Das FAB wird nach dem Scrollen korrekt ausgerichtet. Das Problem tritt nur dann auf, wenn es ideal ist (vor dem Scrollen). 

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.support.v7.widget.RecyclerView
        Android:id="@+id/recyclerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="end|bottom"
        Android:layout_margin="10dp"
        app:backgroundTint="@color/red"
        Android:src="@drawable/ic_done"/>
</FrameLayout>

tabviewpagerlayout.xml

<?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.support.design.widget.AppBarLayout
        Android:id="@+id/appBarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <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/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />


        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" />

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

    <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" />

</Android.support.design.widget.CoordinatorLayout>
43
Chandru

Sie sollten Ihre FAB in die CoordinatorLayout..__ verschieben. Etwas wie folgt:

<Android.support.design.widget.CoordinatorLayout>

    <Android.support.design.widget.AppBarLayout>

        <Android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways" />

        <Android.support.design.widget.TabLayout/>

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

    <Android.support.v4.view.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_gravity="end|bottom"/>

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

Dann können Sie die RecyclerView auf folgende Weise im viewPager hinzufügen:

Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new RecyclerViewFragment(), "Tab1");
viewPager.setAdapter(adapter);

wo sich das RecyclerViewFragment-Layout befindet:

 <Android.support.v7.widget.RecyclerView
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/recyclerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>
10

Es ist keine akzeptable Lösung, die FAB anzeigen oder ausblenden zu müssen, egal welche Registerkarte ausgewählt ist. Ich habe alle Layoutkombinationen ausprobiert, aber das Verschieben des FAB auf das Aktivitätslayout war die einzige Lösung, die funktionierte. Was aber, wenn Sie die Schaltfläche nur in einer Registerkarte benötigen? Dies ist der einzige Weg, der jetzt funktioniert, aber ich erwarte ein Update der Designbibliothek, da diese Version zu fehlerhaft ist. Im Endeffekt muss das FAB ein direkter Nachkomme des CoordinatorLayout sein, damit es nicht durch die zusammenklappende Symbolleiste nach unten gedrückt wird.

17
Bojan Ilievski
  1. Ich hatte das gleiche Problem, dass der FloatingActionButton vollständig unsichtbar war und unten auf dem Bildschirm angezeigt wurde. Wenn ich nach unten scrolle, erscheint es. 
  2. Außerdem wurden die Registerkarten ausgeblendet, wenn nach unten gescrollt wurde, aber ich wollte, dass sie immer sichtbar sind. Daher wurde das Problem behoben, indem app:layout_scrollFlags="scroll|enterAlways" entfernt wurde. Danksagungen an JDev unter Wie vermeide ich das Ausblenden der Registerkarten beim Scrollen nach unten?
    Das FloatingActionButton-Problem wurde ebenfalls behoben. Es ist jetzt sichtbar.
6
cgr

Ich bin gerade auf das gleiche Problem gestoßen. Leider habe ich keine Antwort für Sie, aber einen Zusatzpunkt.

Es ist nicht so, dass der Knopf nach unten gedrückt wird, sondern das gesamte Fragment wurde nach unten gedrückt. Ich habe es bisher noch nicht getestet, aber ich stelle mir vor, wenn es einen Weg gibt, mit dem Sie die Größe der Fragmentseite erkennen können, werden Sie feststellen, dass sie nicht am unteren Bildschirmrand endet, wie es sein sollte. 

für eine mögliche Lösung denke ich darüber nach, eine Auffüllung der Größe "attr/actionBarSize" unten hinzuzufügen. 

Ich teste das und poste es, wenn ich fertig bin

update: Da ich eine Grenze von 80 dp verwendet habe, bekomme ich einen Screenshot (Ich habe nicht den Ruf, einen Screenshot zu posten, wth)

Workaround:

<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/rootLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        >
        <Android.support.design.widget.AppBarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

        <FrameLayout
            Android:id="@+id/fragment_root"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/border"
            Android:layout_marginTop="?attr/actionBarSize"
            >
            <!--Android:paddingBottom="?attr/actionBarSize"-->
            <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:background="@drawable/border"></LinearLayout>
            <fragment
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:name="com.derek.hianthy.mydiary.ui.BaseFragment"
                tools:layout="@layout/layout"
                Android:background="@drawable/border"
                />

        </FrameLayout>
        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/fabBtn"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom|right"
            Android:layout_marginBottom="@dimen/fab_margin_bottom"
            Android:layout_marginRight="@dimen/fab_margin_right"
            Android:src="@drawable/ic_action_add"
            app:borderWidth="0dp"
            app:fabSize="normal"
            Android:layout_alignParentBottom="true"
            Android:layout_alignParentRight="true"
            Android:layout_alignParentTop="false"
            Android:layout_alignParentLeft="false" />

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

notic app: layout_behavior = "@ string/appbar_scrolling_view_behavior" wurde herausgenommen . result

4
Derek Zhu

Ich tat irgendwie, was Gabriele vorschlug, als er die FAB in die untergeordnete Aktivität verlegte. Außerdem müssen Sie die Farbe/den clickListener der FAB in onTabSelected aktualisieren:

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        ...

        setFloatingActionButtonForImagesTab();

    }

    ...

    @Override
    public void onTabSelected(final TabLayout.Tab tab) {
    switch (tab.getPosition()) {
        case 0:
            setFloatingActionButtonForImagesTab();
            break;
        case 1:
            setFloatingActionButtonForMusicTab();
            break;
        case 2:
            setFloatingActionButtonForVideoTab();
            break;
        }
    }

    ...

}

und dann in der Setup-Funktion einfach die Farbe einstellen und auf Listener klicken:

private void setFloatingActionButtonForImagesTab() {
    myViewPager.setCurrentItem(0);
    floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple));
    floatingActionButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(coordinatorLayout, "images", Snackbar.LENGTH_LONG)
                .show();
        }
    });
}

Notieren Sie sich den Aufruf von setCurrentItem oben. Es ist jetzt erforderlich, dass Sie TabLayout.OnTabSelectedListener implementieren.

4
Adam Johns

Es könnte etwas spät sein, aber für mich schien es die beste Option zu sein, ein anderes Fragment zu erstellen, das das Fragment mit Ihrem Inhalt und der schwebenden Schaltfläche enthält. Dieser Code funktioniert sehr gut in meiner Anwendung:

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="domain.ItemsFragment">


    <fragment
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:name="com.lucyapp.client.ItemFragment"
        Android:id="@+id/fragment"
        tools:layout="@layout/fragment_item_list" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|end"
        Android:layout_margin="@dimen/fab_margin"
        Android:src="@Android:drawable/ic_dialog_email" />

</FrameLayout>
3
speedingdeer

Diese Lösung hat für mich funktioniert. Erstellen Sie eine neue Klasse namens CustomBehavior mit dem folgenden Code:

public class CustomBehavior extends CoordinatorLayout.Behavior<ViewPager> {

private int mActionBarHeight;

public CustomBehavior(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);
    init(context);
}

public CustomBehavior(Context context) {
    init(context);
}

private void init(Context context) {
    TypedValue tv = new TypedValue();
    if (context.getTheme().resolveAttribute(Android.R.attr.actionBarSize, tv, true)) {
        mActionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources().getDisplayMetrics());
    }
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, ViewPager child, View dependency) {
    return dependency instanceof AppBarLayout;
}

public boolean onDependentViewChanged(CoordinatorLayout parent, ViewPager child, View dependency) {
    offsetChildAsNeeded(parent, child, dependency);
    return false;
}

private void offsetChildAsNeeded(CoordinatorLayout parent, View child, View dependency) {
    if (child instanceof ViewPager) {
        ViewPager viewPager = (ViewPager) child;
        View list = viewPager.findViewById(R.id.recycler_view);
        if (list != null) {
            final CoordinatorLayout.Behavior behavior =
                    ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
            if (behavior instanceof AppBarLayout.Behavior) {
                final AppBarLayout.Behavior ablBehavior = (AppBarLayout.Behavior) behavior;
                AppBarLayout appBarLayout = (AppBarLayout) dependency;
                ViewCompat.setTranslationY(list, ablBehavior.getTopAndBottomOffset()
                        + appBarLayout.getTotalScrollRange()
                        + mActionBarHeight);
            }
        }
    }
}

}

Weisen Sie nun dem Viewpager-Widget in der XML-Datei die benutzerdefinierte Verhaltensklasse zu

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="yourpackage.CustomBehavior"
    />
1
ignacio_gs

Ich habe die gleichen Probleme mit View-Pager 1. Fragment FAB-Schaltflächen werden unter dem Bildschirm und beim Scrollen der Anzeige angezeigt .. __ Nach einigen Befunden habe ich festgestellt, dass ich geschrieben habe

app:layout_behavior="@string/appbar_scrolling_view_behavior"

in ViewPager in CoordinatorLayout. Nach dem Entfernen dieses Bildlaufverhaltens werden Probleme mit der FAB-Position behoben.

Bitte überprüfen Sie, ob meine Implementierung korrekt funktioniert:

<?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.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.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

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

                <TextView
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:gravity="center_horizontal"
                    Android:text="@string/app_name"
                    Android:textColor="@color/textPrimary"
                    Android:textSize="18sp" />

                <TextView
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:gravity="center_horizontal"
                    Android:text="@string/str_toolbar_subtittle"
                    Android:textColor="@color/textPrimary"
                    Android:textSize="14sp" />
            </LinearLayout>
        </Android.support.v7.widget.Toolbar>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom"
            Android:background="?attr/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/errorColor"
            app:tabTextColor="@color/white" />

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/app_bar" />

</Android.support.design.widget.CoordinatorLayout>
1
Nikhil Jogdand

Ich hatte das gleiche Problem, bei dem die Anforderung bestand, FAB in einem Fragment darzustellen. Was ich getan habe, ist nur die Linie aus der Symbolleiste entfernt 

app:layout_scrollFlags="scroll|enterAlways"

Sie können mein Layout überprüfen

<?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:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:paddingTop="@dimen/appbar_padding_top"
        Android:background="@color/white"
        app:elevation="0dp"
        Android:elevation="0dp"
        >

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar_main"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_weight="1"
            Android:background="@color/white"
            app:title="@string/app_name">

        </Android.support.v7.widget.Toolbar>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs_main"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            >


        </Android.support.design.widget.TabLayout>

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</Android.support.design.widget.CoordinatorLayout>
0
Shantanu Patil