Material Design(四)

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也流给改开发者很多可以定制修改的地方。

  1. 设置导航栏图标;
  2. 设置App的logo
  3. 支持设置标题核子标题
  4. 支持添加一个或多个的自定义控件
  5. 支持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/layoutactivity_main.xml(布局文件可以在学习链接中找到)中添加Toobar然后再在MainActivity.java中添加

1
2
3
4
5
6
7
toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle("My Title");

toolbar.setSubtitle("Sub title");

setSupportActionBar(toolbar);

就能到得到如下效果了:
image description

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return super.onCreateOptionsMenu(menu);
}

@Override
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;
}

之后你在运行程序的话,就能看到下面的效果了:
image description
在Toolbar中多了几个item,点击的话也会有相应的事件发生。学习链接中有这样一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
@Override
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.javaonCreate()中加入下面的代码:

1
2
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

以及将onOptionsItemSelected的注释去掉,你就可以看到如下效果:
image description

点击左上角的按钮可以打开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
2
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

使用setHomeAsUpIndicator函数可以选择相关图片加载。最后就是Toolbar和DrawerLayout的配合了,效果如下:
image description
代码添加如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, "", "") {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
toolbar.setTitle("Opened");
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
toolbar.setTitle("Closed");
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
}

有一些变量的声明代码中没有给出,对于有些基础的人来说应该是可以解决的,如果不行最后给大家一个下载链接,大家下载下来自己去实践吧。

到这里Material Design的学习可能就告一段落了。Material Design很多的模式我没有学习,之后真正开始做项目的时候可能就需要用到。

下载链接:http://download.csdn.net/detail/cuihaoren01/9532123