MaterialDesign使用及开发指南

序言

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

参考:
Material Design中文网
http://design.1sters.com/

谷歌开发者平台
https://developer.android.google.cn/design/index.html

开始使用

1.清单文件

注意theme的设置

<application
        android:name=".application.MyApplication"
        android:allowBackup="true"
        android:icon="@drawable/logo"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

2.Gradle配置

(1)appcompat

compile 'com.android.support:appcompat-v7:25.1.0'

(2)design

compile 'com.android.support:support-v4:25.1.0'

3.命名空间

为使用Material Design控件的布局文件指定命名空间

xmlns:app="http://schemas.android.com/apk/res-auto"

悬浮按钮 FloatButton

<android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_marginRight="15dp"
   android:layout_marginTop="180dp"
   android:elevation="1dp"
   android:onClick="playVideo"
   android:src="@mipmap/bofang_float"
   app:backgroundTint="@color/lable_blue"
   app:borderWidth="0dp"
   app:rippleColor="@color/mediumseagreen"/>

1.说明
android:elevation="1dp"设置阴影
app:backgroundTint="@color/lable_blue"背景色
app:rippleColor="@color/mediumseagreen"点击时的颜色
app:borderWidth="0dp"边缘宽度

2.安卓5.x存在的一些问题
在5.x的设备上运行，你会发现一些问题（测试系统5.0）：
(1)没有阴影
记得设置app:borderWidth="0dp"
(2)按上述设置后，阴影出现了，但是竟然有矩形的边界（未设置margin时，可以看出）
需要设置一个margin的值。在5.0之前，会默认就有一个外边距（不过并非是margin，只是效果相同）。
解决方案:添加属性app:borderWidth="0dp"对于5.x设置一个合理的margin

3.其他
app:fabSize风格,有正常和小两种normal、mini两个选择
android:src按钮中间的图片
app:elevation空闲状态下的阴影深度默认为6dp
app:pressedTranslationZ按下状态下的阴影深度默认为12dp
app:backgroundTint按钮颜色-
其它的点击事件等与Button无异。

纸片 Chips

此语义常指向PopupMenu控件

1.建立values下的menu文件

使用PopupMenu控件要为菜单指定item属性

2.Menu属性解析

showAsAction属性共有五个值：ifRoom、never、always、withText、collapseActionView，可以混合使用(用|符号隔开)
ifRoom 会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定.
never 永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。
always 无论是否溢出，总会显示。
withText 示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全。
collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。

示例代码

<menu 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" >
   <item
       android:id="@+id/action_comment"
       android:orderInCategory="100"
       android:title="评论"
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_contact"
       android:orderInCategory="100"
       android:title="联系"
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_collect"
       android:orderInCategory="100"
       android:title="收藏"
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_orderlesson"
       android:orderInCategory="100"
       android:title="预约"
        app:showAsAction="never"/>
</menu>

3.点击事件

/**
 * 显示纸片chips
*@param view
 */
private void showPopupMenu(View view) {
    //View当前PopupMenu显示的相对View的位置
   PopupMenu popupMenu = new PopupMenu(this, view);

   //menu布局
                popupMenu.getMenuInflater().inflate(R.menu.detailtch_popmenu,popupMenu.getMenu());

     //动态设置menuItem文字
    if (xxx){
        //getItem()参数 = menu的item数-1
        popupMenu.getMenu().getItem(2).setTitle("取消收藏");
    }

    //menuiItem点击事件
   popupMenu.setOnMenuItemClickListener(newPopupMenu.OnMenuItemClickListener() {
       @Override
       public boolean onMenuItemClick(MenuItem item) {
           if (item.getItemId() == R.id.action_comment) {
                    //干点小事情
           }
           if (item.getItemId() == R.id.action_contact) {
                    //干点小事情
           }
           if (item.getItemId() == R.id.action_collect) {
                   //干点小事情
           }
           if (item.getItemId() == R.id.action_orderlesson) {
                   //干点小事情
           }
           return false;
       }
    });

    //PopupMenu关闭事件
   popupMenu.setOnDismissListener(new PopupMenu.OnDismissListener() {
       @Override
       public void onDismiss(PopupMenu menu) {

       }
});

//强制显示菜单图标,详情见下面
try {
             ...
} catch (…) {
             …
}

         //PopupMenu显示
    popupMenu.show();
}

4.PopMeun显示Icon

使用反射原理，强制显示菜单图标

try {
   Field field = popupMenu.getClass().getDeclaredField("mPopup");
   field.setAccessible(true);
   MenuPopupHelper mHelper = (MenuPopupHelper) field.get(popupMenu);
   mHelper.setForceShowIcon(true);
} catch (IllegalAccessException |NoSuchFieldException e) {
   e.printStackTrace();
}

工具栏 Toolbar

1.布局文件

略,直接在布局中声明Toolbar空间即可.

2.菜单项布局

Menu_toolbar.xml

<?xml version="1.0"encoding="utf-8"?>
<menu
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <item
       android:id="@+id/action_search"
       android:icon="@mipmap/ic_search_white_24dp"
       android:title="搜索"
        app:showAsAction="ifRoom" />

   <item
       android:id="@+id/action_setting"
       android:icon="@mipmap/ic_more_vert_white_24dp"
       android:title="设置"
       app:showAsAction="ifRoom" />
</menu>

3.点击事件

/**
 * 初始化toolbar
 */
private void initToolBar() {
         finalToolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         //设置导航栏图标,标题等
         toolbar.setNavigationIcon(R.mipmap.ic_menu_white_24dp);      
         toolbar.setTitle("演示标题");
         toolbar.setTitleTextColor(Color.WHITE);

         //反射菜单项
         toolbar.inflateMenu(R.menu.menu_toolbar);

         //找到menu里的每个item项
         MenuItemitem = toolbar.getMenu().getItem(0);

         //左上角图标点击,打开抽屉
         toolbar.setNavigationOnClickListener(newView.OnClickListener() {
                   @Override
                   publicvoid onClick(View v) {
                            drawer.openDrawer(Gravity.LEFT);
                   }
         });

         //右边item点击
         toolbar.setOnMenuItemClickListener(newToolbar.OnMenuItemClickListener() {