Toolbar

2017-10-16  本文已影响0人  唐九十九藏
public class Toolbar  extends  ViewGroup

java.lang.Object
 ↳android.view.View
   ↳android.view.ViewGroup
     ↳android.support.v7.widget.Toolbar

该控件直接继承自ViewGroup,所以是一个封装好的容器控件。

参考博客
ToolBar详解

ToolBar的前世今生?(它是什么?它为了什么而出生,它怎么使用?)

Toolbar的出生
2014年,在Google I/O大会上,Google推出了Android 5.0的同时,提出一个全新的设计APP规范(Material Design),并在Android5.0的基础上提供了这些API。
同时,为了兼容Android5.0以下的Android系统,Google随后就发布了一个兼容包:

//可通过 gradle如下引入
compile 'com.android.support:design:22.2.0'
//注意:这里面的22.2.0是适配编译SDK为API22的系统

而我们今天的主角ToolBar就是出生在Material Design中,也由此,在Android原生API和Google后来提供的兼容包中分别有一个ToolBar。

它为什么而生?
在toolbar出现之前,Android提供的顶部栏称为actionbar,可能是受限于时代原因,Google在设计ActionBar的时候没有考虑到如下纷繁杂乱的Android生态,以至于ActionBar已经不能满足现今的开发需求(因为其可定制性太低),所以目前大部分的APP都是抛弃ActionBar而使用自己定义的View来作为顶部栏。
所以,为了统一Android生态中APP的风格,也为了方便开发者,Google在2014年的Android5.0上提出了Material Design概念,并在其中提供了一个全新的控件ToolBar
到现在我们就明白了,ToolBar拥有ActionBar的所有功能,并且可灵活设置,同时,再配合Material Design中的其他控件,可以和轻易的设计出绚丽的特技。
总结:ToolBar就是为了更加灵活和方便的定制APP头部而出生的,而它的出生,也代表了ActionBar的抛弃。

它怎么使用?
从前面我们知道,有两个地方提供了ToolBar这个控件。
一个位于Android的原生API中,即不用引入任何类库,就直接可以在代码中使用,但由于原生的ToolBar只能应用于Android5.0以上的手机系统,而目前(2017年10月17日),Android 4系列系统还是有一定市场的,所以,这个控件不建议使用。
而另一个位于Google提供的兼容包中(兼容版引入见上面),该兼容包能兼容到Android2.1,所以,我们应该使用位于兼容包中的ToolBar。
而以下,我都以兼容包中的ToolBar进行讲解(其实两者提供的功能是一模一样的)


ToolBar的组成
大家可以回到开头的继承结构去看看,我们发现ToolBar是直接继承于ViewGroup的,而ViewGroup是什么?他是一个容器控件,而继承于ViewGroup的ToolBar说白了也是一个容器控件,并且这个ToolBar容器控件内部已经封装好了一些子View,只要你提供了相应的值,包含在其中的子View就会显示出来。
现在,我们把ToolBar里面隐藏的控件全部放出来溜溜,如下图所示:

借用的图
首先,在布局文件中定义,在XML中可以设置ToolBar的背景,标题,子标题等。
还可以设置导航栏图标。

<android.support.v7.widget.Toolbar
        xmlns:toolbar="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#960"
        toolbar:title="ToolBar"
        toolbar:subtitle="SubToolBar"
        toolbar:navigationIcon="@mipmap/ad"
        >
</android.support.v7.widget.Toolbar>

*****************
但是我发现,在XML中有些属性没法设置,比如LOGO。
所以,应该在Java代码中设置,而且,只要能在XML中设置的属性,在XML中都能设置,如下:
*****************
  Toolbar bar = (Toolbar)findViewById(R.id.toolbar);
  bar.setTitleTextColor(R.color.colorPrimary);
  bar.setSubtitleTextColor(R.color.colorPrimary);
  bar.setLogo(R.mipmap.ic_launcher);
  bar.inflateMenu(R.menu.toolbar_menu);
  setSupportActionBar(bar);

******************
通过ID可以获取到ToolBar,就可以在代码中进行设置了。
同时,如果在Java没有发现setSupportActionBar(bar);这个方法,记得要继承AppCompatActivity。
*****************
上面设置了之后,还有最后一步,是在主题中设置设置一个取消actionBar的主题。
*****************
<style name="Theme.AppCompat.Light.NoActionBar">
         <!--取消actionBar-->
        <item name="windowActionBar">false</item>
        <!--取消window头部-->
        <item name="windowNoTitle">true</item>
</style>
****************
到此为止,你就应该能在界面上看到ToolBar了。

PS:如上面的图片,我们在ToolBar可以设置五个部分的View。
PS:比如logo,TitleTextColor等,知道的朋友请留言请教。
QQ图片20171018220256.jpg

首先,确保正确的引入兼容包。

如下所示,在布局文件中使用:

待更新。。。

  1. 在布局文件中使用ToolBar
上一篇 下一篇

猜你喜欢

热点阅读