一、Material Desgin 交互式设计

作者: 石器时代小古董 | 来源:发表于2019-07-02 08:58 被阅读0次

一、Material Desgin 交互式设计
Material Desgin学习
material desgin库
一个粗仿Tumblr UI的Android项目
一款基于Material Desgin设计的APP
一款基于网易云音乐UI
12.3滑动菜单（DrawerLayout）
Material Design与IOS Human Interf
Material Design重新学系列 - 1.简介以及主题样
Material Design概述

一、主题

Material Desgin 的主题中的属性
1. colorPrimary: 主题栏的颜色
2. colorPrimaryDark: 状态栏的颜色
3.textColorPirmary: 主标题的颜色
4.colorAccent:强调色,默认一些控件的颜色
5.windowBackground: 窗口背景色
6.nativegationBarColor:底部导航栏的颜色

image.png

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <!-- 标题栏颜色 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!-- 强调颜色 -->
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 窗口颜色 -->
        <item name="android:windowBackground">@android:color/white</item>
        <!-- 虚拟导航栏颜色 -->
        <item name="android:navigationBarColor">@color/colorPrimary</item>
        <!--设置menu菜单的背景色-->
        <item name="android:itemBackground">@color/black</item>
        <!--设置Menu菜单的字体颜色-->
        <item name="android:textColorPrimary">@android:color/darker_gray</item>
        <!--设置Menu窗口不覆盖ToolBar视图-->
        <item name="overlapAnchor">false</item>
    </style>

二、常用的控件

控件名	作用
Toolbar	顶部的标题栏
DrawerLayout	左右的抽屉布局
NavigationView	通常与抽屉布局相互使用，是在DrawerLayout中的布局
BottomNavigationView	底部的导航栏
FloatActionButton	悬浮的按钮
Snackbar	提示控件
CardView	以卡片形式布局
CoordinatorLayout	可以设定控件之间的交互
AppBarLayout	是一个垂直线性布局,结合CoordinatorLayout使用
CollapsingToolbarLayout	一种折叠的 View 结合 CoordinatorLayout使用
NestedScrollView	支持嵌套滑动的 ScrollView

1.Toolbar的基本使用
在布局中声明一个Toolbar

如果让标题在Toolbar中间显示,可以在Toolbar布局中放置一个TextView

<android.support.v7.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"/>

            </android.support.v7.widget.Toolbar>

设置Toolbar并且关联DrawerLayout

       //如果不设置，则不会出现标题
        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //不设置会显示label的属性,也可以在清单文件中进行配置
//      tbAtToolbar.setTitle(" I am toolbar ");
        setSupportActionBar(tbAtToolbar);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //设置Toolbar home键可点击
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置Toolbar home键图标
            actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
        }

改变Toolbar弹出菜单的布局和监听事件

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toobalr, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.add:
                Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

2.DrawerLayout和NavigationView的使用
作为跟布局使用，内部嵌入NavigationView可以作为抽屉内部的样式

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <!-- 侧滑菜单-->
    <android.support.design.widget.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"/>

</android.support.v4.widget.DrawerLayout>

代码开启和关闭抽屉

  dlAtDrawLayout.openDrawer(Gravity.START);
 drawer.closeDrawer(GravityCompat.START);

NavigationView的使用

  //侧滑菜单中使用NavigationView
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
 @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        //NavigationView 响应NavigationItem
        int id = item.getItemId();
        if (id == R.id.nav_camera) {
            startActivity(new Intent(MainActivity.this, ToolbarActivity.class));
              return true; }  
    }

3.BottomNavigationView

    <android.support.design.widget.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"/>
# navigation menu
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home"/>

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard"/>

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications"/>
</menu>

     BottomNavigationView navigation = findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

    //导航栏菜单点击监听
    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;
            }
            return false;
        }
    };

4.FloatActionBar和SncakBar

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

 //浮动菜单
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "snack action ", 1000)
                        .setAction("Toast", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, " to do ", Toast.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });

5.组合使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.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.如果不设置该属性,则该布局不能滑动 -->
            <android.support.design.widget.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|exitUntilCollapsed">

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

                <android.support.v7.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"/>

            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>


        <android.support.v4.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>
        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/add"
            // 设置给FloatingActionBar添加在哪个View上
            app:layout_anchor="@id/appBar"
           // 设置添加的位置
            app:layout_anchorGravity="bottom|end"/>

    </android.support.design.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"/>

</android.support.v4.widget.DrawerLayout>

一、Material Desgin 交互式设计
一、主题 Material Desgin 的主题中的属性1. colorPrimary: 主题栏的颜色2. col...
Material Desgin学习
移步 Activity 和 Fragment 切换通过声明两屏之间通用的共享元素，你可以在两种状态间创建流畅的切换...
material desgin库
发现最新的com.android.support:design:28.0.0 爆红。检查发现推荐使用android...
一个粗仿Tumblr UI的Android项目
Discover 一款模仿Tumblr UI，使用开眼api开发的符合Google Material Desgin...
一款基于Material Desgin设计的APP
源码小编已经上传到github上了，求star啊 https://github.com/Hankkin/TaoSc...
一款基于网易云音乐UI
一款基于网易云音乐UI，使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的...
12.3滑动菜单（DrawerLayout）
滑动菜单可以说是Material Desgin中最常见的效果之一了，在许多著名的应用中，都有滑动菜单的功能...
Material Design与IOS Human Interf
一、Material Design设计原则 Material Design是谷歌Android系统的视觉设计语言，...
Material Design重新学系列 - 1.简介以及主题样
Material Design Material Design简介 Material Design是谷歌新的设计语...
Material Design概述
Material Design是设计规范 Material Design是Google推出的一种视觉设计语言，起因...