Material Design

一、核心思想

Material Design的核心思想，是将物理世界的体验带入屏幕的方寸之间。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

二、空间

除了X和Y属性之外，Android中的视图还具有Z属性。z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。

阴影为物体的深度和方向运动提供了重要的视觉线索。它们是唯一的视觉线索，指示出物体表面之间的距离。物体的高度决定了它的影子的外观。

所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。

1、静态海拔

所有的物质元素都有静止的高度。虽然组件在不同的应用程序之间有着一致的静态高度，但它们在不同平台和设备上可能有不同的静态高度。

2、动态的高度补偿

动态海拔偏移量是一个构件相对于静止状态的目标提升。

三、动画

基于物理的运动

Material design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。

只要有可能，您的动画应该应用现实世界的物理，因此它们看起来很自然。例如，他们应该在目标变化时保持动量，并在任何变化期间进行平滑过渡。

水波反馈

所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了Material design动画的功能性。

四、颜色

UI调色板

调色板以一些基础色为基准，通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。基础色的饱和度是500。

主色

主色是应用中出现最频繁的颜色。如果没有使用辅助色的话，也可以用主色来强调元素。使用主色来强调元素，例如按钮和复选框。

辅助色

辅助色用于强调 UI 中的选择部分。辅助色可以是和主色互补的，也可以是和主色类似的，但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比，并作为强调，且应谨慎使用。

五、NavigationView

NavigationView是Design Support库中提供的一个控件，它将左侧滑动菜单页面的实现变得非常简单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu。

接下来我们就学习一下Navigation的用法。

首先在app/build_gradle的dependencies中添加Design Support库和CircleImageView:

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

在Layout中创建nav_header.xml文件，代码如下：

<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_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/nav_icon"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="tonygreendev@gmail.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/mail"
        android:text="Tony Green"
        android:textColor="#FFF"
        android:textSize="14sp"/>
</RelativeLayout>

在menu文件夹中创建一个nav_menu.xml文件，代码如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_profile"
            android:icon="@mipmap/nav_profile"
            android:title="Profile"/>
        <item
            android:id="@+id/nav_card"
            android:icon="@mipmap/nav_card"
            android:title="Card"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@mipmap/nav_mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_message"
            android:icon="@mipmap/nav_message"
            android:title="Message"/>
        <item
            android:id="@+id/nav_video"
            android:icon="@mipmap/nav_video"
            android:title="Video"/>
    </group>
</menu>

修改activity_main.xml中的代码，如下：

<android.support.v4.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">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</android.support.v4.DrawerLayout>

这里定义了NavigationView，并通过app:menu和app:headerLayout将menu和headerLayout设置了进去。

接下来修改MainActivity中的代码：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }
        navigationView.setCheckedItem(R.id.nav_profile);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }
}

这样，NavigationView菜单就实现了。让我们来看看效果吧！

                                      索奥科技中心软件部
                                         董尧涵