这次我们来说说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的滑动菜单。
本人菜鸟,如有不对,望各路大神指教。