AppBarLayout+ToolBar+CollapsingToolbarLayout+NestedScrollView

最新推荐文章于 2024-04-27 19:56:32 发布

原创最新推荐文章于 2024-04-27 19:56:32 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了AppBarLayout作为AppBar的容器，它需要依赖CoordinatorLayout，并与ToolBar和CollapsingToolbarLayout配合使用。ToolBar是Material Design风格的导航控件，允许自定义布局并设置导航图标、Logo等。CollapsingToolbarLayout提供了可折叠的Toolbar效果，常用于AppbarLayout中。NestedScrollView则是一个支持嵌套滑动的滚动视图，扩展了ScrollView的功能。

AppBarLayout:
AppBarLayout是继承LinearLayout的子类，根据名称可以知道它是AppBar的容器。

AppBarLayout需要注意几点：

让子View可以选择自己的滑动的方式。
需要依赖CoordinatorLayout作为父容器，同时也要求一个具有可以独立滚动的兄弟节点（或兄弟节点的子view可以滚动）才能发挥其功能。

AppBarLayout一般经常与ToolBar和CollapsingToolbarLayout一起使用。

ToolBar:

ToolBar是android 与Android 5.0开始推出的Material Design风格的导航控件，用来取代ActionBar。tionBar相比，Toolbar明显灵活多了，它不像ActionBar一样固定在Activity的顶部，而是可以放在界面的任意地方。并且ToolBar可以有很多定制的余地，定制的属性在API文档中都有详细的介绍。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_tool_bar_app_bar"
    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="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/PoPupMenu">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控件"/>

    </android.support.v7.widget.Toolbar>

</LinearLayout>

设置导航图标、app的logo、主标题和子标题:

//设置导航图标
    mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(mActivity, "导航图标", Toast.LENGTH_SHORT).show();
        }
    });

    //设置logo
    mToolbar.setLogo(R.mipmap.ic_launcher);

    //设置主标题
    mToolbar.setTitle("Title");
    mToolbar.setTitleTextColor(Color.WHITE);

    //设置子标题
    mToolbar.setSubtitle("subTitle");

也可以通过在布局文件中设置：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_tool_bar_app_bar"
    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="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:navigationIcon="@mipmap/ic_drawer_home"
        app:logo="@mipmap/ic_launcher"
        app:title="title"
        app:titleTextColor="@android:color/white"
        app:subtitle="subtitle"
        app:popupTheme="@style/PoPupMenu">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控件"/>

    </android.support.v7.widget.Toolbar>

</LinearLayout>

注意：设置这些图片的时候，使用在根布局中加入自定义属性的命名空间

xmlns:app="http://schemas.android.com/apk/res-auto"

然后再布局中使用这些命名空间。

设置Actionmenu:

效果图：

base_toolbar_menu:

<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="@mipmap/ic_search_white_24dp"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item1"
        android:title="@string/item_01"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item2"
        android:title="@string/item_02"
        app:showAsAction="never" />

</menu>

//showAsAction这个属性的值有： 
//1、always：使菜单项一直显示在ToolBar上。 
//2、ifRoom：如果有足够的空间，这个值会使菜单项显示在ToolBar上。 
//3、never：使菜单项永远都不出现在ToolBar上,在…的子项中显示。 
//4、withText：使菜单项和它的图标，菜单文本一起显示。

函数中：

mToolbar.inflateMenu(R.menu.base_toolbar_menu);
    mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()){
                case R.id.action_search:
                    Toast.makeText(mActivity, "搜索", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.action_notification:
                    Toast.makeText(mActivity, "通知", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.action_item1:
                    Toast.makeText(mActivity, "item1", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.action_item2:
                    Toast.makeText(mActivity, "item2", Toast.LENGTH_SHORT).show();

                    break;
                default:break;
            }
            return false;
        }
    });

如果想要修改弹出框的背景色和字体的颜色的话：

<style name="PoPupMenu" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorBackground">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:overlapAnchor">false</item>
</style>

然后再布局文件中引用：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:navigationIcon="@mipmap/ic_drawer_home"
    app:logo="@mipmap/ic_launcher"
    app:title="title"
    app:titleTextColor="@android:color/white"
    app:subtitle="subtitle"
    app:popupTheme="@style/PoPupMenu"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="控件"/>

</android.support.v7.widget.Toolbar>

效果图：

注意：
网上看到说，将overlapanchor设置成false之后，弹出框会显示在toolbar的下面，但是我这里却没有这种能够效果，也不知道什么原因？

CollapsingToolbarLayout：

CollapsingToolbarLayout包裹 Toolbar 的时候提供一个可折叠的 Toolbar，一般作为AppbarLayout的子视图使用。

NestedScrollView：

它是support-v4包提供的控件,继承至FrameLayout, 并实现了NestedScrollingParent,NestedScrollingChild, ScrollingView接口。它的作用类似于Android.widget.ScrollView,不同点在于NestedScrollView支持嵌套滑动。