Android 折叠toolbar CollapsingToolbarLayout

展开时如图

上滑时

折叠后

Android Support Library 中提供的CollapseToolbar实现这效果.
需要gradle引用包即可compile 'com.android.support:design:25.0.0'

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.tmgg.collasingtoolbarlayout.MainActivity">
<android.support.design.widget.AppBarLayout
    android:id="@+id/id_appbar_main"
    android:layout_width="match_parent"
    android:layout_height="230dp">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/id_collapsingToolbar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/colorPrimary"
        app:statusBarScrim="@color/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"

        >
        <ImageView
            android:id="@+id/id_img_main"
            android:src="@mipmap/testimg"
            app:layout_collapseMode="parallax"
            android:scaleType="centerCrop"
app:layout_collapseParallaxMultiplier="0.6"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar_main"
            app:layout_collapseMode="pin"
            android:layout_width="match_parent"
            android:background="@android:color/transparent"
            android:layout_height="?attr/actionBarSize">

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

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:text="费德勒十分难得斯科拉菲尼德斯卡拉夫"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_input_add"
        app:backgroundTintMode="multiply"
        app:layout_anchor="@id/id_collapsingToolbar_main"
        app:layout_anchorGravity="bottom|end|right"
        android:layout_marginBottom="18dp"
        android:layout_marginRight="18dp"
        />

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

app:contentScrim=”?attr/colorPrimary” ,CollapsingToolbarLayout这个属性是设置折叠后Toolbar的颜色.

app:layout_scrollFlags=”scroll|exitUntilCollapsed” ,这是两个Flag控制滚动时候CollapsingToolbarLayout的表现.

1) Scroll, 表示向下滚动列表时候,CollapsingToolbarLayout会滚出屏幕并且消失(原文解释:this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen)

2) exitUntilCollapsed, 表示这个layout会一直滚动离开屏幕范围,直到它收折成它的最小高度.(原文解释:this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting)

app:layout_collapseMode=”parallax”, 这是控制滚出屏幕范围的效果的

1) parallax, 表示滚动过程中,会一直保持可见区域在正中间.

2) pin, 表示不会被滚出屏幕范围.

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.id_collapsingToolbar_main) CollapsingToolbarLayout mCollapsingToolbar ;
    @BindView(R.id.id_toolbar_main) Toolbar mToolbar ;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        mCollapsingToolbar.setTitle("collapsing Toolbar");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //展开时的颜色
        mCollapsingToolbar.setExpandedTitleColor(Color.WHITE);
        //折叠后的颜色
        mCollapsingToolbar.setCollapsedTitleTextColor(Color.GREEN);

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

    }
}

不要忘记在清单文件里设置主题为<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
基础功能已经实现