android toolbar排列方式,Android Toolbar详解

Toolbar简介

Toolbar 是 Android 5.0 推出的一个 Material Design 风格的导航控件 ,用来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置；

Toolbar使用

首先我们来看一下Toolbar的效果：

Toolbar效果图

从上图中我们可以看到Toolbar有以下几部分组成：

1、返回按钮(左侧返回icon)

2、标题、子标题

3、溢出菜单(用户icon、设置icon、其他)

4、溢出菜单按钮(+号)

ok接下来我们一步一步来介绍，如何实现这样的Toolbar

Toolbar的基本使用

1、布局中代码

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"/>

2、主题改为Theme.AppCompat.Light.NoActionBar

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

3、activity中的代码

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

setSupportActionBar(toolbar);

这是Toolbar的效果为：

Toolbar效果

接下来我们给Toolbar设置背景色

android:background="@color/colorPrimary"

并设置标题、子标题，并设置标题子标题颜色；

app:title="标题"

app:titleTextColor="@color/colorAccent"

app:subtitle="子标题"

app:subtitleTextColor="@color/white"

整个XML代码为：

android:id="@+id/toolbar"

style="@style/Theme.AppCompat.Light.NoActionBar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="@color/colorPrimary"

app:subtitle="子标题"

app:subtitleTextColor="@color/white"

app:title="标题"

app:titleTextColor="@color/colorAccent">

显示效果为：

Toolbar效果

是不是还是看着很别扭，接下来我们把左侧返回按钮弄出来，首先用系统默认的返回图标

因此，我们在activity中加入以下代码

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

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

显示效果

Toolbar效果

ok，返回按钮我们搞出来了，接下来我们把右侧的溢出菜单搞出来：

首先我们在res的menu目录中创建一个menu资源文件

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/toolbar_user"

android:icon="@mipmap/ico_user"

android:title="用户"

app:showAsAction="never" />

android:id="@+id/toolbar_setting"

android:icon="@mipmap/ico_shezhi"

android:title="设置"

app:showAsAction="never" />

android:id="@+id/toolbar_other"

android:icon="@mipmap/ico_shezhi"

android:title="其他"

app:showAsAction="never" />

然后在activity中添加代码

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.toolbar_menu, menu);

return true;

}

这样我们就创建了右侧的溢出菜单，显示效果如下

Toolbar效果

点击溢出菜单效果

Toolbar效果

那么，如何将溢出菜单的一些菜单按钮显示在Toolbar上呢，这里注意我们在定义menu菜单的时候

android:id="@+id/toolbar_other"

android:icon="@mipmap/ico_shezhi"

android:title="其他"

app:showAsAction="never" />

有个showAsAction属性，showAsAction属性共有三个值：ifRoom、never、always

1.always：总是显示在界面上

2.never：不显示在Toolbar上，只出现溢出菜单中

3.ifRoom：如果有位置就显示在Toolbar上，不然就出现溢出菜单中

故而，如果我们把menu菜单中的 app:showAsAction="always" 属性这样设置的话，就会把该menu按钮显示在toolbar上，我们把其中两个menu的属性改成always后效果如下：

Toolbar效果

好了，到此，Toolbar的所有元素组件都搞出来了，接下来我们接着说如何自定义Toolbar，比如自由设置左侧返回标签的icon，标题子标题的文字大小，溢出菜单的背景字体颜色等；

自定义Toolbar

自由设置返回按钮的icon

只需在xml中设置以下属性即可

app:navigationIcon="@mipmap/goldcattle_arrow_back"

设置溢出菜单icon的颜色

在style中添加如下代码：

@android:color/white

效果图

Toolbar效果图

可以看到，溢出菜单按钮和左侧返回按钮，都变为了白色

设置标题和子标题的字体大小

我们需在style文件中定义

18sp

12sp

并在布局文件中Toolbar下设置

app:subtitleTextAppearance="@style/ToolbarSubTitleSize"

app:titleTextAppearance="@style/ToolbarTitleSize"

效果如下

Toolbar效果

溢出菜单自定义，设置溢出菜单icon自定义，背景，字体颜色等

溢出菜单icon自定义在style中添加如下代码

@mipmap/ico_add

centerInside

溢出菜单字体颜色自定义

@color/white

然后将这两个style引入到Toolbar的style中

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

@android:color/white

@style/OverflowButtonStyle

@style/Overflow_Menu_Text_style

这样就实现了溢出菜单icon的自定义和文字颜色的自定义

溢出菜单背景自定义

@color/background

将该style引入到布局文件Toolbar属性中

app:popupTheme="@style/ToolbarPopupTheme"

设置完以上属性后效果如下

Toolbar效果.png

设置溢出菜单弹出位置

以上效果图看着很别扭，溢出菜单弹出的位置遮住了Toolbar，因此我们可以将溢出菜单弹出到Toolbar下面

定义style属性

false

wrap_content

5dp

@color/background

5dp

0dp

@color/white

并将该属性引入到布局文件中的Toolbar中

app:popupTheme="@style/OverflowMenuStyle"

运行效果如下

Toolbar效果

至此，我们就实现了开头我们Toolbar的效果，Toolbar的各部分如何使用以及自定义Toolbar我们就都介绍完毕了，接下来我们接着说一下各个按钮的事件如何监听触发；

Toolbar各事件监听

左侧返回按钮监听

第一种方式 ：

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

setSupportActionBar(toolbar);

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

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

toolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//finish();

Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();

}

});

第二种方式：

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == android.R.id.home) {

//finish();

Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();

return true;

}

return super.onOptionsItemSelected(item);

}

注意：Toolbar的左侧返回菜单的id是android.R.id.home

如果第一种和第二种同时存在，只第一种方式起作用，两种方式皆可单独使用；

溢出菜单监听

我们在menu中定义Toolbar的menu菜单时定义了每个menu的id，所以我们只需要在onOptionsItemSelected中监听即可，代码如下

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == android.R.id.home) {

Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();

return true;

} else if (item.getItemId() == R.id.toolbar_user) {

Toast.makeText(MainActivity.this, "用户", Toast.LENGTH_SHORT).show();

return true;

} else if (item.getItemId() == R.id.toolbar_setting) {

Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();

return true;

} else if (item.getItemId() == R.id.toolbar_other) {

Toast.makeText(MainActivity.this, "其他", Toast.LENGTH_SHORT).show();

return true;

}

return super.onOptionsItemSelected(item);

}

至此Toolbar的相关知识就介绍到这里了，相信大家看完本篇对Toolbar的使用有了更新的认识，Toolbar使用起来更将得心应手；