当前位置： 移动技术网 > IT编程>移动开发>Android > Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar基础用法

Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar基础用法

2018年03月06日  | 移动技术网IT编程  | 我要评论

复恩,极限挑战下架停播原因,265g小游戏

1动画效果如图所示，简单地说就是一个可以伸缩折叠的Toolbar

2用到的控件，一个一个说，CoordinatorLayout是最外层的布局，AppBarLayout是绿色+红色部分，CollapsingToolbarLayout是绿色部分，Toolbar是返回键那一行，至于下面来回切换的页面，就是一个帧布局放了三个fragment，没什么好说的。

3看布局代码

<?xml version="1.0" encoding="utf-8"?>
<!--最外层是CoordinatorLayout，上面已经说过了-->
<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:background="#000">
　　<!--绿色+红色的部分，一共280dp-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="280dp">
　　　　<!--绿色的部分，240dp,scroll属性就是滑动的，exitUntilCollapsed属性就是保留最小高度值的，可以自己设置也可以不设置（不设置就应该是Toolbar的高度了吧，这一切都是我猜的。。），我就没设置最小高度
　　　　title属性不设置也可以，根本不影响-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:contentScrim="#f00"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title=" ">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#0f0" />
　　　　　　　　<!--pin属性就是设置控件不滑动的，所以效果图里绿色的在往上滑，但是返回键三个字不跟着往上滑，原因就在这里-->
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="40dp"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="返回鍵" />


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

        </android.support.design.widget.CollapsingToolbarLayout>
　　　　<!--红色区域，三个按钮那里，同样在AppBarLayout里面，但是他没有设置scroll属性，所以滑到这里的时候就停止了，也就是效果图的效果-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#f00"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="1"
                android:textColor="#fff" />

            <TextView
                android:id="@+id/tv2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="2"
                android:textColor="#fff" />

            <TextView
                android:id="@+id/tv3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="3"
                android:textColor="#fff" />

        </LinearLayout>

    </android.support.design.widget.AppBarLayout>
　　<!--用来切换fragment的，没什么好说的了-->
    <FrameLayout
        android:id="@+id/framelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"></FrameLayout>


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

4代码地址 https://github.com/wyp780/CoordinatorLayoutToolBar.git

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网