Пример FloatingActionButton с библиотекой поддержки



недавно я прочитал эти сообщения:



Библиотека Поддержки Дизайна Android



библиотека поддержки Android, редакция 22.2.0



FloatingActionButton



но, ни один из них не дает мне подробный пример о создании нового FloatingActionButton. Так трудно понять, я задаю этот вопрос.



может кто-нибудь дать мне пример о нем?



любая помощь очень ценится. Спасибо продвижение.



EDIT



Я только что нашел некоторые проблемы на FloatingActionButton (FAB), и я хочу улучшить другой ответ. Смотрите мой ответ ниже.

533   3  

3 ответов:

так в вашей добавить это:

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

AndroidX Примечание: Google представляет новый библиотеки расширений AndroidX для замены старых библиотек. Использовать AndroidX, сначала убедитесь, что вы обновили свой gradle.properties file редактировал build.gradle установить compileSdkVersion до 28 (или выше), и используйте следующую строку вместо предыдущей compile один.

implementation 'com.google.android.material:material:1.0.0-rc01'

далее в 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>

вы можете увидеть больше вариантов в docs (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 на самом деле очень разные на Lollipop и предварительно леденец. Вы действительно можете увидеть это в визуальном AS редактор макетов когда вы переключаетесь между API-интерфейсами-он внезапно "раздувается" , когда вы переключаетесь на предварительно леденец. Причина дополнительного размера, по-видимому, заключается в том, что тень расширяет размер вида во всех направлениях. Так что вы должны учитывайте это, когда вы корректируете поля 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, деление на два и использование этого в качестве смещения поля. Но 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"/>
    

помните, что вы можете автоматически иметь кнопку прыгать из пути, когда закусочная приходит, завернув его в CoordinatorLayout.

Подробнее:

я только что нашел некоторые проблемы на FAB, и я хочу улучшить другой ответ.


setRippleColor проблема

Итак, проблема возникнет, как только вы установите цвет пульсации (FAB color on pressed) программно через 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 руководство по дизайну

как вы можете видеть на моем коде FAB xml выше, я установил:

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...
  • устанавливая эти атрибуты, вам не нужно устанавливать layout_marginTop и layout_marginRight снова (только по предварительной Lollipop). Android автоматически разместит его справа мозолистая сторона экрана, которая такая же, как и обычная FAB в Android Lollipop.

        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
    

или, вы можете использовать это в CoordinatorLayout:

        android:layout_gravity="end|bottom"

FAB rules

FloatingActionButton extends 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" добавляется в качестве обходного пути для проблем с высотой.

Comments

    Ничего не найдено.