课程设计要求
想法
目前的打算是做一个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>