Android5.0后引入design設(shè)計婉商，利用design很容易實現(xiàn)翻轉(zhuǎn)效果
效果圖
中間布局的搜索框滾動到頂部后末早，固定在標(biāo)題欄胁孙。
先看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>
`
前提是你已經(jīng)在項目中依賴了design包，并在styles.xml文件中配置toolbar的主題
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
至于strings和colors文件中的文字描述竞滓，和顏色設(shè)定可以自由設(shè)置沦偎，這里不再貼出疫向。
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 設(shè)置和獲取折疊之后的標(biāo)題位置
app:contentScrim 獲取和設(shè)置折疊之后的背景
app:expandedTitleMarginStart 在展開狀態(tài)改變標(biāo)題文字的位置
app:expandedTitleMargin,
app:expandedTitleMarginBottom,
app:expandedTitleMarginEnd
app:layout_scrollFlags =''scroll|exitUntilCollapsed|snap''
scroll - 想滾動就必須設(shè)置這個。
enterAlways - 實現(xiàn)quick return效果, 當(dāng)向下移動時豪嚎，立即顯示View（比如Toolbar)搔驼。
exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面侈询。
enterAlwaysCollapsed - 當(dāng)你的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時舌涨，你的View只能以最小高度進(jìn)入，只有當(dāng)滾動視圖到達(dá)頂部時才擴(kuò)大到完整高度扔字。
app:titleEnabled 是否顯示標(biāo)題
app:layout_collapseMode="parallax" 折疊模式
pin - 設(shè)置為這個模式時囊嘉，當(dāng)CollapsingToolbarLayout完全收縮后温技，Toolbar還可以保留在屏幕上。
parallax - 設(shè)置為這個模式時扭粱，在內(nèi)容滾動時荒揣，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(xiàn)視差滾動效果焊刹，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。
app:layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動因子恳蹲，值為：0~1虐块。 具體效果自行測試
