文章目錄

前言
一、Material Design概念
二、常用屬性
三、常用控制元件
- 1、toolbar
- 2、DrawerLayout
- 3、NavigationView/BottomNavigationView
- 4、FloatingActionButton
- 5、Snackbar
- 6、CardView
- 7、CoordinatorLayout/AppBarLayout/CollapsingToolbarLayout
- 8、NestedScrollView
四、常用影片
- 1、Fade淡入
- 2、Slider滑動
- 3、Explode分解
- 4、共享元素

前言

本文主要結合一個Demo的演示來對對Material Design中的常用控制元件和常用控制元件做一個介紹，
整理這篇文章之前，我查了Material Design相關的文章，可以說這個題材的文章是真的多，其中也有很多非常優秀的文章，相關鏈接我會在文末給出，可以點擊這里跳到文末，

提示：以下是本篇文章正文內容

一、Material Design概念

是將經典的設計原則和科技、創新相結合而創造的設計語言，
是一個能在不同平臺、不同設備上提供一致的體驗的底層系統，它代表了一種設計規范，

說白了就是一套ui設計，ios有自己的一套ui規范，Android不也得有自己的一套嘛，Material Design可以形象地翻譯成原材料設計，有個特點是加入了z軸的效果，防光照設計，

二、常用屬性

直接看圖（示例）：
在這里插入圖片描述

三、常用控制元件

1、toolbar

代碼如下（示例）：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/tb_at_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_scrollFlags="scroll|enterAlways"
    app:logo="@mipmap/ic_launcher"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:subtitle="副標題"
    app:subtitleTextColor="#fff"
    app:title="標題"
    app:titleTextColor="#fff">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center"
        android:text="View"
        android:textColor="@color/white"/>

</androidx.appcompat.widget.Toolbar>

2、DrawerLayout

代碼如下（示例）：

 //Toolbar關聯側滑選單
 dlAtDrawLayout = findViewById(R.id.dl_at_draw_layout);
 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
         this, dlAtDrawLayout, tbAtToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
 dlAtDrawLayout.addDrawerListener(toggle);
 toggle.syncState();

啟動

dlAtDrawLayout.openDrawer(Gravity.START);

3、NavigationView/BottomNavigationView

代碼如下（示例）：

<!-- 側滑選單-->
<com.google.android.material.navigation.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"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation"/>

//導航欄選單點擊監聽
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.navigation_home:
                mTextMessage.setText(R.string.title_home);
                return true;
            case R.id.navigation_dashboard:
                mTextMessage.setText(R.string.title_dashboard);
                return true;
            case R.id.navigation_notifications:
                mTextMessage.setText(R.string.title_notifications);
                return true;
        }
        return false;
    }
};

在這里插入圖片描述

4、FloatingActionButton

代碼如下（示例）：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_at_action"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/add"
    app:elevation="8dp"/>

5、Snackbar

代碼如下（示例）：

//彈出提示
Snackbar.make(v, "snack action ", 1000)
        //Snackbar點擊回應
        .setAction("Toast", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ToolbarActivity.this, " to do ", Toast.LENGTH_SHORT).show();
            }
        }).show();

在這里插入圖片描述

6、CardView

卡片布局
app:cardBackgroundColor="@color/colorPrimary" 設定cardView背景色
app:cardPreventCornerOverlap=“false” 取消Lollipop以下版本的padding
app:cardUseCompatPadding=“true” 為 Lollipop 及其以上版本增加一個陰影padding內邊距
app:cardCornerRadius=“8dp” 設定cardView圓角效果
app:cardElevation=“10dp” 設定cardView Z軸陰影大小
app:cardMaxElevation=“6dp” 設定cardView Z軸最大陰影
app:contentPadding=“10dp” 設定內容的內邊距
app:contentPaddingBottom=“12dp” 設定內容的底部內邊距
app:contentPaddingLeft=“12dp” 設定內容的左邊內邊距
app:contentPaddingRight=“12dp” 設定內容的右邊內邊距
app:contentPaddingTop=“12dp” 設定內容的頂部內邊距
android:clickable=“true”
android:foreground="?attr/selectableItemBackground"添加點擊效果

代碼如下（示例）：

<!-- cardBackgroundColor 卡片背景色 -->
<!-- cardCornerRadius 卡片圓角效果 -->
<!-- cardElevation 卡片陰影效果 -->
<!-- contentPadding 卡片內容四周間距 -->
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="#f2f2f2"
    app:cardCornerRadius="8dp"
    app:cardElevation="0dp"
    app:contentPadding="8dp">
    ，，，
</androidx.cardview.widget.CardView>

7、CoordinatorLayout/AppBarLayout/CollapsingToolbarLayout

結合代碼如下（示例）：

