课程设计要求

想法

目前的打算是做一个MD风格的记账软件，因为不得不说，MD的设计风格还是十分漂亮的，而且Google也是十分看中这种这种设计模式，还专门举办了一个“最美MD应用”的比赛。

功能实现———侧滑栏，悬浮按钮的UI

这里我直接在Android Stdio里新建的Navigation Drawer Activity，都是我需要的控件就不用再写一遍了。新建之后再根据我的需要进行修改

首先侧滑栏的项目要改成我想要的功能，像下面这样

修改已存在的activity_main_drawer.xml

  <?xml version="1.0" encoding="utf-8"?>
  <menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  tools:showIn="navigation_view">
  <group android:checkableBehavior="single">      <!--组内只有一个按钮可以被点击-->
      <item
          android:id="@+id/nav_home"
          android:icon="@drawable/ic_home"
          android:title="@string/home" />
      <item
          android:id="@+id/nav_statistics"
          android:icon="@drawable/ic_view_statistics_black"
          android:title="@string/statistics" />
      <item
          android:id="@+id/nav_night"
          android:icon="@drawable/ic_night"
          android:title="@string/night"
          />
      <item
          android:id="@+id/nav_settings"
          android:icon="@drawable/ic_settings"
          android:title="@string/app_settings"/>
  </group>
  <item
              android:id="@+id/nav_about"
              android:icon="@drawable/ic_about_fill"
              android:title="@string/about"/>
  <item
              android:id="@+id/nav_exit"
              android:icon="@drawable/ic_exit_to_app"
              android:title="@string/exit_app"/>
  </menu>

值得注意，checkableBehavior这个属性，它说明了定义的group中只有一个item可以同时被点击，所以根据我的需要，主页 统计 设置这些点击会打开一个界面的按钮把它们放到一个group中
然后修改nav_header_main.xml：

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="@dimen/nav_header_height"
  android:background="@drawable/side_nav_bar"
  android:gravity="bottom"
  android:orientation="vertical"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:theme="@style/ThemeOverlay.AppCompat.Dark">
  <ImageView
      android:id="@+id/head_img"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="@string/nav_header_desc"
      android:paddingTop="@dimen/nav_header_vertical_spacing"
      app:srcCompat="@mipmap/ic_launcher_round" />
  <TextView
      android:id="@+id/user_name"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingTop="@dimen/nav_header_vertical_spacing"
      android:text="@string/nav_header_title"
      android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
  <TextView
      android:id="@+id/user_email"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/nav_header_subtitle" />
  </LinearLayout>

这样侧滑栏选项和头部的布局就搞定了

悬浮按钮

这里我用到了github上面一个开源库

  <?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=".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" />

  <com.getbase.floatingactionbutton.FloatingActionsMenu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:fab="http://schemas.android.com/apk/res-auto"
      android:id="@+id/fab_menu"
      android:layout_width="wrap_content"
      android:layout_height="296dp"
      android:layout_gravity="bottom|end"
      android:layout_marginEnd="16dp"
      android:layout_marginRight="16dp"
      android:layout_marginBottom="16dp"
      fab:fab_addButtonColorNormal="@color/colorAccent"
      fab:fab_addButtonColorPressed="@color/colorPrimary"

      fab:fab_addButtonPlusIconColor="@color/white"
      fab:fab_labelStyle="@style/floatingActionsMenu_fab_style">

  <com.getbase.floatingactionbutton.FloatingActionButton
      fab:fab_icon="@drawable/ic_create"
      android:id="@+id/fab_action_create_new"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      fab:fab_colorNormal="@color/white"
      fab:fab_size="mini"
      fab:fab_title="新建记录" />
  <com.getbase.floatingactionbutton.FloatingActionButton
      fab:fab_icon="@drawable/ic_switch"
      android:id="@+id/fab_action_switch"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      fab:fab_colorNormal="@color/white"
      fab:fab_size="mini"
      fab:fab_title="切换浏览方式" />
  </com.getbase.floatingactionbutton.FloatingActionsMenu>
  </android.support.design.widget.CoordinatorLayout>

main_activity.xml

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:openDrawer="start">
  <include
      layout="@layout/float_bar"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
  <android.support.design.widget.NavigationView
      android:id="@+id/nav_view"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      android:fitsSystemWindows="true"
      app:headerLayout="@layout/nav_header_main"
      app:menu="@menu/activity_main_drawer" />
  </android.support.v4.widget.DrawerLayout>