CollapsingToolbarLayout實現翻轉的toolbar

2019-11-08 00:20:11

字體：大中小

來源：轉載

供稿：網友

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

collapsing_02

collapsing_03

中間布局的搜索框滾動到頂部后，固定在標題欄。先看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/color前提是你已經在項目中依賴了design包，并在styles.xml文件中配置toolbar的主題

<style name="A 至于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。具體效果自行測試