Android中MaterialDesign的使用，以及实现仿网易新闻客户端的UI效果（一）

这次我们来说说Android中的MaterialDesign，并用MaterialDesign以及前面的RecyclerView来实现仿网易新闻客户端的UI效果。
当然，详细说的话，会比较多，所以我准备分开说，今天我们就先讲一讲ToolBar使用。
话不多说，首先我们在app/build.gradle的dependencies闭包中添加包的依赖，如下：

compile 'com.android.support:design:26.1.0'
compile 'com.android.support:recyclerview-v7:26.1.0'

ok，这样就可以了，后面如果需要其他的，我们再进行添加。
接着，要是用ToolBar，要先将清单文件中的theme指定为没有ActionBar的theme，如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

将上面xml代码中的style节点的parent中的值改为Theme.AppCompat.Light.NoActionBar，表示这个theme中是没有ActionBar的。
ok，接着，我们就可以写布局文件了，如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        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"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/main_tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Theme.AppCompat.Light"/>

        <TextView
            android:id="@+id/main_text_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="hello material design"
            />

    </LinearLayout>

我们来看看定义的xml文件，就是一个LinearLayout包裹了一个ToolBar和一个TextView，LinearLayout和TextView都没什么特殊的，这里我们主要来看ToolBar，首先，我们引用的是support.v7下的ToolBar（这是为了适配低版本），接着我们来看里面的属性，有三个是要说说的，首先是android:layout_height这个属性，我们指定的是”?attr/actionBarSize”这个值，就是将高度设置为ActionBar的值，接着android：theme这个属性，我指定的是Base.ThemeOverlay.AppCompat.Dark.ActionBar，这是指定一个深色主题，因为我们之前指定的主题是浅色主题（此时ToolBar中的文字会是黑色的），这样指定是为了让ToolBar单独使用深色主题（这时ToolBar中的文字会是白色的），最后我们看看android：popuptheme这个是指定那你弹出菜单的颜色的。这里讲它指定为浅色主题。（如果，各位对上面的属性不理解的话，可以自己尝试更换其他的值，看看会有什么变化）
这样，布局文件就定义好了，接着我们只需要修改一下MainActivity中的代码了，如下：

public class MainActivity extends AppCompatActivity {

    private android.support.v7.widget.Toolbar mToolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {

        mToolbar = findViewById(R.id.main_tool_bar);
        setSupportActionBar(mToolbar);
    }
  }

代码如上，很简单，就是找到Toolbar并调用setSupportActionBar这个方法，并将ToolBar传进去，这里需要注意的是，我们再布局文件中引用的是support.v7中的ToolBar,所以这里通过findViewById找的的ToolBar也必须是support.v7中的ToolBar千万不要引用错了，还有关联ToolBar的方法也是带有Support的。我们来运行一下程序，看一下效果。

可以看到，ToolBar和之前的ActionBar并没有什么不同，虽然样子没有什么不同，但是ToolBar可是具有实现MaterialDesign效果的能力的。让我们继续往下看。
接着，我们来看一下ToolBar的一些常用功能，指定ToolBar的标题文字，可以直接在ToolBar的布局文件中app：title这个属性中指定更改，如果仅仅是这样肯定是不够的，让我们来增加几个action按钮，看看ToolBar和ActionBar的不同。首先我们再res目录下新建一个menu文件夹，然后在menu文件夹下创建一个toolbar.xml的menu文件，代码如下：

<?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/toolbar_backup"
        android:title="备份"
        app:showAsAction="always"/>

    <item
        android:id="@+id/toolbar_location"
        android:title="定位"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/toolbar_delete"
        android:title="删除"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/toolbar_setting"
        android:title="设置"
        app:showAsAction="never"/>

</menu>

一个item用来定义一个action按钮，这里我们定义了4个action按钮，android：title属性用来定义按钮的文字，还有一个android：icon是用来指定按钮的图片的，我这里没有为这些按钮指定图片了。接着重要的是
app：showAsAction这个属性，这是用来指定这些按钮显示的位置的，我们来说说我们指定的这几个值的意思和作用:
1.always：表示该按钮永远显示在标题栏中，如果标题栏空间不够则不显示。
2.ifRoom：表示如果标题栏空间够的话，就显示在标题栏中，如果标题栏空间不够，则显示在菜单中。
3.never：表示按钮不显示在标题栏中，只会显示在菜单中。
需要注意的是，当你为每个按钮都设置了android：icon这个属性时（就是你为每个按钮都指定图标时），只有显示在标题栏中的按钮会显示图标，显示在菜单栏中的按钮只会显示文字。
ok，menu文件定义好以后，我们就要修改MainActivity中的代码了，如下：

public class MainActivity extends AppCompatActivity {

    ****省略前面的代码****
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.toolbar,menu);

        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()){
            case R.id.toolbar_backup:
            case R.id.toolbar_delete:
            case R.id.toolbar_location:
            case R.id.toolbar_setting:

                String title = (String) item.getTitle();
                Toast.makeText(MainActivity.this,"you click "+title,Toast.LENGTH_SHORT).show();
                break;
        }

        return super.onOptionsItemSelected(item);
    }
  }

如上，我们只是重写了两个父类中的方法：onCreateOptionsMenu和onOptionsItemSelected，那么这两个方法的作用从代码中可以很明显的看出来，onCreateOptionsMenu这个方法时用来加载之前定义的菜单文件的。onOptionsItemSelected这个方法是用来设置按钮的点击事件的。（这里偷了一下懒，所有的点击事件响应都是弹出一个Toast，不过思路是这样，用switch根据id来判断用户点的是哪个按钮，再根据case来判断响应不同的点击），让我们运行一下，看一下效果：

可以看到，我们定义的menu文件已经显示在了ToolBar上，并且ToolBar的最右边多一个菜单的按钮，我们定义的menu文件中，不能显示的按钮就放在菜单中。

ok，这次就讲那么多，下次我们就来说说MaterialDesign的滑动菜单。

本人菜鸟，如有不对，望各路大神指教。