安卓 Material Design的简单介绍

作者: jkGeng | 来源:发表于2017-11-14 00:18 被阅读17次

安卓 Material Design的简单介绍
Android各版本主要特性
扁平化配色方案网站收集
移动平台设计规范：目录
Material Design系列教程 - 前言
安卓 Material design 整理
安卓日记——玩转Material Design（Recycler
2019-01-02安卓个版本差异
Material Design系列之TabLayout详解
安卓MD(Material Design)规范

引言
Material Design是谷歌在2014年推出的一套全新的界面设计语言。我们在安卓App中常见的控件，例如屏幕左侧隐藏的滑动菜单、右下角的悬浮按钮、顶部的可折叠式标题栏等都属于Material Design的实例。本文将简单介绍Material Design中的两个常用的控件（代码中的图片放置于res/drawable目录下）。

开发工具
Android Studio

一. 滑动菜单 NavigationView
我们经常可以在一些应用中看到隐藏在屏幕一侧的菜单，通过滑动的方式可以使之出现，在节约空间的同时也有动画效果。下面介绍一个简易滑动菜单的实现。
首先，需要在app/bulid.gradle文件中的dependencies闭包中添加Design Support库：

compile 'com.android.support:design:26.+'

其次，需要设置菜单的头部布局和菜单选项。
在res目录下创建一个menu文件夹并加入一个drawer.xml文件用于设置菜单，其中可以添加我们需要的菜单项，这里先简单设置三个选项。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_menu_settings"
            android:title="Settings" />
        <item 
            android:id="@+id/nav_share" 
            android:icon="@drawable/ic_menu_share" 
            android:title="Share" />
    </group>
</menu>

其中，checkableBehavior表示菜单项的选择属性，这里先设置为单选。
接下来是菜单头部，在layout文件夹里新建header.xml文件，在该文件中我们可以进行自定义的布局：

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@android:drawable/sym_def_app_icon" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

这里加入了一个ImageView用于放置头像，加入了一个TextView用于显示用户名。
最后，将菜单设置完毕，就可以在主活动中实现NavigationView了。
.xml文件代码：

<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/header"
        app:menu="@menu/drawer" />

java文件代码：

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        //设置左上角菜单提示
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    //设置通过返回键隐藏菜单
    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // 在此处为菜单项添加逻辑
        int id = item.getItemId();
        if (id == R.id.nav_gallery) {
        }
        else if (id == R.id.nav_settings) {
        }
        else if (id == R.id.nav_share) {
        }
        //设置点击选项后隐藏菜单
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

这样一个滑动菜单就完成了，菜单效果如图：

NavigationView

二. 悬浮按钮 FloatingActionButton
悬浮按钮不仅拥有立体的效果，而且可以借助它来实现交互式的提示，即同时实现类似Toast的通知和用户的响应。下面简单介绍它的实现过程。
首先，与滑动菜单相同，需要添加Design Support库。
为了使按钮在被点击后不会被下方的文本遮挡，我们可以在主活动界面中嵌套CoordinatorLayout（一种能够监听子控件事件并做出合理响应的帧布局）并在其中添加按钮。
随后，在主活动中添加悬浮按钮即可。
.xml文件代码：

<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/header"
        app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

java文件代码：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {//设置提示文本和响应按钮
                Snackbar.make(view, "Camera", Snackbar.LENGTH_LONG)
                        .setAction("Action", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {//在此处可以添加响应按钮逻辑
                                Toast.makeText(MainActivity.this, "Clicked", Toast.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });
    }
}

效果如图：