欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

强烈推荐!!!Material Design交互设计之常见用法介绍

程序员文章站 2022-06-09 19:12:33
文章目录前言一、常用控件1、toolbar2、DrawerLayout3、NavigationView/ BottomNavigationView4、FloatingActionButton5、Snackbar6、CardView7、CoordinatorLayout8、AppBarLayout9、CollapsingToolbarLayout10、NestedScrollView二、常用动画1、Fade淡入2、Slider滑动3、Explode分解4、共享元素前言本文主要结合一个Demo的演示来对...


前言

本文主要结合一个Demo的演示来对对Material Design中的常用控件和常用控件做一个介绍。
整理这篇文章之前,我查了Material Design相关的文章,可以说这个题材的文章是真的多,其中也有很多非常优秀的文章,相关链接我会在文末给出,可以 点击这里跳到文末

提示:以下是本篇文章正文内容

一、Material Design概念

说白了就是一套ui设计,ios有自己的一套ui规范,Android不也得有自己的一套嘛。Material Design可以形象地翻译成原材料设计,有个特点是加入了z轴的效果,防光照设计。

二、常用属性

直接看图(示例):
强烈推荐!!!Material Design交互设计之常见用法介绍

三、常用控件

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;
    }
};

强烈推荐!!!Material Design交互设计之常见用法介绍

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();

强烈推荐!!!Material Design交互设计之常见用法介绍

6、CardView

代码如下(示例):

<!-- 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>

强烈推荐!!!Material Design交互设计之常见用法介绍强烈推荐!!!Material Design交互设计之常见用法介绍

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>

强烈推荐!!!Material Design交互设计之常见用法介绍

四、常用动画

1、Fade淡入

代码如下(示例):

//        //淡入动画
//        getWindow().setEnterTransition(new Fade());
//        滑动动画
//        getWindow().setEnterTransition(new Slide());
        // 分解动画
        getWindow().setEnterTransition(new Explode());

强烈推荐!!!Material Design交互设计之常见用法介绍

2、Slider滑动

强烈推荐!!!Material Design交互设计之常见用法介绍

3、Explode分解

强烈推荐!!!Material Design交互设计之常见用法介绍

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推荐文章:


About

文中Demo链接

UI系列文章一览

本文地址:https://blog.csdn.net/u014158743/article/details/114258987