Пример FloatingActionButton с библиотекой поддержки
недавно я прочитал эти сообщения:
Библиотека Поддержки Дизайна Android
библиотека поддержки Android, редакция 22.2.0
но, ни один из них не дает мне подробный пример о создании нового FloatingActionButton. Так трудно понять, я задаю этот вопрос.
может кто-нибудь дать мне пример о нем?
любая помощь очень ценится. Спасибо продвижение.
EDIT
Я только что нашел некоторые проблемы на FloatingActionButton (FAB), и я хочу улучшить другой ответ. Смотрите мой ответ ниже.
3 ответов:
так в вашей добавить это:
compile 'com.android.support:design:27.1.1'AndroidX Примечание: Google представляет новый библиотеки расширений AndroidX для замены старых библиотек. Использовать AndroidX, сначала убедитесь, что вы обновили свой
gradle.propertiesfile редактировал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.
Подробнее:
- страница библиотеки поддержки дизайна Google
- FloatingActionButton docs
- "материал сейчас" говорить от Google I / O 2015 - библиотека дизайна поддержки введенная на 17m22s
- образец библиотеки поддержки дизайна / витрина
я только что нашел некоторые проблемы на 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
и код
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"
- вы должны иметь 6dp
elevationи 12dppressedTranslationZ, по данным данное руководство из Google.
FloatingActionButtonextendsImageView. Итак, это просто, как введение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