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的滑动菜单。

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