Android Study之Material Design初体验(一)

LZ-Says：生活中程序猿的真实写照、一款游戏一包烟，一台电脑一下午。一盒泡面一壶水，一顿能管一整天。。。

前言

首先，我们要明确一个，什么是Material Design?

Material Design，是谷歌在14年的IO大会上提出的一种新的理念，也被称为新的设计语言(也被称为“原材料设计”)，称它为设计语言不为过，但是实际上，这仅仅是谷歌提倡的一种新的设计风格、理念以及设计基本原则。

同时，大家也要明白，它在Android 5.0之后被引入，而LZ，现在才开始接触，了解，希望为时不晚~

Material Design基础了解

Material Design重点在于一点，它的存在，让控件有了生命，对应的也拥有了层次感，提升了用户交互感触。

那么层次感又是什么呢？如下图所示：

之前，仅仅是X、Y轴，而现在新增了一个Y轴，也就是屏幕上方位置，具体与用户交互效果如下：

那么对于不同的职业对待它的标准又是什么呢？

• 美工：尽量遵循Material Design设计，提升原有界面UI以及图标设计；
• 产品：尽量遵循Material Design界面设计、界面跳转、动画效果、以及与用户交互设计；
• 开发： 实现基于Material Design设计

Material Design基础使用

谷歌开发以及收集了一些最新的开源的项目，汇集到最新的support兼容支持包以及最新的5.X API里面。

而关于support包，我们不得不提有如下几点：

• android-support-v4：最低兼容到Android 1.6系统，里面包含类似ViewPager等控件；
• android-support-v7：最低兼容到Android 2.1的系统，这个工程可以让开发人员统一开发标准，在任何的系统版本下保证兼容性，but，其中有的控件就不能兼容到2.1，比如我们强大的recyclerView，它最低兼容到3.0

而关于兼容性，我们会在下面进行讲解说明。But，大家在引入v7的时候，是不是总会有些问题？这里为大家举例说明一下：

• 自动导入的appcompat-v7项目自身就是报错的，什么原因？

build的版本太低了，要么是SDK很新但是兼容包没有更新。

• appcompat-v7好不容易没报错，但是项目报错，一看控制台：报appcompat里面的某个res/values/theme/xxx属性不存在 等等问题，这又是什么原因？

因为你引入的是很新的appcompat-v7项目，它要求必须很高的版本编译，所以直接使用最高版本编译即可。

况且，现在我们一般的app开发，最低兼容到4.0，感觉4.0的设备少之又少了吧，不过也不排除~

Material Design初体验

Material Design控制项目全局样式

• 引入v7包依赖
• 编写自定义主题文件

默认创建项目自动创建如下：

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

基于以上内容，我们进行相应编辑。

<style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:textColor">@color/mytextcolor</item>
        <item name="colorPrimary">@color/colorPrimary_pink</item>
        <item name="colorPrimaryDark">@color/colorPrimary_pinkDark</item>
        <item name="android:windowBackground">@color/background</item>
        <item name="colorAccent">#906292</item>
        <!-- 设置虚拟导航栏背景颜色 ，5.x的新特性-->
        <item name="android:navigationBarColor">@color/colorPrimary_pink</item>
    </style>

显示的效果如下：

在此，网上给大家找了一个针对以上属性绘制比较细致的图，方便大家更好的理解和掌握。

拓展控件

在这里，我们首先要明确，我们为什么要使用v7包下面的资源内容呢？

因为这里面是谷歌为了解决Android碎片化而准备的很牛逼的新技能，它的出现，让我们开发出来的app可以在不同的系统版本，不同的厂商定制的Android上面运行有着几乎相同的体验~

不信？那我们举几个简单的例子瞅瞅~专治各种不服

1. AlertDialog与v7 AlertDialog

点击按钮，弹出Dialog，关键代码如下：

public void showDialog(View view) {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("提示").setMessage("哇咔咔");
        builder.setPositiveButton("嗯嗯好", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        builder.setNegativeButton("555No", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        builder.show();
    }

    public void showSupportDialog(View view) {
        android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app.AlertDialog.Builder(this);
        builder.setTitle("提示").setMessage("哇咔咔");
        builder.setPositiveButton("嗯嗯好", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        builder.setNegativeButton("555No", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        builder.show();
    }

而实现的效果，在5.0设备如下：

而在4.4的设备上，差距变真正显示出来了，如下：

有木有~

2. Button PK AppCompatButton

上码：

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <android.support.v7.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="AppCompatButton" />

效果如下：

啊哦，没啥效果，接着往下瞅瞅~

3. ProgressBar

直接撸码，没啥可说的：

布局文件：

<ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:id="@+id/id_pro"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

activity设置进度条属性：

bar= (ProgressBar) findViewById(R.id.id_pro);
        bar.setMax(100);
        bar.setProgress(50);

效果如下：

4. SwipeRefreshLayout

上一套布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_srl"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:scrollbars="none">

        ... ...

    </ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

再来一套初始化：

srl = (SwipeRefreshLayout) findViewById(R.id.id_srl);
        srl.setSize(SwipeRefreshLayout.LARGE);
        srl.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {

            @Override
            public void onRefresh() {
                // 下拉完毕 加载更多数据
//                srl.setRefreshing(false);
            }
        });
        srl.setColorSchemeColors(Color.RED, Color.BLUE, Color.GREEN);
        //设置进度条的背景颜色
        srl.setProgressBackgroundColorSchemeColor(Color.YELLOW);
        //设置下拉多少距离开始刷新
        srl.setDistanceToTriggerSync(70);

最后放个大招，效果图：

5. LinearLayoutCompat：给包裹在里面的所有子控件添加间隔线

<android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:divider="@drawable/abc_list_divider_mtrl_alpha"
            app:showDividers="beginning|middle">

效果如下：

6. PopupWindow 拓展 ListPopupWindow PopupMenu

ListPopupWindow :

private ArrayAdapter<String> adapter;

    String[] items = {"条目0", "条目1", "条目2", "条目3", "条目4", "条目5", "条目6",};
    // 数据
    adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);

    public void showPopup(View v) {
        final ListPopupWindow listPopupWindow = new ListPopupWindow(this);
        listPopupWindow.setAdapter(adapter);
        //设置锚点，弹出的位置是相对于v的位置
        listPopupWindow.setAnchorView(v);
        listPopupWindow.setWidth(200);
        listPopupWindow.setHeight(500);
        listPopupWindow.show();
        listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(getApplicationContext(), "点了第" + position, 0).show();
                listPopupWindow.dismiss();
            }
        });
    }

效果如下：

PopupMenu：

编写布局文件：

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_settings"
        android:icon="@mipmap/ic_launcher_round"
        android:orderInCategory="100"
        android:title="设置" />
    <item
        android:id="@+id/action_share"
        android:icon="@mipmap/ic_launcher_round"
        android:orderInCategory="101"
        android:title="分享" />
    <item
        android:id="@+id/action_new"
        android:icon="@mipmap/ic_launcher_round"
        android:orderInCategory="102"
        android:title="添加" />

</menu>

Activity：

PopupMenu popup = new PopupMenu(SupportUseActivity.this, view);
    popup.getMenuInflater()
            .inflate(R.menu.main, popup.getMenu());
    popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
        public boolean onMenuItemClick(MenuItem item) {

            return true;
        }
    });
    popup.show();

效果如下：

GitHub查看地址

​​https://github.com/HLQ-Struggle/MaterialDesignStudy​​