Android P：BottomAppBar和MaterialButton

Android P Developer Preview is available for public now. In this tutorial, we’ll be looking at two interesting components: BottomAppBar and MaterialButton that come up with the Support Library v28 and are a part of the updated Material Design.

Android P开发者预览版现已公开发布。 在本教程中，我们将研究支持库v28附带的两个有趣的组件： BottomAppBar和MaterialButton ，它们是更新的Material Design的一部分。

If you haven’t updated your Android Studio and AVD Emulator to Android P please follow the below steps before proceeding further.

如果您尚未将Android Studio和AVD模拟器更新为Android P，请先执行以下步骤，然后再继续操作。

将Android Studio更新到SDK 28 (Updating Android Studio to SDK 28)

Goto Tools | SDK Manager and download the Android P Developer preview(or the stable release whichever is the latest available for you!).

转到工具| SDK Manager，然后下载Android P Developer预览版（或稳定的版本，以最新可用的版本为准！）。

Install the latest build tools (28.0.0 or above) from the SDK-build tools tab in the SDK Manager.
Now to run Android P target code on your emulator goto Tools | AVD Manager and install the latest Android P system image to create the emulator.

从SDK Manager中的“ SDK构建工具”选项卡安装最新的构建工具（28.0.0或更高版本）。
现在在模拟器上运行Android P目标代码。 AVD Manager并安装最新的Android P系统映像以创建模拟器。

Now create a new Android Studio project and set the target SDK version to Android:28(android-p).

现在创建一个新的Android Studio项目，并将目标SDK版本设置为Android：28（android-p）。

Add the following libraries in your app’s build.gradle.

将以下库添加到应用程序的build.gradle 。

implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
implementation 'com.android.support:design:28.0.0-alpha1'
implementation 'com.android.support:support-v4:28.0.0-alpha1'

Your build.gradle should look like this:

您的build.gradle应该如下所示：

Now we are ready to implement BottomAppBar and MaterialButton that come with Android Support v28.
Before we do that let’s see how are they defined.

现在，我们准备实现Android支持v28附带的BottomAppBar和MaterialButton。
在我们这样做之前，让我们看看它们是如何定义的。

Android BottomAppBar (Android BottomAppBar)

BottomAppBar extends the Toolbar and is defined at the bottom of the screen. It comes with a semi-circular cutout that cradles the attached FloatingActionButton.

BottomAppBar扩展了工具栏，并在屏幕底部定义。 它带有一个半圆形的切口，与附加的FloatingActionButton相连。

Something like this:

像这样：

We can set the FloatingActionButton diameter and position in the BottomAppBar.

我们可以在BottomAppBar中设置FloatingActionButton的直径和位置。

BottomAppbar is defined in the XML in the following way:

通过以下方式在XML中定义BottomAppbar：

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAttached="true"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

• app:fabAttached="true" is used to attach the FloatingActionButton. In the FloatingActionButton, you must set the app:layout_anchor to the BottomAppBar id. Besides, you can set the following attributes:
  app:fabAttached="true"用于附加FloatingActionButton。 在FloatingActionButton中，必须将app:layout_anchor设置为BottomAppBar ID。 此外，您可以设置以下属性：
• app:fabAlignmentMode : Set the position of the FloatingActionButton in the BottomAppBar. By default it goes in center.
  app:fabAlignmentMode ：设置FloatingActionButton在BottomAppBar中的位置。 默认情况下，它居中。
• app:fabCradleDiameter : Sets the diameter of the cutout arc.
  app:fabCradleDiameter ：设置切口弧的直径。
• app:fabCradleVerticalOffset : Sets the vertical distance of the FloatingActionButton from the arc cut off.
  app:fabCradleVerticalOffset ：设置FloatingActionButton与圆弧切除的垂直距离。
• app:menu is used to set menu resource file. You can do it programmatically also.
  app:menu用于设置菜单资源文件。 您也可以通过编程方式进行。

bottomAppbar.replaceMenu(). Otherwise, the BottomAppbar won’t be displayed. bottomAppbar.replaceMenu()在BottomAppBar上设置菜单。 否则，将不会显示BottomAppbar。

Position FAB in the middle of the BottomAppBar without showing the arc.

将FAB放置在BottomAppBar的中间，而不显示弧线。

<android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:fabAttached="true"
        app:backgroundTint="@color/colorPrimary"
        app:fabCradleDiameter="8dp"
        app:fabCradleVerticalOffset="4dp"/>

Android MaterialButton (Android MaterialButton)

MaterialButton is the new Material Design theme on a Button. It extends AppCompatButton. It provides the Material Theme directly without the need to add a style/theme.

