码迷,mamicode.com
首页 > 移动开发 > 详细

安卓Design包之AppBar和Toolbar的联用

时间:2016-07-15 00:27:45      阅读:405      评论:0      收藏:0      [点我收藏+]

标签:

前面讲了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的联用

标签:

原文地址:http://www.cnblogs.com/liushilin/p/5671999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!