<?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"
    android:id="@+id/dl_at_draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="450dp"
            android:fitsSystemWindows="true">

            <!-- AppBarLayout的直接子控制元件可以設定的屬性:layout_scrollFlags(滾動模式) -->
            <!-- 1.scroll|exitUntilCollapsed:如果AppBarLayout的直接子控制元件設定該屬性,該子控制元件可以滾動,向上滾動NestedScrollView出父布局(一般為CoordinatorLayout)時,會折疊到頂端,向下滾動時NestedScrollView必須滾動到最上面的時候才能拉出該布局
                 2.scroll|enterAlways:只要向下滾動該布局就會顯示出來,只要向上滑動該布局就會向上收縮
                 3.scroll|enterAlwaysCollapsed:向下滾動NestedScrollView到最底端時該布局才會顯示出來
                 4.scroll|snap:表示一個吸附效果，可以確保childView不會滑動停止在中間的狀態
                 5.如果不設定該屬性,則該布局不能滑動 -->
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|snap">

                <!-- CollapsingToolbarLayout的直接子布局可以使用的屬性:layout_collapseMode(折疊模式) -->
                <!-- 1.pin:在滑動程序中,此自布局會固定在它所在的位置不動,直到CollapsingToolbarLayout全部折疊或者全部展開
                     2.parallax:視差效果,在滑動程序中,不管上滑還是下滑都會有視察效果,不知道什么事視察效果自己看gif圖(layout_collapseParallaxMultiplier視差因子 0~1之間取值,當設定了parallax時可以配合這個屬性使用,調節自己想要的視差效果)
                     3.不設定:跟隨NestedScrollView的滑動一起滑動,NestedScrollView滑動多少距離他就會跟著走多少距離 -->
                <ImageView
                    android:id="@+id/iv_movie_icon"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/ic"
                    android:transitionName="basic"/>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/tb_amd_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:subtitleTextColor="#ff4081"
                    app:titleTextColor="#ff4081"/>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>


        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"/>

            </LinearLayout>
        </androidx.core.widget.NestedScrollView>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/add"
            app:layout_anchor="@id/appBar"
            app:layout_anchorGravity="bottom|end"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="this is menu"
        android:textColor="#fff"
        android:textSize="38sp"/>

</androidx.drawerlayout.widget.DrawerLayout>

exitUntilCollapsed 在這里插入圖片描述

8、NestedScrollView

代碼如下（示例）：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/toolbar_tab"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_gravity="bottom"
    android:background="#ffffff"
    android:fillViewport="false"
    app:layout_scrollFlags="scroll"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabIndicatorHeight="2.0dp"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabTextColor="#151515">

    <!--指示器顏色-->
    <!-- app:tabIndicatorColor="#0835f8"-->

    <!--tab條目中字體顏色-->
    <!--app:tabSelectedTextColor="#0835f8"-->

    <com.google.android.material.tabs.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:icon="@mipmap/v5" />
    <!--布局選擇器-->
    <!--android:icon="@drawable/tab_selector"-->
    <com.google.android.material.tabs.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="頭條" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="社交" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="直播" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="嘿嘿" />


</com.google.android.material.tabs.TabLayout>

在這里插入圖片描述

四、常用影片

1、Fade淡入

代碼如下（示例）：

//        //淡入影片
//        getWindow().setEnterTransition(new Fade());
//        滑動影片
//        getWindow().setEnterTransition(new Slide());
        // 分解影片
        getWindow().setEnterTransition(new Explode());

在這里插入圖片描述

2、Slider滑動

在這里插入圖片描述

3、Explode分解

在這里插入圖片描述

4、共享元素

代碼如下（示例）：

//Activity共享元素轉場影片
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
        ToolbarActivity.this,
        view.findViewById(R.id.iv_icon),
        "basic"
);

intent = new Intent(ToolbarActivity.this, MovieDetailActivity.class);
intent.putExtra("URL", movie.get(position).getImages().getMedium());
intent.putExtra("NAME", movie.get(position).getTitle());
startActivity(intent, optionsCompat.toBundle());

<ImageView
    android:id="@+id/iv_movie_icon"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    android:src="@drawable/ic"
    android:transitionName="basic"/>

注意transitionName="basic"前后對上即可
在這里插入圖片描述

Material Design推薦文章：

如果你不熟悉Material Design，請一口吃下這篇干貨！
重磅教程！幫你全面徹底搞定Material design的學習筆記
Material Design 指南中文版
Material Design 官方檔案
11款美觀實用的Material Design UI工具包（for UI）

About

文中Demo鏈接

UI系列文章一覽

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/265426.html

標籤：其他

上一篇：Handler原始碼分析

下一篇：Andorid 自定義View 仿大眾點評星星評分控制元件

強烈推薦！！！Material Design互動設計之常見用法介紹

文章目錄

前言

一、Material Design概念

二、常用屬性

三、常用控制元件

1、toolbar

2、DrawerLayout

3、NavigationView/BottomNavigationView

4、FloatingActionButton

5、Snackbar

6、CardView

7、CoordinatorLayout/AppBarLayout/CollapsingToolbarLayout

8、NestedScrollView

四、常用影片

1、Fade淡入

2、Slider滑動

3、Explode分解

4、共享元素