MaterialButton是Button上的新Material Design主题。 它扩展了AppCompatButton 。 它直接提供了材质主题，而无需添加样式/主题。

To define a MaterialButton we do:

要定义MaterialButton，我们要做：

<android.support.design.button.MaterialButton
            android:id="@+id/materialButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="18dp"
            android:layout_gravity="center"
            android:textColor="#fff"
            android:text="Material Button"
            app:backgroundTint="@color/colorPrimary"/>

By default the background color is the same as the colorAccent.

默认情况下，背景色与colorAccent相同。

app:backgroundTint is used to set a new color.

app:backgroundTint用于设置新颜色。

app:icon is used to set an icon drawable besides the Button text.

app:icon用于设置除Button文本之外的可绘制图标。

• app:iconTint is used to set the tint color of the icon.
  app:iconTint用于设置图标的颜色。
• app:iconPadding sets the padding.
  app:iconPadding设置填充。

• app:rippleColor : is used to set the ripple color when the button is clicked.

  app:rippleColor ：用于在单击按钮时设置波纹颜色。

• app:strokeColor : is used to set the border color on the Button.
  app:strokeColor ：用于设置按钮上的边框颜色。
• app:strokeWidth : is used to set the width of the border.
  app:strokeWidth ：用于设置边框的宽度。
• app:cornerRadius is used to set the radius on the corners.
  app:cornerRadius用于设置拐角处的半径。

Now let’s build our application where we’ll use both BottomAppBar and MaterialButton together.

现在，让我们构建我们的应用程序，在该应用程序中，我们将同时使用BottomAppBar和MaterialButton。

Android BottomAppBar MaterialButton示例项目结构 (Android BottomAppBar MaterialButton Example Project Structure)

Android BottomAppBar MaterialButton代码 (Android BottomAppBar MaterialButton Code)

The code for the activity_main.xml layout file is given below:

下面给出了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"
    tools:context=".MainActivity">

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:fabAttached="true"
        app:backgroundTint="@color/colorPrimary"
        app:fabCradleVerticalOffset="12dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@+id/bottom_appbar"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.button.MaterialButton
            android:id="@+id/materialButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="18dp"
            android:gravity="center_vertical"
            android:layout_gravity="center"
            app:icon="@android:drawable/ic_input_get"
            app:iconTint="@android:color/holo_red_dark"
            app:rippleColor="@color/colorAccent"
            app:strokeColor="@android:color/holo_green_dark"
            app:strokeWidth="3dp"
            android:textColor="#fff"
            android:text="Toggle FAB Position"
            app:backgroundTint="@color/colorPrimary"/>

    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

Now create a menu resource directory if you haven’t already. Right-click res | new | directory. Name it as menu. Create new menu file in the directory.

如果尚未创建菜单资源目录，请立即创建。 右键单击res | 新 目录。 将其命名为menu 。 在目录中创建新的菜单文件。

The code for the my_menu.xml file is given below:

下面给出了my_menu.xml文件的代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/next_btn"
        android:checked="true"
        android:icon="@android:drawable/ic_input_add"
        android:title="Item"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Settings" />

</menu>

The code for MainActivity.java class is given below:

MainActivity.java类的代码如下：

package com.journaldev.android28;

import android.os.Bundle;
import android.support.design.bottomappbar.BottomAppBar;
import android.support.design.button.MaterialButton;
import android.support.v7.app.AppCompatActivity;
import android.view.View;


public class MainActivity extends AppCompatActivity {

    BottomAppBar bottomAppBar;
    MaterialButton materialButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomAppBar = findViewById(R.id.bottom_appbar);
        materialButton = findViewById(R.id.materialButton);

        bottomAppBar.replaceMenu(R.menu.my_menu);
        materialButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (bottomAppBar.getFabAlignmentMode() == BottomAppBar.FAB_ALIGNMENT_MODE_CENTER)
                    bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
                else {
                    bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER);
                }
            }
        });
    }

}

bottomAppBar.replaceMenu() is used to set the menu items in the BottomAppBar.
On clicking the MaterialButton, we toggle the FAB position with respect to the BottomAppBar.

bottomAppBar.replaceMenu()用于设置BottomAppBar中的菜单项。
单击MaterialButton时，我们相对于BottomAppBar切换FAB位置。

The output of the above application in action is given below.

下面给出了上面应用程序的输出。

This brings an end to this tutorial. You can download the Android BottomAppBar Material Button Project.

本教程到此结束。 您可以下载Android BottomAppBar材质按钮项目 。

AndroidBottomAppBarMaterialButton Project AndroidBottomAppBarMaterialButton项目

GitHub Repository. GitHub存储库中检出Android Studio项目。

翻译自: https://www.journaldev.com/21043/android-p-bottomappbar-materialbutton