Android
FloatingActionButton

Invoering

parameters

Opmerkingen

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Hoe de FAB aan de lay-out toe te voegen

Om een FloatingActionButton te gebruiken, voegt u gewoon de afhankelijkheid toe aan het bestand build.gradle zoals beschreven in de opmerkingen.

Voeg vervolgens toe aan de lay-out:

 <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="@drawable/my_icon" />

Een voorbeeld:

Kleur

De achtergrondkleur van deze weergave is standaard de colorAccent van uw thema.

Als de src in de bovenstaande afbeelding alleen naar het + -pictogram verwijst (standaard 24x24 dp), kunt u de app:backgroundTint="@color/your_colour" gebruiken om de achtergrondkleur van de volledige cirkel te krijgen app:backgroundTint="@color/your_colour"

Als u de kleur in de code die u wilt gebruiken wilt wijzigen,

myFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

Als u de FAB-kleur in ingedrukte toestand wilt wijzigen, gebruikt u

mFab.setRippleColor(your color in int);

positionering

Het wordt aanbevolen om minimaal 16dp vanaf de rand op mobiel te plaatsen en minimaal 24dp op tablet / desktop.

Opmerking : Nadat u een src hebt ingesteld met uitzondering van het volledige gebied van FloatingActionButton moet u ervoor zorgen dat u de juiste grootte van die afbeelding hebt om het beste resultaat te krijgen.

Standaard cirkelgrootte is 56 x 56dp

Minicirkelmaat: 40 x 40dp

Als u alleen het pictogram Interieur wilt wijzigen, gebruikt u een 24 x 24dp-pictogram voor de standaardgrootte

FloatingActionButton tonen en verbergen bij vegen

Om een FloatingActionButton met de standaardanimatie weer te geven en te verbergen, roept u de methoden show() en hide() . Het is een goede gewoonte om een FloatingActionButton in de activiteitslay-out te houden in plaats van deze in een fragment te plaatsen, hierdoor kunnen de standaardanimaties werken bij weergeven en verbergen.

Hier is een voorbeeld met een ViewPager :

• Drie tabbladen
• FloatingActionButton voor het eerste en derde tabblad
• Verberg de FloatingActionButton op het middelste tabblad

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton) findViewById(R.id.fab);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // ...... set up ViewPager ............

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    fab.setImageResource(android.R.drawable.ic_dialog_email);
                    fab.show();
                } else if (position == 2) {
                    fab.setImageResource(android.R.drawable.ic_dialog_map);
                    fab.show();
                } else {
                    fab.hide();
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // Handle the FloatingActionButton click event:
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewPager.getCurrentItem();
                if (position == 0) {
                    openSend();
                } else if (position == 2) {
                    openMap();
                }
            }
        });

    }
}

Resultaat:

FloatingActionButton tonen en verbergen tijdens het scrollen

Beginnend met de ondersteuningsbibliotheek versie 22.2.1, is het mogelijk om een FloatingActionButton te tonen en te verbergen voor schuifgedrag met behulp van een FloatingActionButton.Behavior subklasse die gebruik maakt van de methoden show() en hide() .

Merk op dat dit alleen werkt met een CoordinatorLayout in combinatie met innerlijke weergaven die genest scrollen ondersteunen, zoals RecyclerView en NestedScrollView .

Deze klasse ScrollAwareFABBehavior komt uit de Android-gidsen op Codepath _{^{(cc-wiki met toeschrijving vereist)}}

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

Geef in de lay-out xml FloatingActionButton de app:layout_behavior met de volledig gekwalificeerde klassenaam van ScrollAwareFABBehavior :

app:layout_behavior="com.example.app.ScrollAwareFABBehavior"

Bijvoorbeeld met deze lay-out:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    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"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="fixed"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:elevation="0dp"
            app:tabTextColor="#d3d3d3"
            android:minHeight="?attr/actionBarSize"
            />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

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

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

Hier is het resultaat:

Het gedrag van FloatingActionButton instellen

U kunt het gedrag van de FAB instellen in XML.

Bijvoorbeeld:

<android.support.design.widget.FloatingActionButton    
   app:layout_behavior=".MyBehavior" />

Of u kunt programmatisch instellen met behulp van:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(xxxx);
fab.setLayoutParams(p);