Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 Итак, в данном уроке я расскажу о том, как делать простейшую анимацию летающей кнопки Floating Action Button.

2 Первым делом создайте новое приложение вAndroid Studioс пустым активити (Empty Activity).

3 Для работы сFloating Action Buttonв Android Studio необходимо подключить библиотеку Design. Чтобы это сделать нужно перейти вGradle Scripts -> build.gradle (Modul: app). Вbuild.gradle (Modul: app)в разделdependenciesдобавьте такую строчку:

4 compile ‘com.android.support:design:25.3.1’После чего нужно синхронизировать проект, нажав на ссылкуSync Nowв верхнем правом углу. Теперь можно приступать к созданию летающей кнопки. Первым делом, перейдите к представлениюMainActivity, т.е. к файлуactivity_main.xml, который расположен вapp -> res -> layuot, и отредактируйте его содержимое следующим образом:

5 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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="ru.lessons.fabanimation.MainActivity"> <android.support.design.widget.FloatingActionButton android:id="@+id/fabHideFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="20dp" app:backgroundTint="#9ACD32" app:borderWidth="5dp" app:elevation="10dp" app:fabSize="normal" app:srcCompat="@android:drawable/ic_menu_camera"/> <Button android:id="@+id/btnShowFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|left" android:layout_margin="20dp" android:text="SHOW FAB"/> </android.support.design.widget.CoordinatorLayout>В примере мы будем использовать две кнопки. Первая кнопка -Floating Action Button, при нажатии на которую она будет плавно уменьшаться до тех пор, пока не исчезнет совсем. Вторая кнопка -Button, при нажатии на которую будет восстанавливаться видимостьFloating Action Button. Чтобы кнопки заняли свои позиции внутри контейнера в соответствии со своими настройками, в качестве контейнера вactivity_main.xmlнеобходимо использоватьCoordinatorLayout.

6 Далее нам нужно будет создать каталог для хранения файлов с настройками анимации. Для этого перейдём к каталогу ресурсов проектаapp -> resи, нажав на нём правой кнопкой мыши, в появившемся меню выберемNew -> Android resource directory. В открывшемся окне зададим наименование нового каталога. Назовём егоanim. После создания каталогаanimсоздадим в нём файл, отвечающий за скрытие кнопкиFloating Action Button. Для этого нажмите правой кнопкой мыши на каталогеanimи в появившемся меню выберитеNew -> Animation resource file. Назовите егоfab_hide.

7 Отредактируйте его содержимое следующим образом:

8 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:duration="1000" android:shareInterpolator="true"> <scale android:fromXScale="1.0" android:fromYScale="1.0" android:toXScale="0.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" /> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" /> </set>Теперь аналогичным образом нужно создать ещё один файл, который будет отвечать за появление кнопкиFloating Action Button. Назовите этот файлfab_showи отредактируйте его содержимое так:

9 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:duration="1000" android:shareInterpolator="true"> <scale android:fromXScale="0.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" /> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>fillAfter="true"означает, что преобразование будет выполнятся после завершения анимации.duration="1000″устанавливает время выполнения анимации в миллисекундах. В данной ситуации установлено 1000 миллисекунд, или 1 секунда.shareInterpolator="true"устанавливает возможность использования интерполятора всеми дочерними элементами. Элементscaleотвечает за изменение размера кнопки при анимации, где параметры fromXScaleиfromYScale- это начальные значения масштабов кнопки по осям X и Y на момент начала анимации, а параметрыtoXScaleиtoYScale- это конечные значения масштабов на момент завершения анимации. Значения этих параметров имеют типfloatи варьируются от 0 до 1. Значение 1.0 соответствует натуральному масштабу. ПараметрыpivotXиpivotYуказывают на координату внутри кнопки, относительно которой происходит изменение размера кнопки. Т.е. эта координата становиться центром, относительно которого кнопка уменьшается при её скрытии, или увеличивается при её появлении. Элементalphaотвечает за прозрачность кнопки, где значение 1.0 соответствует абсолютной непрозрачности, а 0.0 - абсолютной прозрачности. ПараметрfromAlpha- это начальное значение прозрачности, аtoAlpha- конечное значение прозрачности.

10 Теперь перейдите кMainActivityи отредактируйте его код следующим образом:

11 package ru.lessons.fabanimation; import android.support.design.widget.FloatingActionButton; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; public class MainActivity extends AppCompatActivity { private FloatingActionButton fabHideFab; private Button btnShowFab; private Animation animShowFab, animHideFab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //анимация animShowFab = AnimationUtils.loadAnimation(this, R.anim.fab_show); animHideFab = AnimationUtils.loadAnimation(this, R.anim.fab_hide); //летающая кнопка Floating Action Button fabHideFab = (FloatingActionButton) findViewById(R.id.fabHideFab); //вспомогательная кнопка btnShowFab = (Button) findViewById(R.id.btnShowFab); fabHideFab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //анимация скрытия Floating Action Button fabHideFab.startAnimation(animHideFab); } }); btnShowFab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //анимация появления Floating Action Button fabHideFab.startAnimation(animShowFab); } }); } }Подробнее смотрите в<a>видеоролике</a>.