折叠标题栏与侧滑菜单综合使用

Material Design是由谷歌在2014年推出的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。接下来将从CollapsingToolbarLayout与DrawerLayout两个方面记录一下使用方法

先上效果图：

---

1.滑动菜单 DrawerLayout、NavigationView使用

2.可折叠标题栏 CollapsingToolbarLayout使用

---

先来说说DrawerLayout，此布局中一般添加两个子控件，其中一个用于显示主界面，另一个显示滑动菜单的内容，一般都使用NavigationView设计滑动菜单样式。

效果：

导入所需要的包

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
    implementation 'com.android.support:cardview-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'de.hdodenhof:circleimageview:2.2.0'
}

1. 先修改布局文件，添加DrawerLayout，并在其中添加两个子控件

<android.support.v4.widget.DrawerLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/draw"
    tools:context=".MainActivity"
    android:gravity="center">

    <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    </android.support.design.widget.CoordinatorLayout>

       <android.support.design.widget.NavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/navigation"
            android:layout_gravity="start"
            app:headerLayout="@layout/header"
            app:menu="@menu/navigation">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

android:layout_gravity=”start”，这个属性必须有，用于指定滑动菜单隐藏
在屏幕左边还是右边。
app:headerLayout=”@layout/header”，此属性指定了滑动菜单的头布局；
app:menu=”@menu/navigation”，指定了菜单选项。

2.在res/layout中新建header.xml布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@mipmap/back_navi">
<!--实现图片圆形化功能-->
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/touxiang"
        android:layout_centerInParent="true"
        android:src="@mipmap/touxiang"/>
    <TextView
        android:id="@+id/nickname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/touxiang"
        android:textSize="15sp"
        android:textColor="@android:color/white"
        android:text="昵称"
        android:layout_marginLeft="10dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/nickname"
        android:layout_margin="10dp"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:text="1234567889@qq.com"/>
</RelativeLayout>

新建menu/navigation菜单文件

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/friends"
        android:icon="@drawable/ic_people"
        android:title="我的好友">
    </item>
    <item
        android:id="@+id/mail"
        android:icon="@drawable/ic_mail"
        android:title="邮箱">
    </item>
    <item
        android:id="@+id/favour"
        android:icon="@drawable/ic_favorite_border_black_24dp"
        android:title="我的收藏">
    </item>
    <item
        android:id="@+id/task"
        android:icon="@drawable/ic_task"
        android:title="我的备注">
    </item>
</menu>

---

接下来为我们的界面添加可折叠标题栏

<!-- 增强版的FrameLayout,，可监听所有子空间的事件，避免滑动过程中组件之间的遮挡-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <!--作为基础布局，必须作为CoordinatorLayout的子布局，避免折叠后Toolbar被内容遮挡-->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true">

        <!--作为Toolbar之上的布局，不能单独存在，只能作为AppbarLayout的子布局。
        app:layout_scrollFlags指定为scroll表示标题栏随着内容一起滚动；
        exitUntilCollapsed表示当完全折叠后保留在界面顶部，不移出界面-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:scaleType="centerCrop"
                android:contentDescription="@string/app_name"
                android:src="@mipmap/back"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"
                android:title="@string/app_name">
            </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>