Toolbar的详细介绍和自定义Toolbar
在此总结一下，Android Toolbar 控件的使用方法，争取总结的系统全面些。以前也只是停留在一些基本简单的用法，并且也不系统。但愿爱学习的你能经过这篇文章，有所收获！java
Toolbar 的基本用法
经常使用的方法
xml中的设置：android
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:navigationIcon="@drawable/ic_back_white_24dp"
app:title="标题"
app:titleTextColor="@color/white">
</android.support.v7.widget.Toolbar>
若是你不在xml中设置参数的话，代码中的设置:api
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("标题");
toolbar.setTitleTextColor(Color.WHITE);
toolbar.setNavigationIcon(R.drawable.ic_back_white_24dp);
//点击左边返回按钮监听事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
因为比较简单，效果图这里也不在贴出啦。app
全面但包括不太经常使用的用法
<!-- navigationIcon 左边返回箭头图标
navigationContentDescription 目前还不知道其做用
titleMarginStart 标题距离(开始)左边的距离
-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:logo="@mipmap/ic_launcher"
app:navigationContentDescription=""
app:navigationIcon="@drawable/ic_back_white_24dp"
app:subtitle="子标题"
app:subtitleTextColor="@color/white"
app:title="标题"
app:titleMarginStart="90dp"
app:titleTextColor="@color/white">
一样若是不在xml中设置参数的话，代码中的设置:
这里就不在贴出代码啦，设置的时候，先敲打出xml配置中的关键单词或首字母，就会自动提示的。大部分在xml有的属性，代码中均可以设置ide
效果图：
布局
注意事项：
1：若是你添加了这行代码 setSupportActionBar(toolbar); 那么 toolbar.setNavigationOnClickListener监听方法，要放到其后面，不然点击事件，监听不到的。若是你用不到ActionBar的一些特性的话，建议setSupportActionBar(toolbar); 这行代码不用添加了。学习
若是你想修改主标题和子标题的文字大小，你可经过以下方式：
首先定义一个style：测试
<!--主标题-->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#f0f0</item>
<item name="android:textSize">15sp</item>
</style>
<!--子标题-->
<style name="ToolbarSubtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textColor">#f0f0</item>
<item name="android:textSize">10sp</item>
</style>
而后：字体
<!-- app:titleTextAppearance="@style/ToolbarTitle"-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:logo="@mipmap/ic_launcher"
app:navigationContentDescription=""
app:navigationIcon="@drawable/ic_back_white_24dp"
app:subtitle="子标题"
app:subtitleTextColor="@color/white"
app:title="标题"
app:titleMarginStart="90dp"
app:titleTextAppearance="@style/ToolbarTitle"
app:titleTextColor="@color/white">
效果图这里不在贴出了，经过app:titleTextAppearance=”@style/ToolbarTitle”方法的设置，就能修改标题字体的大小，固然文字颜色也能够修改。ui
到这里，你可能要问了，若是，我想要标题居中，怎么办呢？查看api，toolbar没有使其居中的方法，也就提供了使其距左右，上下边距大小的方法。不过不用担忧，这里仍是有办法的。看以下代码：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="@color/white"
android:textSize="22sp" />
</android.support.v7.widget.Toolbar>
效果图：
注意： 此时 TextView 控件的宽和高都是自适应大小，java 代码中此行代码setSupportActionBar(toolbar);就不要添加了，不然就会显示不正常。若是你非要添加setSupportActionBar(toolbar);这行代码的话，TextView 控件的宽要用match_parent属性。这里再次建议setSupportActionBar(toolbar);这行代码就不要点添加了。
至于它的做用，在此作一下简单的说明吧：
1）在Toolbar这个控件出现以前，其实咱们也能够经过 ActionBar actionBar = getSupportActionBar(); 方法获取到acitonbar，（前提你的activity主题theme，是采用的带actionbar的主题，若是你采用这样的主题android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,显然是不行的）以后你就能够采用诸以下面的方面来操做actionbar啦。
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle("主标题");
......
} else {
Log.i(TAG, "onCreate: actionBar is null");
}
可是，原生自带的ActionBar设置的灵活性，仍是有限，所以Toolbar 这个控件，也就应运而生啦！此时，有的小伙伴说了，我虽然使用了Toolbar来代替ActionBar，可是我还想使用ActionBar的一些特性怎么办呢？这个时候 setSupportActionBar(toolbar);就发挥其做用啦。添加这行代码，你的toolbar能够说也就具备了ActionBar的相关属性了。好啦，到此setSupportActionBar(toolbar) 的做用也讲完了。若是你还不太明白的话，能够参考一下篇文章：
ActionBar和Toolbar的基础使用
结合menu配置文件的用法。
这里先看一下效果图：
首先在menu文件夹中，建立名为 menu.xml 文件（文件名随意的）：
<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="@drawable/ic_search"
android:title="Search"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_delete_white_24dp"
android:title="notifications"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
</menu>
而后在代码中这样加载该menu文件便可：
toolbar.inflateMenu(R.menu.menu);
最后运行代码，就是上图的效果。
在这里，app:showAsAction 属性仍是颇有必要介绍一下滴。
app:showAsAction 有如下三个属性：
- ifRoom 表示在屏幕空间足够的状况下显示在Toolbar中，不够的话就显示在菜单中
- never 表示永远不显示在Toolbar中，而是一直显示在菜单中
- always 表示永远显示在Toolbar中，若是屏幕空间不够则不显示
注意:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。
那若是设置了ifRoom 属性以后，既然只显示图标不显示文字，那还设置 android:title=”Search” 文字干吗呢?若是你设置了以后，虽然不显示，可是你长按相应按钮后，就会吐司相应文字内容的。
细心的你可能发现还有些不足的地方，就是上图的点击菜单选项时，弹出的菜单位置有点太靠上啦，能不能设置呢，还有菜单的背景和文字颜色能不能设置呢？答案固然是能够的！
首先设置好样式：
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
<!--<item name="android:colorBackground">#000000</item>--> <!--这里能够改变菜单的背景色-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item> <!--把该属性改成false便可使menu位置位于toolbar之下-->
</style>
而后直接在这里引用就能够了： app:popupTheme=”@style/ToolbarPopupTheme”
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:popupTheme="@style/ToolbarPopupTheme">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="@color/white"
android:textSize="22sp" />
</android.support.v7.widget.Toolbar>
效果图：
与AppBarLayout结合的使用
（1）： app:layout_scrollFlags=”scroll”
xml代码：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@color/colorAccent"
app:layout_scrollFlags="scroll"
app:popupTheme="@style/ToolbarPopupTheme">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="@string/large_text" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
首先注意最外层：包裹了一层 android.support.design.widget.CoordinatorLayout 布局，那CoordinatorLayout 布局是什么的，咱们能够理解为它是增强版的FramLayout。而后注意：Toolbar 的新添加的这条属性 app:layout_scrollFlags=”scroll” 。最后看一看效果图：
PS：对于 scroll 属性，网上也有说的比较专业的，不过我认为从产生的效果角度去分析的话，那就是：往上滑动就不说了，往下滑动就是当下面的滚动布局滑动到顶端时，标题栏toolbar才会滑出来。该属性实用性通常吧。
（2）：app:layout_scrollFlags=”scroll|enterAlways”
scroll 与 enterAlways 结合产生的效果图以下：
PS：咱们仍是从产生的效果角度去分析的：往下滑动时，，标题栏 toolbar 会优先滑出来，而后滚动布局才开始滑动。就像该单词的意思同样：老是在。也就是只要添加了该属性值，下滑时 toolbar 老是优先滑出来。该属性比较实用。
（3）： app:layout_scrollFlags=”scroll|enterAlways|snap”
在以上基础上，在与 snap 结合所产生的效果图以下：
PS：仍是从产生的效果角度去分析的：不论是往下或者往上滑动时，，标题栏 toolbar 首先仍是和（2）中同样的，不过有个细微的不一样，toolbar会根据当前的滚动距离，自动选择是隐藏仍是显示。该属性实用性也通常。
（4）： app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”
scroll 与 enterAlways 与 exitUntilCollapsed 结合所产的效果图以下：
注意此时Toolbar的布局有些许改变（改变后的）：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:minHeight="40dp"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
app:popupTheme="@style/ToolbarPopupTheme">
</android.support.v7.widget.Toolbar>
咱们给Toolbar 设置了一个最小高度 android:minHeight=”40dp”，而后又把正常高度改变了，并随意改为了100dp。
PS：仍是从产生的效果角度去分析的：默认toolbar 显示的正常高度值咱们设置成的100dp，当咱们上滑的时候，高度达到最小高度40dp时，toolbar不在滑动了。该属性感受实用性不强。
（5）： app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”
scroll 与 enterAlways 与 enterAlwaysCollapsed 结合所产的效果图以下：
xml中Toolbar 的布局和（4）仍是同样的，不过app:layout_scrollFlags属性，由原来的exitUntilCollapsed改成enterAlwaysCollapsed。
PS：仍是从产生的效果角度去分析的：默认toolbar 显示的正常高度值咱们设置成的100dp，当咱们上滑的时候，toolbar直到彻底隐藏时，下面的滚动布局才开始发生滚动；下滑时toolbar会优先滑出设置的最小高度值，而后当滚动布局下滑到顶部时，后面的toolbar部分，才开始彻底显示（滑）出来。该属性感受实用性也不强。
与CollapsingToolbarLayout结合的使用
（1）：先看下效果图：
再把代码贴上：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">
<!--本次重点关注这里 CollapsingToolbarLayout -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_image"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/ic_back_white_24dp"
app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"
app:title="标题"
app:titleTextColor="@color/white">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
这里咱们重点关注 CollapsingToolbarLayout控件 如下的几个属性：
- app:contentScrim=”?attr/colorPrimary” 当上滑到toolbar 高度期间直到达到toolbar高度时，给toolbar设置的背景色，以及过渡颜色。固然，这里不只仅能够设置颜色，也能够设置图片。 若是不设置该属性，标题栏会过渡为以以前的图片为背景。
- app:layout_scrollFlags=”scroll” 和介绍 AppBarLayout 时，给Toolbar 设置和配置同样。其效果上图已作展现。
- app:expandedTitleGravity=”center_horizontal” 从单词意思能够看出，这是展现后，title的位置。
- app:expandedTitleMarginStart=”50dp” 从单词意思能够看出，这是展现后，title 距离开始位置的边距。
- app:collapsedTitleGravity=”center” 从单词意思能够看出，这是收缩后，title 位置（测试发现，很差用）。
- app:expandedTitleTextAppearance=”@style/transparentText” 展开后标题文字的样式
- app:collapsedTitleTextAppearance=”@style/ToolbarTitle” 折叠后标题文字的样式
给 ImageView 控件 设置的 app:layout_collapseMode=”parallax” 属性说明：
app:layout_collapseMode有两个参数：
- parallax 子View能够选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其余正常滚动的View速度稍微慢一点）。
- pin 测试发现，按照以上的布局，若是你使用pin参数，看效果，和使用parallax 参数，好像没有什么区别。目前我的认为的区别后面在作介绍。
注意事项:
1.上图中背景图，也就是xml中的 ImageView 控件，设置的图片大小，在保证显示正常的状况下，越小越好。太大的话，在展现的时候，会有卡顿的感受。
下面咱们来看一个效果图：
若是你发现展开和折叠后的标题字体过小或太大，你可经过以下两个属性设置：
app:expandedTitleTextAppearance="@style/transparentText" 展开后标题文字的样式 app:collapsedTitleTextAppearance="@style/ToolbarTitle" 折叠后标题文字的样式
transparentText （透明）样式：
<style name="transparentText" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#00000000</item>
<item name="android:textSize">15sp</item>
</style>
ToolbarTitle样式：
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#f0f0</item>
<item name="android:textSize">15sp</item>
</style>
细心的你，会发现咱们的状态栏，如今是彻底透明的状态。那咱们怎么实现呢？那你会说了，那还不简单！
使用下面的代码：
//透明状态栏效果
if (Build.VERSION.SDK_INT >= 21) {
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
不就能实现吗！或者使用第三方 透明状态栏设置库。很简单的就能实现了。若是你真正具体操做了，运行代码了。你会发现，是实现不了的。不过你把上述代码中 ImageView 控件的 app:layout_collapseMode 的参数设置为 pin 。以下：
app:layout_collapseMode=”pin” 。此时你在试一下，就能实现上图的效果啦。如今也能说明，parallax 和 pin 的一个区别吧。
app:layout_scrollFlags=”scroll|enterAlways”
那么 app:layout_scrollFlags=”scroll|enterAlways” 效果怎样呢？下面看图说话：
PS：这里也再也不多说了，原理和介绍 AppBarLayout 时，给Toolbar 设置和配置基本差很少。
app:layout_scrollFlags=”scroll|exitUntilCollapsed”
效果图：
app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”
PS：这里再也不贴出效果图啦，聪明的你，相信也能想象出其效果。(不过这样结合的配置，感受不经常使用也不太实用。上面贴图的几种效果，还比较实用一些。)
文章写了好几天，才算写的个差很少，若是对你有些帮助的话，给个赞和好评吧！
引伸拓展—–实现悬浮栏的效果
如何自定义Toolbar 标题栏
- 1. Toolbar的详细介绍和自定义Toolbar
- 2. WebStorm显示toolbar和自定义toolbar
- 3. 自定义ToolBar
- 4. Android 自定义ToolBar详细使用
- 5. Toolbar使用与自定义Toolbar
- 6. Android自定义ToolBar布局
- 7. (Android)快速自定义Toolbar
- 8. 利用 v7 Toolbar 自定义 Android ActionBar
- 9. Qt自定义toolbar为标题栏
- 10. toolBar和toolBarItem的定制
- 更多相关文章...
- • 自定义TypeHandler - MyBatis教程
- • 系统定义的TypeHandler - MyBatis教程
- • RxJava操作符（十）自定义操作符
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点