想写一篇关于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.只是提供了圆角和阴影等效果.