Android Toolbar、AppBarLayout和CollapsingToolbarLayout类
Toolbar、AppBarLayout和CollapsingToolbarLayout是Android5.0引入,实现多样化的效果。
Toolbar是ActionBar的替代类,可以自由添加子控件。
AppBarLayout类似于LinearLayout,而CollapsingToolbarLayout实现了折叠的效果。
1、Toolbar类
低版本可以使用v7兼容包,只需在gradle中加入依赖,而在布局文件中也要加入xmlns:app来引用配置。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
app:navigationIcon="@drawable/nav_back"
app:logo="@drawable/nav_user"
app:title="标题"
app:titleTextAppearance="@style/titleTextAppearance"
app:subtitle="副标题"
app:subtitleTextAppearance="@style/subtitleTextAppearance"
android:background="#ffff7088">
<!-- 在Toolbar中自定义控件 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="首页" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
使用Theme.AppCompat的主题,添加以下配置
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
(2) 主要方法
public void setNavigationIcon(@DrawableRes int resId) // 设置导航图标
public void setLogo(@DrawableRes int resId) // 设置logo图标
public void setTitle(@StringRes int resId) // 设置标题
public void setSubtitle(@StringRes int resId) // 设置副标题
public void setNavigationOnClickListener(OnClickListener listener) // 设置导航事件
(3) 设置菜单
// 加入菜单
mToolbar.inflateMenu(R.menu.title_menu);
// 添加菜单监听器
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(ToolbarActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();
return true;
}
});
// 设置溢出按钮
mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.item_filter));
// 设置显示溢出按钮
mToolbar.showOverflowMenu();
mToolbar.dismissPopupMenus();
菜单文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu1"
android:title="菜单1" />
<item
android:id="@+id/menu2"
android:title="菜单2" />
<item
android:id="@+id/menu3"
android:title="菜单3" />
<item
android:id="@+id/menu4"
android:title="菜单4" />
</menu>
2、AppBarLayout类
AppBarLayout配合Toolbar可以实现不一样的滑动效果。父容器必须是CoordinatorLayout,在NestedScrollView中设置app:layout_behavior
布局文件
<?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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:minHeight="30dp"
app:title="标题"
android:background="#ffff7088"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_text1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text1"
android:gravity="center"/>
<TextView
android:id="@+id/tv_text2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text2"
android:gravity="center"/>
<TextView
android:id="@+id/tv_text3"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text3"
android:gravity="center"/>
<TextView
android:id="@+id/tv_text4"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text4"
android:gravity="center"/>
<TextView
android:id="@+id/tv_text5"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text5"
android:gravity="center"/>
<TextView
android:id="@+id/tv_text6"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text5"
android:gravity="center"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
在Toolbar的app:layout_scrollFlags中设置不同参数,会有不同的滑动效果
(1) 不设置,Toolbar在顶部不动,滑动只发生在NestedScrollView内部。(2) 设置为scroll,Toolbar随着手势一起滑动。
(3) 设置为enterAlways, enterAlways必须和scroll一起使用。在向上滑动时和scroll一样,但向下时,Toolbar先进入屏幕。
(4) 设置为enterAlwaysCollapsed,enterAlwaysCollapsed必须和enterAlways一起使用,且Toolbar设置minHeight。在向
(5) 设置为exitUntilCollapsed,exitUntilCollapsed必须和scroll一起使用,且Toolbar设置minHeight。Toolbar向上滚动最小高度,NestedScrollView才开始滚动。
(6) 设置为snap,snap必须和scroll一起使用。向上滑动一小段距离,Toolbar自动滑出屏幕。向下滑动一段距离,Toolbar自动滑进屏幕。
代码设置
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) mToolbar.getLayoutParams();
// SCROLL_FLAG_SCROLL
// SCROLL_FLAG_ENTER_ALWAYS
// SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED
// SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
// SCROLL_FLAG_SNAP
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_xx);
3、CollapsingToolbarLayout类
CollapsingToolbarLayout需要包含Toolbar使用,设置子控件属性- app:layout_collapseMode属性有两种模式
- pin:固定模式,在折叠的时候最后固定在顶端
- parallax:视差模式,在折叠的时候会有个视差折叠的效果。
- app:layout_collapseParallaxMultiplier属性设置视差,0.0~1.0
<?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:orientation="vertical">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="168dp"
android:minHeight="60dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/switcher4"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="60dp"
app:title="标题"
app:navigationIcon="@drawable/nav_back"
app:layout_collapseMode="pin"/>
</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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text1"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text2"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text3"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text4"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text5"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="text6"
android:gravity="center"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout设置了layout_scrollFlags属性,Toolbar设置固定模式,在滑动时保持最小高度放置Toolbar,而ImageView显示了折叠效果。
CollapsingToolbarLayout其他属性
- app:contentScrim : 指定布局内部未展开时的背景颜色。
- app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。
- app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。
- app:collapsedTitleGravity : 指定未展开时的标题文字对齐方式。
- app:expandedTitleTextAppearance : 指定展开后的标题文字字体。
- app:expandedTitleTextColor : 指定展开后的标题文字颜色。
- app:expandedTitleGravity : 指定展开后的标题文字对齐方式。
- app:expandedTitleMargin : 指定展开后的标题四周间距。
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="168dp"
android:minHeight="60dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#ffff7088"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="@style/subtitleTextAppearance"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="@style/titleTextAppearance">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/switcher4"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="60dp"
app:title="标题"
app:navigationIcon="@drawable/nav_back"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
参考资料:https://blog.csdn.net/jungle_pig/article/details/52785781
参考资料:https://blog.csdn.net/litengit/article/details/52948574
参考资料:https://blog.csdn.net/aqi00/article/details/56834285