Android Toolbar的基础使用

第一步

将打算使用Toolbar的Activity继承AppCompatActivity。为什么要让Activity继承这个类呢?我们来看下官方文档对AppCompatActivity的介绍:You can add an ActionBar to your activity when running on API level 7 or higher by extending this class for your activity and setting the activity theme to Theme.AppCompat or a similar theme.就是说,我们可以通过继承AppCompatActivity类和设置Theme.AppCompat主题,来使我们可以添加一个ActionBar。

public class MainActivity extends AppCompatActivity {
      @Overrideprotected 
      void onCreate(Bundle savedInstanceState) {
            ...
      }
}

第二步

设置Theme.AppCompat主题。Theme.AppCompat主题到底代表这什么呢,让我们来看看Theme.AppCompat的官方文档:Themes in the “Theme.AppCompat” family will contain an action bar by default. 就是说,”Theme.AppCompat”系列的主题都会默认包含一个ActionBar。”Theme.AppCompat”主题有两个子主题,我们会用到:

  • “Theme.AppCompat.Light.NoActionBar”主题,当设置为这个主题时,Activity将没有默认的Actionbar。源代码如下
    <style name="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
  • “Theme.AppCompat.Light.NoActionBar”主题,这个主题Activity也没有Action Bar,同时Activity背景变成了深色。
    <style name="Theme.AppCompat.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

当然我们并不是直接使用系统提供的Theme,而是继承某个Theme,进行一定程度的自定义。我们在styles.xml写下如下代码:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!--colorPrimary主要负责的是App Bar的背景颜色 -->
        <item name="colorPrimary">@color/colorPrimary</item>

        <!--colorPrimaryDark主要负责的是状态栏status bar的背景颜色 -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <!--colorAccent主要负责的是某些选择控件的背景颜色 -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

第三步

将刚刚自定义的Theme,在menifest.xml文件中的Application标签中声明,也可以在Activity标签中声明;

<menifest...>
    ...
    <Application
          ...
          android:theme="@style/Apptheme">
    ...
    </Application>
</menifest>

第四步

在Activity的布局文件中添加Toolbar

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        />

?attr/actionBarsize 是指使用Theme中该属性actionBarSize的值。

第五步

在Java代码中添加Toolbar,并且可以通过Java语句添加App图标,导航图标,主标题,副标题,自定义内容等等。可以通过查阅Toolbar官方文档来深入学习。下面的代码是位于该Activity的onCreate()方法中。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.mipmap.ic_launcher);
toolbar.setTitle("我是主标题");
toolbar.setSubtitle("我是副标题");
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
toolbar.inflateMenu(R.menu.menu_main);

第六步

添加Toolbar上的菜单。首先在res/menu文件夹中添加menu_main.xml文件,menu_main.xml代码如下:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    >

    <item   android:id="@+id/action_edit"
        android:title="编辑"
        android:orderInCategory="80"
        android:icon="@drawable/ic_menu_home"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_setting"
        android:title="分享"
        android:orderInCategory="90"
        app:showAsAction="never"/>

    <item
        android:id="@+id/action_share"
        android:title="设置"
        android:orderInCategory="100"
        app:showAsAction="never"/>
</menu>

然后在Java代码中将其添加到toolbar中,并为toolbar添加点击事件,下面的代码也在Activity的onCreate()方法中。

        onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                String msg = "";
                switch (item.getItemId()){
                    case R.id.action_edit:
                        msg += "edit";
                        break;
                    case R.id.action_setting:
                        msg += "setting";
                        break;
                    case R.id.action_share:
                        msg += "share";
                        break;
                }
                if (!msg.equals("")){
                    Toast.makeText(MainActivity.this,msg,Toast.LENGTH_LONG).show();
                }
                return true;
            }
        };

        toolbar.setOnMenuItemClickListener(onMenuItemClickListener);

到此,Toolbar的基本功能就完成了。下面是一些零碎的注意事项。

颜色设置

  • 设置状态栏status bar的颜色
<item name="colorPrimaryDark">#000000</item>

或者在布局文件中设置Toolbar的背景颜色

  • 设置App bar上的主标题的颜色,overflow menu选项的字体颜色
<item name="android:textColorPrimary">@android:color/holo_red_light</item>

注意textColorPrimary这个属性除了设置主标题的颜色外,还设置了overflow menu中选项的字体颜色。除了这个方法,还可以在toolbar的布局文件中设置。这个方法只会设置主标题的颜色。所以,可以利用这两个方法,现在textColorPrimary中设置overflow menu选项字体颜色,再用app:titleTextColor覆盖主标题的颜色。注意:是”app:” 不是”android:”。

xmlns:app="http://schemas.android.com/apk/res-auto"
...
app:titleTextColor="@android:color/white"
  • 设置App bar上的副标题的颜色
<item name="android:textColorSecondary">#000000</item>

或者在布局文件中

app:subtitleTextColor="@android:color/black"

其中第二种会覆盖第一中方法。注意:是”app:” 不是”android:”。

  • 设置控制元件(switch等按钮)被选定或者选择的颜色
<item name="android:colorAccent">#000000</item>
  • 设置app的背景色
<item name="android:windowBackground">#000000</item>
  • 设置各控制元件(switch等)的默认颜色,以及overflow menu按钮(三个点)的颜色
<item name="colorControlNormal">#000000</item>
  • 设置导航栏的背景颜色,只在Android 5.0后有效
<item name="navigationBarColor">#000000</item>
  • 修改overflow menu中的选项的文字大小,(但是也会Activity中的TextView中的文字的大小,不过可以在布局文件中更改)
<item name="android:textSize">50sp</item>

最后

  • 这只是Toolbar的基本使用,还有很多高阶的使用,比如和CoordinatorLayout在一起的动画效果等等,还要继续学习。
  • Toolbar在Java代码和XML文字中还有更多设置,可以通过查阅Toolbar官方文档来深入学习。

主要参考文章:

    原文作者:吃葡萄皮不吐葡萄
    原文地址: https://www.jianshu.com/p/34cd4da68320
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