CollapsingToolbarLayout實現翻轉的toolbar

Android5.0後引入design設計，利用design很容易實現翻轉效果
效果圖

中間佈局的搜索框滾動到頂部後，固定在標題欄。
先看xml代碼

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            app:collapsedTitleGravity="bottom"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginStart="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:titleEnabled="false">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorPrimary"
                android:gravity="center_horizontal"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6">
                <ImageView
                    android:id="@+id/iv_logo"
                    android:layout_width="220dp"
                    android:layout_height="80dp"
                    android:layout_marginTop="60dp"
                    android:src="@mipmap/ic_launcher" />
            </RelativeLayout>
            <LinearLayout
                android:id="@+id/ll_show_search"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_gravity="bottom"
                android:layout_marginBottom="20dp"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:background="@drawable/main0_edit_bg"
                android:orientation="horizontal">
                <EditText
                    android:id="@+id/et_show"
                    android:layout_width="0dp"
                    android:layout_height="35dp"
                    android:layout_weight="1"
                    android:hint="@string/search_hint"
                    android:textColor="@color/black_text"
                    android:textColorHint="@color/text_hint"
                    android:layout_gravity="center_horizontal"
                    android:textSize="14dp"
                    android:paddingBottom="2dp"
                    android:background="@null"
                    android:paddingLeft="15dp" />
                <ImageView
                    android:id="@+id/iv_search_show"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginRight="10dp"
                    android:src="@mipmap/icon_search" />
            </LinearLayout>
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="@color/colorPrimary"
                app:layout_collapseMode="pin">
                <LinearLayout
                    android:id="@+id/ll_hide_search"
                    android:layout_width="match_parent"
                    android:layout_height="35dp"
                    android:background="@drawable/main0_edit_bg"
                    android:layout_marginRight="30dp"
                    android:visibility="gone"
                    >
                    <EditText
                        android:id="@+id/et_hide"
                        android:layout_width="0dp"
                        android:layout_height="40dp"
                        android:layout_weight="1"
                        android:textSize="14dp"
                        android:hint="@string/search_hint"
                        android:textColor="@color/black_text"
                        android:textColorHint="@color/text_hint"
                        android:paddingBottom="4dp"
                        android:background="@null"
                        android:paddingLeft="20dp" />
                    <ImageView
                        android:id="@+id/iv_search_hide"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="10dp"
                        android:src="@mipmap/icon_search" />
                </LinearLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

前提是你已經在項目中依賴了design包，並在styles.xml文件中配置toolbar的主題

<!--控制頭部據appbar的樣式-->
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
    <!--用於控制toolbar溢出菜單的樣式-->
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

至於strings和colors文件中的文字描述，和顏色設定可以自由設置，這裏不再貼出。
MainActivity中的代碼

appbar = (AppBarLayout)findViewById(R.id.appbar);
        ivLogo = (ImageView)findViewById(R.id.iv_logo);
        hideSearch = (LinearLayout)findViewById(R.id.ll_hide_search);
        etHide = (EditText)findViewById(R.id.et_hide);
        etShow = (EditText)findViewById(R.id.et_show);
        appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
               float a = ((float)Math.abs(verticalOffset)) / ((float)appBarLayout.getTotalScrollRange());
                hideSearch.setVisibility(a> 0.6 ?View.VISIBLE:View.GONE);
                hideSearch.setAlpha(a>0.6 ? (a-0.6f) * 2.5f : 0f);
                ivLogo.setAlpha(imageScale(a));
            }
        });
        etHide.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }
            @Override
            public void afterTextChanged(Editable s) {
                if(!etShow.hasFocus()&& etHide.hasFocus()){
                    etShow.setText(s);
                }
            }
        });
        etShow.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }
            @Override
            public void afterTextChanged(Editable s) {
                if(!etHide.hasFocus()&&etShow.hasFocus()){
                    etHide.setText(s);
                }
            }
        });
    }
    private float imageScale(float a) {
        return a>0.5f ? 0: (1f- 2f*a);
    }

屬性介紹:
app:collapsedTitleGravity 設置和獲取摺疊之後的標題位置
app:contentScrim 獲取和設置摺疊之後的背景
app:expandedTitleMarginStart 在展開狀態改變標題文字的位置
app:expandedTitleMargin,
app:expandedTitleMarginBottom,
app:expandedTitleMarginEnd
app:layout_scrollFlags =”scroll|exitUntilCollapsed|snap”
scroll - 想滾動就必須設置這個。
enterAlways - 實現quick return效果, 當向下移動時，立即顯示View（比如Toolbar)。
exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標誌時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
app:titleEnabled 是否顯示標題
app:layout_collapseMode=”parallax” 摺疊模式
pin - 設置爲這個模式時，當CollapsingToolbarLayout完全收縮後，Toolbar還可以保留在屏幕上。
parallax - 設置爲這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。
app:layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子，值爲：0~1。 具體效果自行測試