安卓Design包之AppBar和Toolbar的联用

前面讲了Design包的的CoordinatorLayout和SnackBar的混用，现在继续理解Design包的AppBar;

AppBarLayout跟它的名字一样，把容器类的组件全部作为AppBar.

如：

<android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"

        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar

            app:layout_scrollFlags="scroll|enterAlways"

            android:layout_width="match_parent"

            android:layout_height="?actionBarSize"

            android:id="@+id/main_toolbar"/>

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="悬停条目"/>

    </android.support.design.widget.AppBarLayout>

这里就是把Toolbar和TextView放到了AppBarLayout中，让他们当做一个整体作为AppBar。

引用appBar的

app:layout_scrollFlags="scroll|enterAlways"
属性，则可实现下拉的时候不显示appbar，上拉的时候显示appbar。这个在用户交互上真的挺好用的。

再来看看可折叠的ToolBar

 <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"

        android:layout_height="wrap_content">

        <!--可折叠的toolbar-->

        <android.support.design.widget.CollapsingToolbarLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            app:contentScrim="@color/colorPrimary"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView

                android:layout_width="match_parent"

                android:layout_height="200dp"

                app:layout_collapseMode="parallax"

                android:src="@mipmap/ic_launcher"/>

            <android.support.v7.widget.Toolbar

                app:layout_scrollFlags="scroll|enterAlways"

                android:layout_width="match_parent"

                android:layout_height="?actionBarSize"

                android:id="@+id/main_toolbar"/>

        </android.support.design.widget.CollapsingToolbarLayout>

        <!--<TextView-->

            <!--android:layout_width="match_parent"-->

            <!--android:layout_height="wrap_content"-->

            <!--android:text="悬停条目"/>-->

    </android.support.design.widget.AppBarLayout>

　　非常的简单。只需要在上面的代码中修改一下就可以了。

巴特西

安卓Design包之AppBar和Toolbar的联用

最新文章

热门文章