由于ActionBar(Android 3.0推出)使用起来不太方便,且不易于扩展,于是Google在Android 5.0中封装了ToolBar,用于替换ActionBar,ToolBar具有许多优点,如高度可定制性,灵活性,以及具有Material Design风格等。为了兼容低版本(5.0以下版本)系统,我们需要使用v7包的ToolBar。
使用ToolBar前准备
我们需要在gradle中引用support -v7包
implementation 'com.android.support:appcompat-v7:27.0.2'
需要将app主题设计为NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
ToolBar常用的一些属性
title | 主标题 |
subtitle | 副标题 |
titleTextColor | 主标题颜色 |
subtitleTextColor | 副标题颜色 |
android:minHeight | ToolBar最小高度 |
logo | 标题前的logo |
logoDescription | 标题前的logo的描述 |
navigationIcon | 最左侧的菜单 |
navigationContentDescription | 最左侧的菜单的描述 |
popupTheme | 设置最右侧(三个点)弹出的menu对应的主题 |
titleMarginStart | title距开始位置的距离 |
titleMarginEnd | title距结束位置的距离 |
titleMarginTop | title距顶部位置的距离 |
titleMarginBottom | title距底部位置的距离 |
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:logo="@mipmap/ic_logo"
app:logoDescription="我是新闻的logo"
app:navigationIcon="@mipmap/ic_menu"
app:subtitle="推送你喜欢的"
app:subtitleTextColor="#FFF"
app:title="新闻"
app:titleTextColor="#FFFFFF"/>
然后运行得到的效果
以上是xml中的介绍,使用ToolBar,我们需要在代码中去做一些处理,下面开始详细的讲解。
//获取到ToolBar的id
mToolBar = findViewById(R.id.tootbar);
//设置ToolBar
setSupportActionBar(mToolBar);
//设置NavigationIcon的监听事件
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "navigationIcon被点击了", Toast.LENGTH_SHORT).show();
}
});
现在左边部分的菜单就这样搞定了,很easy吧!我们再来看看右边的菜单
右边部分的菜单需要我们在res下新建menu文件,然后在创建一个菜单文件。
具体步骤是在 res点鼠标键/new/Android resource directory/resource type下拉选择menu 。这里我们直接使用使用menu名字,然后点确认新建一个menu文件夹
然后我们在menu文件夹下右键/New/Menu resource file创建一个菜单文件,这里我们取名字叫main
然后我们开始对main.xml撸码了。
<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="com.ricky.materialdesign.slidingmenu.drawerlayout.MainActivity">
<item
android:id="@+id/to_share"
android:icon="@mipmap/ic_share"
android:orderInCategory="100"
android:title="分享"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/to_collect"
android:icon="@mipmap/ic_collect"
android:orderInCategory="100"
android:title="收藏"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/to_sweep"
android:icon="@mipmap/ic_sweep"
android:orderInCategory="100"
android:title="扫一扫"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/to_find"
android:icon="@mipmap/ic_find"
android:orderInCategory="100"
android:title="发现"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/to_instruction"
android:icon="@mipmap/ic_instruction"
android:orderInCategory="100"
android:title="说明"
app:showAsAction="ifRoom"/>
</menu>
到这里就可以运行了吗?no,当然没那么快,眼睛尖的朋友可能已经看到了,我们还没有和代码关联呢,我们需要重写两个方法
onCreateOptionsMenu:将main.xml中菜单与我们的ToolBar关联
onOptionsItemSelected:处理添加的菜单点击事件回调,具体代码如下
private void showToast(String msg) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.to_share:
showToast("您点击了分享");
break;
case R.id.to_collect:
showToast("您点击了收藏");
break;
case R.id.to_sweep:
showToast("您点击了扫一扫");
break;
case R.id.to_find:
showToast("您点击了发现");
break;
case R.id.to_instruction:
showToast("您点击了说明");
break;
}
return true;
}
运行效果如下
我们发现除了分享和收藏按钮被显示出来外,其他都放到三分点开的弹窗处了,这是为啥呢?这是因为我们在写main.xml的时候,将showAsAction都设置为ifRoom,顾名思义,就是空间足够就展示出来,不够了就放到弹窗里面去,showAsAction所支持设置的属性如下:
ifRoom:空间足够就展示在ToolBar上
always:总是展示在ToolBar上
never:不展示在ToolBar(展示在弹窗中)
withText:使菜单项和它的图标,菜单文本一起显示。
app:showAsAction="ifRoom"
我们发现最右边三个点的颜色和我们的样式不搭,我们可以修改它的颜色为我们想要的吗?是可以的,我们可以通过在主题中设置
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!--通过这个可以设置ToolBar最右边三个点的颜色-->
<item name="android:textColorSecondary">#FFFFFF</item>
</style>
我们还发现,点击最右边三个点的弹窗颜色白底黑字,我们可以修改它的样式吗?答案也是肯定的,记得在属性中列出了一个popupTheme就是设置这个的。
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
就这样我们将其改成黑底白字了,如果我们要改成其他样式,可以自定义一个主题然后引用即可。关于ToolBar的介绍就先到这里,最后附上今天的demo地址
写的时候忘记的内容,在这里补充一下。
鉴于产品经理大多都是苹果控,可能更多效果是参照ios来做的,于是需要ToolBar的 标题居中,我们仔细看了一下源码,发现ToolBar是继承ViewGroup的,于是我们第一感觉肯定可以把其当做容器来用。
<android.support.v7.widget.Toolbar
android:id="@+id/login_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="@drawable/ic_back_normal">
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:singleLine="true"
android:text="登录"
android:textColor="#ffffff"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
运行效果如下:
so easy吧,有一点要注意,那就是加进来的标题控件需要添加 android:layout_gravity="center"属性。