Android
FloatingActionButton

परिचय

पैरामीटर

टिप्पणियों

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

लेआउट में एफएबी कैसे जोड़ें

फ़्लोटिंगएशनबटन का उपयोग करने के लिए, टिप्पणी अनुभाग में वर्णित build.gradle . build.gradle फ़ाइल में निर्भरता जोड़ें।

फिर लेआउट में जोड़ें:

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

एक उदाहरण:

रंग

इस दृश्य की पृष्ठभूमि का रंग आपके विषय के रंग के अनुसार चूक करता है।

उपरोक्त छवि में अगर src केवल + आइकन (डिफ़ॉल्ट रूप से 24x24 dp) को इंगित करता है, तो पूर्ण सर्कल की पृष्ठभूमि का रंग प्राप्त करने के लिए आप app:backgroundTint="@color/your_colour" उपयोग कर सकते हैं app:backgroundTint="@color/your_colour"

यदि आप कोड में रंग बदलना चाहते हैं, तो आप उपयोग कर सकते हैं,

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

यदि आप दबाए गए राज्य उपयोग में FAB का रंग बदलना चाहते हैं

mFab.setRippleColor(your color in int);

पोजिशनिंग

यह मोबाइल पर किनारे से न्यूनतम 16dp और टैबलेट / डेस्कटॉप पर 24dp न्यूनतम रखने की सिफारिश की गई है।

नोट : एक बार जब आप एक src को छोड़कर FloatingActionButton के पूरे क्षेत्र को कवर करते हैं, तो सुनिश्चित करें कि आपके पास सबसे अच्छा परिणाम प्राप्त करने के लिए उस छवि का सही आकार है।

डिफ़ॉल्ट सर्कल का आकार 56 x 56dp है

मिनी सर्कल का आकार: 40 x 40dp

यदि आप केवल केवल आंतरिक आइकन को बदलना चाहते हैं तो डिफ़ॉल्ट आकार के लिए 24 x 24dp आइकन का उपयोग करें

स्वाइप पर फ़्लोटिंगएशनबटन दिखाएँ और छिपाएँ

डिफ़ॉल्ट एनीमेशन के साथ एक FloatingActionButton को दिखाने और छिपाने के लिए, बस तरीकों को show() और hide() । FloatingActionButton में डालने के बजाय एक्टिविटी लेआउट में FloatingActionButton रखने के लिए यह अच्छा अभ्यास है, यह डिफ़ॉल्ट एनिमेशन को दिखाने और छिपाने के दौरान काम करने की अनुमति देता है।

यहाँ ViewPager साथ एक उदाहरण दिया गया है:

• तीन टैब्स
• पहले और तीसरे टैब के लिए FloatingActionButton दिखाएँ
• मध्य टैब पर FloatingActionButton को छिपाएँ

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

    }
}

परिणाम:

स्क्रॉल पर फ़्लोटिंगएशनबटन दिखाएँ और छिपाएँ

समर्थन लाइब्रेरी संस्करण 22.2.1 के साथ शुरू, यह दिखाने के लिए और एक को छिपाने के लिए संभव है FloatingActionButton व्यवहार स्क्रॉल एक का उपयोग करने से FloatingActionButton.Behavior sublclass कि का लाभ लेता है show() और hide() तरीकों।

ध्यान दें कि यह केवल CoordinatorLayout के साथ आंतरिक दृश्यों के संयोजन में काम करता है जो नेस्टेड स्क्रॉलिंग का समर्थन करता है, जैसे कि RecyclerView और NestedScrollView ।

यह ScrollAwareFABBehavior क्लास ScrollAwareFABBehavior पर एंड्रॉइड गाइड से आता है _{^{(सीसी-विकी}} विडियो के _{^{साथ शुरू होता है)}}

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

FloatingActionButton लेआउट xml में, app:layout_behavior निर्दिष्ट करें app:layout_behavior के पूर्ण-योग्य-वर्ग-नाम के साथ ScrollAwareFABBehavior :

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

इस लेआउट के उदाहरण के लिए:

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

यहाँ परिणाम है:

फ्लोटिंगएशनबटन का व्यवहार सेट करना

आप XML में FAB का व्यवहार सेट कर सकते हैं।

उदाहरण के लिए:

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

या आप प्रोग्राम का उपयोग करके सेट कर सकते हैं:

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