学习Material Design总结

学习Material Design总结

一、Toolbar
比起普通的Actionbar，Toolbar更加灵活，也有很多功能，比如在标题栏显示当图片的按钮，自带返回按钮。
二、滑动菜单

要实现这种效果就要利用DrawerLayout布局，该布局中允许放入两个直接控件，第一个是主屏幕中显示的内容，第二个是滑动菜单中显示的内容。

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawer_layout">

  <androidx.coordinatorlayout.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/Theme.AppCompat.Light"
        android:id="@+id/toolbar"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_gravity="bottom|end"
      android:layout_margin="16dp"
      android:src="@drawable/nav_circle" />
  </androidx.coordinatorlayout.widget.CoordinatorLayout>

   <com.google.android.material.navigation.NavigationView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/nav_view"
       android:layout_gravity="start"
       app:menu="@menu/nav_menu"
       app:headerLayout="@layout/nav_header" />

</androidx.drawerlayout.widget.DrawerLayout>

我们来解析一下上面那段布局代码，首先引入DrawerLayout布局，放入第一个控件CoordinatorLayout，该控件和FrameLayout很像，只是CoordinatorLayout可以监控子控件，并做出相应调整。toolbar就是标题栏。FloatingActionButton是一个悬浮按钮，后面我们还会介绍。接下来是滑动菜单的主要内容NavigationView，注意NavigationView这部分需要设置layout_gravity属性，该属性的值可以为left、right、start、end。left表示滑动菜单在左边，right表示滑动菜单在右边，start表示会根据系统语言进行判断，如果系统语言是从左往右，比如英语、汉语，滑动菜单就在左边。否则相反。NavigationView由两个部分组成，示例图片的上半部分是headerLayout，用来显示头像，电话，邮箱，该部分引入了nav_header布局文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/icon"
        android:layout_centerInParent="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:textSize="14sp"
        android:text="Tony"
        android:textColor="#FFF"
        android:layout_alignParentBottom="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/username"
        android:text="tony@gmail.com"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:id="@+id/mail"/>



</RelativeLayout>

CircleImageView需要引入依赖。它的用法和ImageView一样，只是可以显示圆形图片。
示例图片的下半部分是一个menu，menu的布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single" >
    <item
        android:id="@+id/nav_friends"
        android:icon="@drawable/nav_friends"
        android:title="Friends"/>
    <item
        android:id="@+id/nav_circle"
        android:icon="@drawable/nav_circle"
        android:title="Circle"/>
    <item
        android:id="@+id/nav_play"
        android:icon="@drawable/nav_play"
        android:title="Play"/>
</group>
</menu>

还可以给menu部分设置点击事件

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                mDrawerLayout.closeDrawers(); //将滑动菜单关闭
                return true;
            }
            
        });

三、CardView
CardView也是一个FrameLayout，只是额外提供了圆角和阴影效果，看上去会有立体的感觉。CardView的用法非常简单，只要在一个控件外部套上CardView即可。
四、下拉刷新
SwipeRefreshLayout就是用来实现下拉刷新的核心类，我们只要把想要实现下拉刷新功能的控件放入SwipeRefreshLayout中即可。然后在代码中给SwipeRefreshLayout设置监听器，并实现回调函数即可。
五、可折叠式标题栏
用到了CollapsingToolbarLayout控件，将toolbar和需要显示图片的ImageView放入CollapsingToolbarLayout控件中即可。还需要用到NestedScrollView控件，具体用法请百度。

需要添加的依赖

implementation 'com.android.support:design:29.1.1'
    implementation 'de.hdodenhof:circleimageview:2.1.0'