Android
FloatingActionButton

Introduktion

parametrar

Anmärkningar

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

Hur man lägger till FAB i layouten

För att använda en FloatingActionButton lägger du bara till beroendet i build.gradle filen som beskrivs i kommentaravsnittet.

Lägg sedan till i layouten:

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

Ett exempel:

Färg

Bakgrundsfärgen på den här vyn är standardvärde för ditt temas färgAccent.

I bilden ovan om src bara pekar på + -ikonen (som standard 24x24 dp), för att få bakgrundsfärgen på hela cirkeln kan du använda app:backgroundTint="@color/your_colour"

Om du vill ändra färg i kod kan du använda,

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

Om du vill ändra FAB: s färg i tryckt tillstånd använder du

mFab.setRippleColor(your color in int);

positionering

Det rekommenderas att placera 16dp minimum från kanten på mobil och 24dp minimum på surfplatta / skrivbord.

Obs! När du ställer in en src med undantag för att täcka hela området med FloatingActionButton se till att du har rätt storlek på den bilden för att få bästa resultat.

Standardcirkelstorlek är 56 x 56 dp

Minicirkelstorlek: 40 x 40 dp

Om du bara vill ändra interiörikonen använder du en 24 x 24 dp-ikon för standardstorlek

Visa och dölj flytandeAktionsknapp vid svep

För att visa och dölja en FloatingActionButton med standardanimationen, ring bara metoderna show() och hide() . Det är bra att hålla en FloatingActionButton i aktivitetslayouten istället för att sätta den i ett fragment, detta gör att standardanimationerna fungerar när de visas och gömmer sig.

Här är ett exempel med en ViewPager :

• Tre flikar
• Visa FloatingActionButton för den första och tredje fliken
• Dölj FloatingActionButton på den mittersta fliken

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();
                }
            }
        });

    }
}

Resultat:

Visa och dölj FloatingActionButton på Scroll

Börjar med Support Library version 22.2.1, det är möjligt att visa och dölja en FloatingActionButton från rullningsbeteende med hjälp av en FloatingActionButton.Behavior underklass som utnyttjar show() och hide() -metoderna.

Observera att detta bara fungerar med en CoordinatorLayout i samband med inre vyer som stöder Nested Scrolling, till exempel RecyclerView och NestedScrollView .

Den här ScrollAwareFABBehavior klassen kommer från Android Guides on Codepath _{^{(cc-wiki med attribution krävs)}}

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();
        }
    }
}

I FloatingActionButton-layout xml anger du app:layout_behavior med det fullständigt klassificerade namnet på ScrollAwareFABBehavior :

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

Till exempel med denna layout:

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

Här är resultatet:

Ställ in beteende för FloatingActionButton

Du kan ställa in FAB: s beteende i XML.

Till exempel:

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

Eller så kan du ställa in programmatiskt med:

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