Android
FloatingActionButton

Einführung

Parameter

Bemerkungen

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

So fügen Sie die FAB zum Layout hinzu

Um einen FloatingActionButton zu verwenden, fügen Sie die Abhängigkeit in der build.gradle Datei hinzu, wie im Abschnitt "Anmerkungen" beschrieben.

Dann fügen Sie das Layout hinzu:

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

Ein Beispiel:

Farbe

Die Hintergrundfarbe dieser Ansicht ist standardmäßig der colorAccent Ihres Themas.

Wenn das src im obigen Bild nur auf das Symbol + (standardmäßig 24x24 dp) zeigt, können Sie die Hintergrundfarbe des Vollkreises verwenden, app:backgroundTint="@color/your_colour" Sie app:backgroundTint="@color/your_colour"

Wenn Sie die Farbe im Code ändern möchten, können Sie

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

Wenn Sie die Farbe von FAB im gepressten Zustand ändern möchten, verwenden Sie

mFab.setRippleColor(your color in int);

Positionierung

Es wird empfohlen, mindestens 16 dB vom Rand des Mobilgeräts und mindestens 24 dB vom Tablet / Desktop aus zu platzieren.

Hinweis : Wenn Sie einen SRC eingestellt haben, mit Ausnahme, dass der gesamte Bereich von FloatingActionButton abgedeckt wird, stellen Sie sicher, dass Sie die richtige Größe des Bildes haben, um das beste Ergebnis zu erzielen.

Die Standardkreisgröße beträgt 56 x 56 dB

Minikreisgröße: 40 x 40 dp

Wenn Sie nur das Innensymbol ändern möchten, verwenden Sie ein 24 x 24-dB-Symbol für die Standardgröße

FloatingActionButton beim Swipe anzeigen und ausblenden

Um einen FloatingActionButton mit der Standardanimation ein- und auszublenden, rufen Sie einfach die Methoden show() und hide() . Es empfiehlt sich, einen FloatingActionButton im Aktivitätslayout zu belassen, anstatt ihn in ein Fragment zu setzen. Dadurch können die Standardanimationen beim Anzeigen und Ausblenden funktionieren.

Hier ist ein Beispiel mit einem ViewPager :

• Drei Registerkarten
• FloatingActionButton für die erste und dritte Registerkarte anzeigen
• Blenden Sie den FloatingActionButton auf der mittleren Registerkarte aus

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

    }
}

Ergebnis:

FloatingActionButton beim Blättern anzeigen und ausblenden

Beginnend mit der Support Library Version 22.2.1 ist es möglich, ein FloatingActionButton- Verhalten mithilfe einer FloatingActionButton.Behavior Unterklasse, die die Methoden show() und hide() nutzt, vor dem Bildlaufverhalten anzuzeigen und hide() .

Beachten Sie, dass dies nur mit einem CoordinatorLayout in Verbindung mit inneren Ansichten funktioniert, die Nested Scrolling unterstützen, wie z. B. RecyclerView und NestedScrollView .

Diese ScrollAwareFABBehavior Klasse stammt aus den Android-Guides für Codepath _{^{(cc-wiki mit Attribution erforderlich).}}

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

app:layout_behavior in der FloatingActionButton-Layout-XML die app:layout_behavior mit dem vollständig qualifizierten Klassennamen von ScrollAwareFABBehavior :

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

Zum Beispiel mit diesem 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>

Hier ist das Ergebnis:

Einstellungsverhalten von FloatingActionButton

Sie können das Verhalten der FAB in XML festlegen.

Zum Beispiel:

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

Oder Sie können programmgesteuert einstellen mit:

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