来自Google的新底部布局

时间:2018-05-03 01:03:18

标签: android layout material-design androiddesignsupport

首先,我很抱歉提出这样的问题,但是在我下载了最新的Google IO应用后,

我只是喜欢底部布局,如下所示 截图

enter image description here

作为Android开发的新手,我不知道从哪里开始,任何想法如何用XML中的圆形星实现这个底部布局?有谁知道这个设计叫什么?

3 个答案:

答案 0 :(得分:4)

使用新的Support Library 28.0.0-alpha1 release,设计库现在包含BottomAppBar

您可以使用

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

enter image description here

您可以使用以下属性自定义组件:

  • app:fabAlignmentMode:声明已附加到底部应用栏的FAB的位置。这可以是endcenter

  • app:fabCradleVerticalOffset:声明用于附加fab的垂直偏移量。默认情况下,这是0dp。

  • app:backgroundTint:用于将色调应用于视图的背景。

此外,您可以使用底部应用栏的ID在您要附加的FAB组件上使用app:layout_anchor附加工厂。

目前要使用它,您必须使用Android Studio 3.1或更高版本,并且:

android {
    compileSdkVersion 'android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.android.support:design:28.0.0-alpha1'
}

您也可以使用新的Material Components for Android 在这种情况下,您可以在布局文件中使用:

 <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      app:navigationIcon="@drawable/ic_menu_24"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

目前您必须使用Android Studio 3.2和:

android {
    compileSdkVersion 'android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.google.android.material:material:1.0.0-alpha1'
}

官方文件是here

答案 1 :(得分:2)

我相信它是BottomAppBar,进入支持库28.0.0。您可以在此处阅读更多内容:https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1

答案 2 :(得分:0)

应用栏:底部

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Bottom app bars can contain actions that apply to the context of the current screen. They include a navigation menu control on the far left and a floating action button (when one is present). If included in a bottom app bar, an overflow menu control is placed at the end of other actions.

Informaçõesenter link description here

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

<android.support.design.bottomappbar.BottomAppBar
    android:id="@+id/bottom_appbar"
    android:elevation="4dp"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    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/io15_grey"/>