Android5.0以后谷歌大力推崇Material Design设计,有意统一之前Android style风格乱象的情况。
Toolbar,这是用来取代过去 actionbar 的控件,而现在于 material design 中也对之有一个统一名称:app bar,在未来的 android app 中,就以 toolbar 这个元件来实作之。
Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 Actionbar 。与 Actionbar 相比,Toolbar 明显要灵活的多。它不像 Actionbar 一样,一定要固定在Activity的顶部,而是可以放到界面的任意位置。除此之外,在设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在官方API文档中都有详细介绍,如:
前面提到 Toolbar 是在 Android 5.0 才开始加上的,Google 为了将这一设计向下兼容,自然也少不了要推出兼容版的 Toolbar 。为此,我们需要在工程中引入 appcompat-v7 的兼容包,使用 android.support.v7.widget.Toolbar 进行开发。
按照效果图,从左到右分别是我们前面提及到的 导航栏图标、App的logo、标题和子标题、自定义控件、以及 ActionMenu 。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="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="wrap_content"
android:background="@color/color_0176da"
toolbar:logo="@mipmap/ic_launcher"
toolbar:navigationIcon="@mipmap/ic_drawer_home"
toolbar:subtitle="子标题"
toolbar:title="标题">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自定义控件" />
android.support.v7.widget.Toolbar>
LinearLayout>
新建base_toolbar_menu.xml(注意在AS中的目录位置),添加action_menu菜单项
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_notification"
android:icon="@mipmap/ic_notifications"
android:title="@string/menu_notifications"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_item1"
android:title="@string/item_01"
app:showAsAction="never" />
<item
android:id="@+id/action_item2"
android:title="@string/item_02"
app:showAsAction="never" />
menu>
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;
/**
* Toolbar的基本使用
*/
public class ToolBarBaseUseAct extends BaseActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tool_bar_base_use);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
toolbar.setTitle("Title");//设置主标题
toolbar.setSubtitle("Subtitle");//设置子标题
toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_search:
Toast.makeText(ToolBarBaseUseAct.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
break;
case R.id.action_notification:
Toast.makeText(ToolBarBaseUseAct.this, R.string.menu_notifications, Toast.LENGTH_SHORT).show();
break;
case R.id.action_item1:
Toast.makeText(ToolBarBaseUseAct.this, R.string.item_01, Toast.LENGTH_SHORT).show();
break;
case R.id.action_item2:
Toast.makeText(ToolBarBaseUseAct.this, R.string.item_02, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return true;
}
});
}
}
代码到此已经完成了 Toolbar 的基本使用,注意,是基本使用而已!!!!!下面有几个代码里面需要注意的地方:
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
系统默设置了ActionMenu每个Item的文字颜色和大小,系统下默认效果就是下面这样的
要改变一下item文字颜色:
一: 在values/styles.xml中自定义一个Theme,并设置 android:textColorPrimary 属性
<style name="Theme.ToolBar.Base.ItemTextColor" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">@color/color_red
style>
二: toolbar设置popupTheme
有网友说如果把自定义控件换成Button,你会发现Button默认的文字颜色也变成了红色,我在4.4.2的模拟器上并没有发现此问题,暂且记录下。
如果你想要修改 ActionMenu Item 的文字大小,也可以在theme中设置加上如下设置:
<item name="android:textSize">20spitem>
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class ToolBarZhiHuAct extends BaseActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tool_bar_zhi_hu);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);
toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
toolbar.setTitle(R.string.home_page);
toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
}
}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_0176da"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_0176da"
android:theme="@style/Theme.ToolBar.ZhiHu">
android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:background="@mipmap/ic_zhihu_logo" />
RelativeLayout>
LinearLayout>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_notification"
android:icon="@mipmap/ic_notifications"
android:title="@string/menu_notifications"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/menu_settings"
app:showAsAction="never" />
<item
android:id="@+id/action_about"
android:orderInCategory="101"
android:title="@string/menu_about_us"
app:showAsAction="never" />
menu>
values/styles.xml
<style name="Theme.ToolBar.ZhiHu" parent="AppTheme">
--引用设置白色三点的样式-->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu
style>
<style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@mipmap/ic_menu_more_overflow
style>
values-v19/styles.xml
<style name="Theme.ToolBar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">trueitem>
<item name="android:windowTranslucentNavigation">trueitem>
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu
style>
<style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@mipmap/ic_menu_more_overflow
style>
values-v21/styles.xml
name</span>=<span class="hljs-string">"Theme.ToolBar.ZhiHu"</span> parent=<span class="hljs-string">"Theme.AppCompat.Light.NoActionBar"</span>>
<!<span class="hljs-comment">-- Customize your theme here. --></span>
<<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:windowTranslucentStatus"</span>><span class="hljs-constant">false</span></<span class="hljs-property">item</span>>
<<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:windowTranslucentNavigation"</span>><span class="hljs-constant">true</span></<span class="hljs-property">item</span>>
<<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:statusBarColor"</span>>@color/color_0176da</<span class="hljs-property">item</span>>
<<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"actionOverflowButtonStyle"</span>>@style/ActionButton.Overflow.ZhiHu</<span class="hljs-property">item</span>>
--替换右上角 系统默认的黑色的三个点的效果,改为引用的图片的白色-->
name</span>=<span class="hljs-string">"ActionButton.Overflow.ZhiHu"</span> parent=<span class="hljs-string">"android:style/Widget.Holo.Light.ActionButton.Overflow"</span>>
<<span class="hljs-property">item</span> <span class="hljs-property">name</span>=<span class="hljs-string">"android:src"</span>>@mipmap/ic_menu_more_overflow</<span class="hljs-property">item</span>>
至此 全部的操作就完成了,运行一下,还不错….
参考文章: http://www.jianshu.com/p/79604c3ddcae 感谢D_clock