想写一篇关于Material Design的学习总结

恩!写一篇关于Material Design的总结吧
有关Material Design的进展介绍和详尽描述可以去下面的网站中去详细了解,传送门:
http://design.1sters.com/material_design/material-design/introduction.html
在这里我写到的是最近在看书的时候,觉得Material Design的东西需要总结一下.故写了下来.
先介绍一下Material Design
Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。其实个人认为应该是Google为了让自己产品的界面更加好看并且可以与apple产品的界面一较高下所推出的新语言.众所周知iphone的界面要比大多数Android的界面更符合大众的审美.
这里不得不感叹一下,Material Design中的界面真的很好看.
下面我列出一些我觉得比较常用的组件吧.
Toolbar
DrawerLayout(抽屉)
Navigation(一种滑动菜单)
FloatingActionButton(悬浮按钮)
Snackbar (类Toast工具,比Toast更人性化)
CoordinatorLayout (升级版的FrameLayout)
CardView (卡片布局,具有圆角和阴影效果)
SwipeRefreshLayout (系统自带的下拉刷新组件)
CollapsingToolbarLayout (可折叠式标题栏)
就列举这些.陆续会在博客中增加.
Toolbal的使用方法
Toolbar其实就是Android中的标题栏,但是它具有可扩展性,可以在其中加入一些功能.
在设置Toolbar之前需要将系统原生自带的标题栏去掉.

 <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">

进入上述的AppTheme中,会出现下面的代码

<resources>    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    </style></resources>

将parent中的后缀改成NoActionBar即可.(以前的后缀应该是Light.DarkActionBar)
然后进行xml的文件编写

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    >    <android.support.v7.widget.Toolbar        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        >    </android.support.v7.widget.Toolbar></FrameLayout>

然后绑定布局后注册组件就可以了.

 Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(mToolbar);

是不是很简单.这样就将ActionBar变成ToolBar了,它比ActionBar强大的地方就在,它具备实现Material Design效果的能力.
接下来要在Toolbar中设置按钮
首先编辑menu文件.需要在res下级中建一个文件夹.名字为menu,然后在menu中创建toolbar.xml文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item android:id="@+id/backup"        android:icon="@mipmap/xx"        android:title="one"        app:showAsAction="always"/>    <item android:id="@+id/delete_yy"        android:icon="@mipmap/yy"        android:title="two"        app:showAsAction="ifRoom"        />    <item android:id="@+id/seting"        android:icon="@mipmap/zz"        android:title="three"        app:showAsAction="never"        />    <item android:id="@+id/seting1"        android:icon="@mipmap/zz"        android:title="22"        app:showAsAction="never"        />    <item android:id="@+id/seting3"        android:icon="@mipmap/zz"        android:title="xx"        app:showAsAction="never"        /></menu>

然后在代码中实现

 @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toobal,menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.xx:                Toast.makeText(this, "你点击了xx", Toast.LENGTH_SHORT).show();                break;            case R.id.yy:                Toast.makeText(this, "你点击了yy", Toast.LENGTH_SHORT).show();                break;            case R.id.zz:                Toast.makeText(this, "你点击了zz", Toast.LENGTH_SHORT).show();                break;            default:        }        return true;    }

这样ToolBar中的按钮就加上去了.上述是此组件最基础的实现,可以做相应扩展.
DrawerLayout配合Navigation实现抽屉滑动菜单效果,它可替代SlidingDrawer组件.这个功能在Android中及其常用.比如下图:

下面实现功能:
因为NavigationView功能是由Design Support库中提供的,故要将库引入到项目中(引入位置app/build.gradle).需要在dependencies中添加

 compile 'com.android.support:design:25.1.0'

然后准备菜单中的内容,在menu文件夹中创建menu文件(如没有menu文件夹创建一个).

<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single">    <item android:id="@+id/nav_1"        android:icon="@mipmap/ic_launcher"        android:title="替换1"        />    <item android:id="@+id/nav_2"        android:icon="@mipmap/ic_launcher"        android:title="替换2"        />    <item android:id="@+id/nav_3"        android:icon="@mipmap/ic_launcher"        android:title="替换3"        />    <item android:id="@+id/nav_4"        android:icon="@mipmap/ic_launcher"        android:title="替换4"        />    <item android:id="@+id/nav_5"        android:icon="@mipmap/ic_launcher"        android:title="替换5"        /></group></menu>

然后编写
抽屉头布局中的文件(此文件可以不添加,根据项目需要)

<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"    >    <ImageView        android:id="@+id/icon_image"        android:layout_width="70dp"        android:layout_height="70dp"        android:src="@mipmap/ic_launcher"        android:layout_centerInParent="true"        />    <TextView        android:id="@+id/icon_username"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:text="haha"        android:textColor="#fff"        android:textSize="14sp"        />    <TextView        android:id="@+id/icon_mail"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/icon_username"        android:text="Tony"        android:textColor="#fff"        android:textSize="14sp"        /></RelativeLayout>

然后编辑实现代码

public class MainActivity extends AppCompatActivity {    private NavigationView navigationView;    private DrawerLayout drawerLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        navigationView = (NavigationView) findViewById(R.id.nav_view);        drawerLayout = (DrawerLayout) findViewById(R.id.drawlayout);        navigationView.setCheckedItem(R.id.nav_call);        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()){                    case R.id.nav_1:                        Toast.makeText(MainActivity.this, "替换1", Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_2:                        Toast.makeText(MainActivity.this, "替换2", Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_3:                        Toast.makeText(MainActivity.this, "替换3", Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_4:                        Toast.makeText(MainActivity.this, "替换4", Toast.LENGTH_SHORT).show();                        break;                    case R.id.nav_5:                        Toast.makeText(MainActivity.this, "替换5", Toast.LENGTH_SHORT).show();                        break;                }                drawerLayout.closeDrawers();                return true;            }        });    }}

实现效果

可以在替换中加入需要加入的标签.
FloatingActionButton
使用方法:此控件的作用是实现悬浮按钮的效果.它是Design Support库中提供的一个控件.
这个组件非常简单只要在布局文件中加入组件就可以实现.

  <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="16dp"        android:src="@mipmap/ic_launcher"        />

实现的效果是这样的.

Snackbar
这个组件是一个较为先进的提示工具.同样是Design Support中提供的.
他和Toast相似,但并不是Toast的替代品.
实现代码:

 fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        Toast.makeText(MainActivity.this, "Data", Toast.LENGTH_SHORT).show();                    }                }).show();            }        });

其中参数1View为当前布局.参数2为显示的信息,参数3为显示时长.
在setAction中的参数为可点击的选项.
效果图.

效果图中,可以看到组件Snackbar将后面的图标盖住了,这样会影响体验,故引出下一个组件.
CoordinatorLayout
此组件为FrameLayout的加强版.使用非常简单,只需将CoordinatorLayout替换成FrameLayout即可.
修改完的效果图.

CardView
此组件是一个卡片式布局,是由v7库(appcompat-v7)提供的.其实CardView也是一个FrameLayout.只是提供了圆角和阴影等效果.