Material Design

目錄

• 一、核心思想
• 二、空間
• • 1、靜态海拔
  • 2、動态的高度補償
• 三、動畫
• • 基于實體的運動
  • 水波回報
• 四、顔色
• • UI調色闆
  • 主色
  • 輔助色
• 五、NavigationView

一、核心思想

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="[email protected]"
        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菜單就實作了。讓我們來看看效果吧！

                                      索奧科技中心軟體部

                                         董堯涵