Material Design(四)
今天来学习下之前一直在用但却从没研究过的Toolbar吧。这个小东西在如今的Android开发中几乎是必用,用过很多次但每次自己想写的时候却只能写个简单的出来。现在就来深究下!
照常先贴学习链接:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
这个链接呢,基本上把Toobar的一些主要知识点介绍了下。但少了一个很重要的功能就是Toolbar与DrawerLayout的搭配使用。
Toolbar基础
Toolbar是在Android 5.0开始推出的一个Material Design风格的导航控件,Google非常推荐大家使用Toolbar作为Android客户端的导航栏,以此来取代之前的Actionbar。与Actionbar相比,Toolbar明显要灵活的多,它不像Actionbar一样,一定要固定在Activity顶部,而是可以放到界面的任意位置,除此之外,在设计Toolbar的时候,Google也流给改开发者很多可以定制修改的地方。
- 设置导航栏图标;
- 设置App的logo
- 支持设置标题核子标题
- 支持添加一个或多个的自定义控件
- 支持Action Menu
在上面那个学习链接中,除了第四点均涉及了,我这里也不详述了。而第四点也很容易实现,在Toolbar的标签下再加控件就可以了。我这里补充一些上面学习链接的知识。
Toolbar是替代掉Actionbar的,那我们的应用一定不能够使用带Actionbar的主题Theme,所以在styles.xml
中我们需要对其进行修改。如果使用1
2
3
4
5
6
7
8
9
10<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
</resources>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
不晓得为什么我这边会报错。原因是AppCompat...
不能这么设置之类的错误,那我就更狠一点1
2
3
4
5
6
7
8
9
10
11<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
直接使用Theme.AppCompat.NoActionBar
即可。接着在res/layout
的activity_main.xml
(布局文件可以在学习链接中找到)中添加Toobar然后再在MainActivity.java
中添加
1 | toolbar = (Toolbar) findViewById(R.id.toolbar); |
就能到得到如下效果了:
Toolbar就只这样的话那真是太不实用了,怎么也得整几个可以点的东西呀。这里就有些花样了。它可以将menu
文件中的item显示出来,这么说可能不是很理解。举个例子:有的手机应该是还有菜单键的,点菜单键弹出来的item将会显示在Toolbar上。这也就能理解为什么越来越多的手机取消了菜单键(应该会有点关系)!
在res/menu
中添加一个menu.xml
然后在其中添加如下代码:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<?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/edit"
android:icon="@mipmap/ic_launcher"
android:title="@string/action_edit"
android:orderInCategory="100"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/share"
android:icon="@mipmap/ic_launcher"
android:title="@string/action_share"
android:orderInCategory="100"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/setting"
android:icon="@mipmap/ic_launcher"
android:title="@string/action_setting"
android:orderInCategory="100"
app:showAsAction="never" />
</menu>
然后在MainActivity.java
中覆写:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return super.onCreateOptionsMenu(menu);
}
public boolean onOptionsItemSelected(MenuItem item) {
String msg = "";
switch (item.getItemId()) {
// case android.R.id.home:
// mDrawerLayout.openDrawer(GravityCompat.START);
// Log.i(TAG, "onMenuItemClick: Home had been click");
// return true;
case R.id.edit:
msg += "Click edit";
break;
case R.id.share:
msg += "Click share";
break;
case R.id.setting:
msg += "Click setting";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
之后你在运行程序的话,就能看到下面的效果了:
在Toolbar中多了几个item,点击的话也会有相应的事件发生。学习链接中有这样一段代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem menuItem) {
String msg = "";
switch (menuItem.getItemId()) {
case R.id.action_edit:
msg += "Click edit";
break;
case R.id.action_share:
msg += "Click share";
break;
case R.id.action_settings:
msg += "Click setting";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
};
这个经我测试发现其功能和onOptionsItemSelected
一模一样,并且还少了一个之后会讲到的功能(看我注释的代码就懂了)。
到这里Toolbar的基本使用就算学习结束了。
Toolbar进阶 –Toolbar与DrawerLayout的搭配使用
我也不知道算不算进阶,但我估计大部分和我一样的基础学习者应该是不会用的吧。对我来说算进阶,这里记录下来加深印象并分享给大家。
DrawerLayout
大家应该不陌生,这个肯定是必用的了。在Material Design(一)中,我还给大家介绍了Android Design Support Library
中的NavigationView
作为配合DrawerLayout
的控件。今天也会在用到。
首先布局代码在上面就有所改变了,需要添加DrawerLayout
。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
这里稍微提一下,有的App比如Material Design(一)中的Demo DrawerLayout
的高度是整个屏幕的大小,而这里DrawerLayout
没有占整个屏幕的高度,其关键在与Toolbar的位置,如果你把Toolbar发在DrawerLayout
的外面,并在外面把Toolbar和DrawerLayout
“垂直”放置的话,那么DrawerLayout
就只能显示在Toolbar之下了。这样就能看到抽屉打开关闭Toolbar的变化了。至于@layout/drawer_header
和@menu/drawer
大家可以在Material Design(一)去找。我这里就不贴了。然后你在MainActivity.java
的onCreate()
中加入下面的代码:1
2getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
以及将onOptionsItemSelected
的注释去掉,你就可以看到如下效果:
点击左上角的按钮可以打开DrawerLayout
,这是为什么呢?
经我测试发现主要是getSupportActionBar().setDisplayHomeAsUpEnabled(true);
这个函数起的功劳,查官方API发现:
public abstract void setDisplayHomeAsUpEnabled (boolean showHomeAsUp)
Set whether home should be displayed as an “up” affordance. Set this to true if selecting “home” returns up by a single level in your UI rather than back to the top level or front page.
所以才会有在onOptionsItemSelected
的注释的那段!如果你嫌弃那个自带的箭头,没事我们把它换了,
1 | getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu); |
使用setHomeAsUpIndicator
函数可以选择相关图片加载。最后就是Toolbar和DrawerLayout
的配合了,效果如下:
代码添加如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, "", "") {
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
toolbar.setTitle("Opened");
}
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
toolbar.setTitle("Closed");
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
有一些变量的声明代码中没有给出,对于有些基础的人来说应该是可以解决的,如果不行最后给大家一个下载链接,大家下载下来自己去实践吧。
到这里Material Design的学习可能就告一段落了。Material Design很多的模式我没有学习,之后真正开始做项目的时候可能就需要用到。