AppBar和Toolbar的联用

来源：互联网发布：软件项目日报编辑：程序博客网时间：2024/04/26 11:28

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

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

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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的

1
app:layout_scrollFlags="scroll|enterAlways"<br>属性，则可实现下拉的时候不显示appbar，上拉的时候显示appbar。这个在用户交互上真的挺好用的。<br><br><br><br>再来看看可折叠的ToolBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

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

阅读全文

0 0