手记

android:ToolBar详解(手把手教程)(2)

4. 控件 (component)

本阶段将从 toolbar_demo_checkpoint2 接续,在还未于 <android.support.v7.widget.Toolbar/>  标签中,自行添加元件的 toolbar 有几个大家常用的元素可以使用,请先见下图:

大抵来说,预设常用的几个元素就如图中所示,接着就依序来说明之:

1.  setNavigationIcon
即设定 up button 的图标,因为 Material 的介面,在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。

1.  setLogo
APP 的图标。

2.  setTitle
主标题。

3.  setSubtitle
副标题。

4.  setOnMenuItemClickListener
设定菜单各按鈕的动作。

先來看到菜单外的代码,在 MainActivity.java 中:

先来看到

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

// App Logo

toolbar.setLogo(R.drawable.ic_launcher);

// Title

toolbar.setTitle("My Title");

// Sub Title

toolbar.setSubtitle("Sub title");

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

setSupportActionBar(toolbar);

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

// Navigation Icon 要設定在 setSupoortActionBar 才有作用

// 否則會出現 back button

toolbar.setNavigationIcon(R.drawable.ab_android);

这边要留意的是setNavigationIcon需要放在 setSupportActionBar之后才会生效。

菜单部分,需要先在res/menu/menu_main.xml左定义:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<menu 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"

      tools:context=".MainActivity">

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

  <item android:id="@+id/action_edit"

        android:title="@string/action_edit"

        android:orderInCategory="80"

        android:icon="@drawable/ab_edit"

        app:showAsAction="ifRoom" />

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

  <item android:id="@+id/action_share"

        android:title="@string/action_edit"

        android:orderInCategory="90"

        android:icon="@drawable/ab_share"

        app:showAsAction="ifRoom" />

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

  <item android:id="@+id/action_settings"

        android:title="@string/action_settings"

        android:orderInCategory="100"

        app:showAsAction="never"/>

</menu>

再回到MainActivity.java 中加入OnMenuItemClickListener 的监听者:

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;

  }

};

将onMenuItemClick监听者设置给toolbar

1

2

3

4

5

6

setSupportActionBar(toolbar);

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

...

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

// Menu item click 的監聽事件一樣要設定在 setSupportActionBar 才有作用

toolbar.setOnMenuItemClickListener(onMenuItemClick);

和 setNavigationIcon 一样,需要將之设定在 setSupportActionBar 之后才有作用。执行上面的代码便会得到下面的界面。

完完整程序见:toolbar_demo_checkpoint3

5. 总结

在这样的架构设计下,ToolBar直接成了Layout中可以控制的东西,相对于过去的actionbar来说,设计与可操控性大幅提升。

本文上面的解释中用到的完成代码:toolbar demo check point 0 ~ 4,请到Github 取得。

最后再附上一个界面上常用的属性说明图:

这里按照图中从上到下的顺序做个简单的说明:

·         colorPrimaryDark

§  状态栏背景色。

§  在 style 的属性中设置。

·         textColorPrimary

§  App bar 上的标题与更多菜单中的文字颜色。

§  在 style 的属性中设置。

·         App bar 的背景色

§  Actionbar 的背景色设定在 style 中的 colorPrimary。

§  Toolbar 的背景色在layout文件中设置background属性。

·         colorAccent

§  各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。

§  在 style 的属性中设置。

·         colorControlNormal

§  各控制元件的预设颜色。

§  在 style 的属性中设置

·         windowBackground

§  App 的背景色。

§  在 style 的属性中设置

·         navigationBarColor

§  导航栏的背景色,但只能用在 API Level 21 (Android 5) 以上的版本

§  在 style 的属性中设置

最后需要注意的是:使用material主题的时候,必须设定targetSdkVersion = 21,否则界面看起来是模糊的 

转自:http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html


0人推荐
随时随地看视频
慕课网APP