it-swarm.asia

مثال FloatingActionButton مع مكتبة الدعم

في الآونة الأخيرة ، قرأت هذه الوظائف:

مكتبة دعم تصميم Android

مكتبة دعم Android ، المراجعة 22.2.0

FloatingActionButton

ولكن لا أحد منهم يقدم لي مثالًا تفصيليًا حول إنشاء FloatingActionButton جديد. من الصعب أن نفهم ، أنا أسأل هذا السؤال.

يمكن لأي شخص أن تعطيني مثالا عن ذلك؟

أي مساعدة موضع تقدير كبير. شكرا لك مقدما.

EDIT

لقد وجدت بعض المشكلات في FloatingActionButton (FAB) ، وأريد تحسين إجابة أخرى. انظر جوابي أدناه.

123
Anggrayudi H

لذلك في ملف build.gradle الخاص بك ، أضف هذا:

compile 'com.Android.support:design:27.1.1'

AndroidX ملاحظة: تقدم Google مكتبات امتداد جديدة AndroidX لتحل محل مكتبات الدعم الأقدم. لاستخدام AndroidX ، تأكد أولاً لقد قمت بتحديث ملف gradle.properties الخاص بك ، عدلت build.gradle لتعيين compileSdkVersion على 28 (أو أعلى) ، واستخدم السطر التالي بدلاً من compile السابق.

implementation 'com.google.Android.material:material:1.0.0'

بعد ذلك ، في themes.xml أو styles.xml أو أي شيء آخر ، تأكد من تعيين هذا - إنه لون لهجة التطبيق الخاص بك - ولون FAB الخاص بك إلا إذا تجاوزته (انظر أدناه):

        <item name="colorAccent">@color/floating_action_button_color</item>

في تنسيق XML:

<RelativeLayout
 ...
 xmlns:app="http://schemas.Android.com/apk/res-auto">

       <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/myFAB"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

يمكنك رؤية المزيد من الخيارات في المستندات (setRippleColor ، إلخ) ، ولكن أحد الملاحظات هو:

    app:fabSize="mini"

واحد مثير للاهتمام آخر - لتغيير لون خلفية FAB واحد فقط ، إضافة:

    app:backgroundTint="#FF0000"

(على سبيل المثال لتغييره إلى اللون الأحمر) إلى XML أعلاه.

على أي حال ، في الكود ، بعد تضخيم عرض النشاط/الشظية ....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

الملاحظات:

  • إذا كان لديك أحد تلك الأزرار الموجودة على "التماس" التي تقسم عرضين (باستخدام RelativeLayout ، على سبيل المثال) مع ، على سبيل المثال ، هامش تخطيط سفلي سلبي لتداخل الحدود ، ستلاحظ مشكلة: حجم FAB هو في الواقع جدا مختلفة على المصاصة مقابل ما قبل المصاصة. يمكنك بالفعل رؤية ذلك في محرر التخطيط المرئي في AS عندما تقلب بين واجهات برمجة التطبيقات - فجأة "ينفخ" عند التبديل إلى ما قبل المصاصة. يبدو أن السبب وراء الحجم الزائد هو أن الظل يوسع حجم المشاهدة في كل اتجاه. لذلك يجب عليك حساب ذلك عند ضبط هوامش FAB إذا كانت قريبة من أشياء أخرى.
  • إليك طريقة لإزالة الحشو أو تغييره إذا كان هناك الكثير:

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Lollipop) {
        RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
        p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        myFab.setLayoutParams(p);
    }
    
  • أيضا ، كنت ذاهبا لوضع FAB برمجيا على "التماس" بين منطقتين في RelativeLayout عن طريق الاستيلاء على ارتفاع FAB ، قسمة على اثنين ، واستخدام ذلك بمثابة تعويض الهامش. ولكن myFab.getHeight () عاد صفرًا ، حتى بعد تضخيم العرض ، على ما يبدو. بدلاً من ذلك ، كنت أستخدم ViewTreeObserver للحصول على الارتفاع فقط بعد وضعه ثم ضبط الموضع. انظر هذه النصيحة هنا . يبدو مثل هذا:

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
        if (viewTreeObserver.isAlive()) {
            viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                    // not sure the above is equivalent, but that's beside the point for this example...
                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                    params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                    closeButton.setLayoutParams(params);
                }
            });
        }
    

    لست متأكداً مما إذا كانت هذه هي الطريقة الصحيحة للقيام بذلك ، ولكن يبدو أنها تعمل.

  • يبدو أنه يمكنك جعل مساحة ظل الزر أصغر من خلال تقليل الارتفاع.
  • إذا كنت تريد FAB على "التماس" ، يمكنك استخدام layout_anchor و layout_anchorGravity هنا مثال:

    <Android.support.design.widget.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        Android:src="@drawable/ic_discuss"
        Android:layout_margin="@dimen/fab_margin"
        Android:clickable="true"/>
    

تذكر أنه يمكنك تلقائيًا الانتقال من الزر إلى الخلف عند ظهور Snackbar عن طريق لفه في CoordinatorLayout .

أكثر من:

265
fattire

لقد وجدت بعض المشكلات في FAB وأريد تحسين إجابة أخرى.


قضية setRippleColor

لذلك ، ستظهر المشكلة بمجرد تعيين لون تموج (لون FAB مضغوط) برمجيًا عبر setRippleColor. ولكن ، لا يزال لدينا طريقة بديلة لتعيينها ، أي عن طريق الاتصال بـ:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

يحتاج مشروعك إلى هذا الهيكل:

/res/color/fab_ripple_color.xml

enter image description here

والرمز من fab_ripple_color.xml هو:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:color="@color/fab_color_pressed" />
    <item Android:state_focused="true" Android:color="@color/fab_color_pressed" />
    <item Android:color="@color/fab_color_normal"/>
</selector>

أخيرًا ، بدّل FAB قليلاً:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/ic_action_add"
    Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@Android:color/transparent"/> <!-- set to transparent color -->

بالنسبة لمستوى API 21 وما فوق ، قم بتعيين الهامش الأيمن والسفلي على 24dp:

...
Android:layout_marginRight="24dp"
Android:layout_marginBottom="24dp" />

أدلة تصميم FloatingActionButton

كما ترون في كود XML FAB الخاص بي أعلاه ، قمت بتعيين:

        ...
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...
  • من خلال تعيين هذه السمات ، لن تحتاج إلى ضبط layout_marginTop و layout_marginRight مرة أخرى (فقط على Pre-Lollipop). سيقوم Android بوضعه تلقائيًا على الجانب الأيمن من الشاشة ، وهو نفس FAB العادي في Android Lollipop.

        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
    

أو ، يمكنك استخدام هذا في CoordinatorLayout:

        Android:layout_gravity="end|bottom"
  • يجب أن يكون لديك 6dp elevation و 12 dp pressedTranslationZ ، وفقًا لـ هذا الدليل من Google.

 FAB rules

47
Anggrayudi H

FloatingActionButton يمتد ImageView. لذلك ، الأمر بسيط مثل تقديم ImageView في تخطيطك. فيما يلي نموذج XML.

<Android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/somedrawable"
    Android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

تتم إضافة app:borderWidth="0dp" كحل للمشاكل الارتفاع.

12
siriscac

ل AndroidX استخدام مثل

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />
2
Dan Alboteanu