MaterialDesign设计-ToolBar使用
2018-01-25 00:22
357 查看
由于ActionBar(Android 3.0推出)使用起来不太方便,且不易于扩展,于是Google在Android 5.0中封装了ToolBar,用于替换ActionBar,ToolBar具有许多优点,如高度可定制性,灵活性,以及具有Material Design风格等。为了兼容低版本(5.0以下版本)系统,我们需要使用v7包的ToolBar。
使用ToolBar前准备
我们需要在gradle中引用support -v7包
ToolBar常用的一些属性
下面开始正式的撸码
以上是xml中的介绍,使用ToolBar,我们需要在代码中去做一些处理,下面开始详细的讲解。
现在左边部分的菜单就这样搞定了,很easy吧!我们再来看看右边的菜单
右边部分的菜单需要我们在res下新建menu文件,然后在创建一个菜单文件。
具体步骤是在 res点鼠标键/new/Android resource directory/resource type下拉选择menu 。这里我们直接使用使用menu名字,然后点确认新建一个menu文件夹
然后我们在menu文件夹下右键/New/Menu resource file创建一个菜单文件,这里我们取名字叫main
然后我们开始对main.xml撸码了。
onCreateOptionsMenu:将main.xml中菜单与我们的ToolBar关联
onOptionsItemSelected:处理添加的菜单点击事件回调,具体代码如下
我们发现除了分享和收藏按钮被显示出来外,其他都放到三分点开的弹窗处了,这是为啥呢?这是因为我们在写main.xml的时候,将showAsAction都设置为ifRoom,顾名思义,就是空间足够就展示出来,不够了就放到弹窗里面去,showAsAction所支持设置的属性如下:
ifRoom:空间足够就展示在ToolBar上
always:总是展示在ToolBar上
never:不展示在ToolBar(展示在弹窗中)
withText:使菜单项和它的图标,菜单文本一起显示。
我们发现最右边三个点的颜色和我们的样式不搭,我们可以修改它的颜色为我们想要的吗?是可以的,我们可以通过在主题中设置
我们还发现,点击最右边三个点的弹窗颜色白底黑字,我们可以修改它的样式吗?答案也是肯定的,记得在属性中列出了一个popupTheme就是设置这个的。
就这样我们将其改成黑底白字了,如果我们要改成其他样式,可以自定义一个主题然后引用即可。关于ToolBar的介绍就先到这里,最后附上今天的demo地址
写的时候忘记的内容,在这里补充一下。
鉴于产品经理大多都是苹果控,可能更多效果是参照ios来做的,于是需要ToolBar的 标题居中,我们仔细看了一下源码,发现ToolBar是继承ViewGroup的,于是我们第一感觉肯定可以把其当做容器来用。
so easy吧,有一点要注意,那就是加进来的标题控件需要添加 android:layout_gravity="center"属性。
使用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" 9f70 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"属性。
相关文章推荐
- MaterialDesign学习篇(三),AppBarLayout、CollapsingToolbarLayout的使用
- MaterialDesign学习篇(二),Toolbar、DrawerLayout的使用
- MaterialDesign,toolbar的使用
- MaterialDesign设计风格之自定义toolbar的简单实现
- VC/MFC 工具栏设计-CToolBar使用
- android 使用Builder设计模式,设计ToolBar
- 使用html和CSS进行网页网站设计 -- 简明步骤
- 在VB中使用IE的 WebBrowser控件改进界面设计
- Toolbar和Drawerlayout的基本使用
- 设计模式应用之使用COMPOSITE模式实现流程(三)
- app后端设计(2)--xmpp的使用(2014.01.14更新)
- 当你使用LINQ做底层时,最好设计一个工厂,不要把LINQ的动作暴露给业务层
- 安装和使用的django的debug_toolbar
- Linux学习笔记(七)-VI的设计思想和使用
- 深入解析iOS应用开发中对设计模式中的桥接模式的使用
- HTML学习笔记——标准网页设计+使用CSS、Javascript
- WPF程序设计指南第24张样式中DataTrigger中使用绑定的例子
- 原理图设置Altium Designer入门使用4--原理图设计1
- C++中智能指针的设计和使用
- rpc使用JUnit模块测试设计的方法及常见问题