Учебное пособие по примеру плавающей кнопки действия Android
Сегодня мы узнаем о плавающей кнопке действия Android. Мы обсудим FloatingActionButton
— новый компонент, включенный в Руководство по дизайну материалов и Toast.
Плавающая кнопка действия Android
Плавающая кнопка действия Android используется для выделения наиболее важных функций на экране. Это классный и стильный способ привлечь к себе внимание пользователя.
Обзор плавающей кнопки действия Android
Чтобы использовать виджеты Material Design в нашем проекте, нам нужно скомпилировать следующую зависимость в нашем файле build.gradle
, как показано ниже.
compile 'com.android.support:design:23.1.1'
Виджет FloatingActionButton определяется в макете xml следующим образом:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_dialog_email"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
Несколько замечаний, сделанных из приведенного выше макета xml:
- FloatingActionButton расширяет класс ImageView. Это видно из определенного атрибута
android:src
. - В приведенном выше макете XML атрибут высоты используется для отбрасывания тени на кнопку, а pressTranslationZ заставляет тень увеличиваться при нажатии.
FloatingActionButton
помещается в CoordinatorLayout. CoordinatorLayout помогает облегчить взаимодействие между содержащимися в нем представлениями, что будет полезно позже для описания того, как анимировать кнопку в зависимости от изменений прокрутки. SnackBar — это более продвинутый виджет по сравнению с Toast. SnackBar вызывается следующим образом:
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
Мы подробно обсудили SnackBar в другом уроке. Важное примечание. Если вы хорошо следовали этим руководствам по Android, вы, должно быть, заметили, что с новым обновлением инструментов сборки до 23.1.1 структура проекта нового пустого проекта изменилась, и вышеупомянутые виджеты присутствуют по умолчанию в новый проект Android Studio. Итак, вместо того, чтобы внедрять вышеупомянутые виджеты, давайте совершим краткий обзор новой структуры проекта.
Пример плавающей кнопки действия Android Структура проекта
Пример плавающей кнопки действия Android
Новый activity_main.xml
приведен ниже:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.journaldev.floatingactionbutton.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<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="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Панель инструментов добавляется по умолчанию в качестве замены ActionBar. Он добавлен внутри AppBarLayout, который является прямым дочерним элементом CoordinatorLayout. AppBarLayout используется для достижения различных режимов прокрутки, таких как свертывание, гибкое пространство и быстрый возврат. MainActivity.java
определяется, как показано ниже:
package com.journaldev.floatingactionbutton;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}