潍坊百度网站排名,今晚12点上海又要封控了吗,无锡网站建设品牌大全,微信网站开发之前要学会什么ToolBar简介 ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar#xff0c;由于其高度的可定制性、灵活性、具有Material Design风格等优点#xff0c;越来越多的应用也用上了ToolBar#xff0c;比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑… ToolBar简介 ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar由于其高度的可定制性、灵活性、具有Material Design风格等优点越来越多的应用也用上了ToolBar比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑到仍有一部分用户的手机版本号低于5.0所以ToolBar也放进了support v7包内使得低版本的系统也能使用上ToolBar。本文将使用support v7支持包的ToolBar来进行讲解包括其基本用法、样式定制等知识点。 ToolBar的基本使用 引入support v7支持包 在你项目的build.gradle内输入如下代码即能引入支持包该支持包内有能向下兼容的ToolBar: dependencies { compile fileTree(dir: libs, include: [*.jar]) compile com.android.support:appcompat-v7:23.1.1 } 更改主题 为了能够正常使用ToolBar我们需要隐藏原来的ActionBar这个可以在主题中修改在values/styles.xml中做出如下修改 style nameAppTheme parentTheme.AppCompat.Light.NoActionBar /style 继承了Theme.Appcompat.Light.NoActionBar主题这里提一下这个Theme.AppCompat是支持包内的主题对应着5.0版本的Theme.Material主题。然后在manifest文件中引用这个主题。 在布局文件中创建这个控件activity_main.xml文件中代码如下所示 FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid.support.v7.widget.Toolbarandroid:idid/toolbar android:layout_widthwrap_content android:layout_heightwrap_content TextView android:layout_widthmatch_parent android:layout_heightwrap_content android:text标题 android:textSize20sp/ /android.support.v7.widget.Toolbar /FrameLayout 在上面创建了android.support.v7.widget.Toolbar同时我们在内部放了一个TextView这是与ActionBar最大的不同因为ToolBar实际上是一个ViewGroup支持在其内部放入子View。ok我们运行程序得到如下结果 结果1.png 可以看出ToolBar正常显示当然了这只是最简单的用法接下来我们逐步添加内容、样式使它看起开更加美功能更加完善。 ToolBar的完善 一、首先我们考虑改变ToolBar的颜色 要想改变toolbar的颜色很简单直接在布局文件中添加一个backgroud属性指定颜色就可以了但是为了全局考虑我们可以这样在values/styles.xml文件中做出如下修改 resourcesstyle nameAppTheme parentTheme.AppCompat.Light.NoActionBar !-- Customize your theme here. -- item namecolorPrimary#2e8abb/item !--浅蓝色-- item namecolorPrimaryDark#3A5FCD/item !--深蓝色-- /style /resources 然后在布局文件中添加如下属性 android:background?attr/colorPrimary 这样就能方便对每一个toolbar引用同样的颜色了我们先看看现在的效果是怎样的 结果2.png 可以看到颜色已经改变同时我们注意到顶部状态栏的颜色也变成了深蓝色这是因为添加了colorPrimaryDark的属性使得顶部状态栏随之改变利用这一特性我们可以轻松实现“状态栏沉浸”的效果了。当然这只适用于Android 5.0以上如果在低版本则这个属性无效。这里再附上一张图图片来自http://blog.csdn.net/bbld_/article/details/41439715 样式说明 根据图中的说明我们可以轻松地在styles.xml文件中定制我们的样式如果想要改变toolbar的title、subtitle以及menu中文字的颜色可以利用“textColorPrimary”属性等。 二、添加title、subtitle、logo、导航栏图标 在MainActivity文件先获取控件的实例接着通过一系列的set方法即可设置代码如下 public class MainActivity extends AppCompatActivity { private Toolbar toolbar; Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle(Title); toolbar.setSubtitle(SubTitle); toolbar.setLogo(R.mipmap.ic_launcher); //设置导航图标要在setSupportActionBar方法之后 setSupportActionBar(toolbar); toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); } } 结果如下 结果3.png 如果你想修改标题和子标题的字体大小、颜色等可以调用 setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 这些API。当然这些设置都是支持在xml布局中直接添加的但是用的不是android:命名空间而是自定义命名空间如下所示 FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolbarhttp://schemas.android.com/apk/res-auto ... android.support.v7.widget.Toolbar ... toolbar:logomipmap/ic_launcher toolbar:titleTitle toolbar:subtitleSub Title toolbar:titleTextColor#ffffff /android.support.v7.widget.Toolbar /FrameLayout 三、添加菜单选项图标及点击事件 1.添加菜单选项图标 一般导航条在其右侧都会有菜单选项当然ToolBar也是支持自定义菜单的首先我们在菜单文件中修改如下res/menu/menu_main.xml: menu xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-auto xmlns:toolshttp://schemas.android.com/tools tools:context.MainActivity item android:idid/action_search android:titleSearch android:iconmipmap/ic_search app:showAsActionifRoom/ item android:idid/action_notifications android:titlenotifications android:iconmipmap/ic_notifications app:showAsActionifRoom/ item android:idid/action_settings android:titlestring/action_settings android:orderInCategory100 android:iconmipmap/ic_launcher app:showAsActionnever/ /menu 这里用了这样一个熟悉app:showAsActionifRoom/neverapp是自定义的命名空间因为我们的activity继承的是AppCompatActivity是support v7包的并不是原生sdk内部的因此不能使用android:showAsAction否则会报错。然后ifRoom表示有空间则显示never表示从不显示而是会通过overflowwindow显示。接着我们在Activity中要重写onCreateOptionsMenu()方法把这个菜单加载进去 Overridepublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } 2.添加点击事件 菜单有了我们要为菜单添加点击事件这样菜单才会有实际用途,添加点击事件也很方便可以这样操作 //设置导航图标、添加菜单点击事件要在setSupportActionBar方法之后setSupportActionBar(toolbar);toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {Overridepublic boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.action_search: Toast.makeText(MainActivity.this, Search !, Toast.LENGTH_SHORT).show(); break; case R.id.action_notifications: Toast.makeText(MainActivity.this, Notificationa !, Toast.LENGTH_SHORT).show(); break; case R.id.action_settings: Toast.makeText(MainActivity.this, Settings !, Toast.LENGTH_SHORT).show(); break; } return true; } }); 结果如下 结果5.png 可以看到菜单选项图标正常显示以及点击事件都正常触发但是还有一点瑕疵的地方那就是右上角的三个圆点是黑色的与图标格格不入有没有什么办法改变它呢答案是有的可以通过添加样式改变如下所示 resourcesstyle nameAppTheme parentTheme.AppCompat.Light.NoActionBar ... item nameandroid:textColorSecondary#ffffff/item /style /resources android:textColorSecondary属性对应的就是右上角三个圆点的颜色了。改变之后将会变成你要的颜色。 四、其他样式修改 修改Toolbar popup menu样式 我们先点击右上角的三个点会弹出一个popup menu如下所示 结果6.png 可以看到右上角的popup menu是白底黑字那么有没有什么办法改变它的背景颜色使菜单显示为黑底白字呢呢答案是有的我们可以这样设置首先在styles.xml文件中新建一个主题 !-- toolbar弹出菜单样式 --
style nameToolbarPopupTheme parentstyle/ThemeOverlay.AppCompat.Dark item nameandroid:colorBackground#000000/item /style 可以看到这个主题的parent是直接继承自ThemeOverlay.AppCompat.Dark是支持包的一个主题并且我们在内部声明了“android:colorBackground”这个属性我们只要更改这个属性就能变更菜单的背景颜色了。接下来我们在布局文件中引入这个主题这也很简单为toolbar添加额外的属性如下 toolbar:popupThemestyle/ToolbarPopupTheme 这样改几行代码即可修改popup menu的背景颜色了如下面所示 结果7.png 修改Toolbar popup menu 弹出位置 我们可以看到popup menu的位置是过于偏上的我们还可以修改它的位置使它处于Toolbar之下这样看起来可能更美观修改styles.xml文件如下 style nameToolbarPopupTheme parentstyle/ThemeOverlay.AppCompat.Dark item nameandroid:colorBackground#000000/item item nameactionOverflowMenuStylestyle/OverflowMenuStyle/item !--新增一个item用于控制menu-- /style style nameOverflowMenuStyle parentWidget.AppCompat.Light.PopupMenu.Overflow item nameoverlapAnchorfalse/item !--把该属性改为false即可使menu位置位于toolbar之下-- /style 效果如下图 结果8.png 那么到目前为止对于toolbar的相关使用意见讲述完毕可以看出toolbar的灵活性很高能自定义很多样式我们平常开发也会遇到各种不同的样式因此toolbar用于取代actionbar是非常合适的。以后如果还有遇到别的样式我也会分享出来谢谢。 作者陈育链接http://www.jianshu.com/p/ae0013a4f71a來源简书著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。
