Android仿支付寶的頭部伸縮動(dòng)畫效果
Android5.0推出的MaterialDesign庫包含了處理頭部工具欄的多個(gè)控件,不但允許自定義頂部導(dǎo)航欄,而且導(dǎo)航欄高度是可以伸縮的。如此一來,一方面導(dǎo)航欄能夠放得下更多控件,另一方面在用戶想看具體內(nèi)容時(shí)也能騰出更多的屏幕空間。
這么說可能比較抽象,那就先來看看兩張導(dǎo)航欄的效果圖,第一張是導(dǎo)航欄完全展開時(shí)的界面,此時(shí)頁面頭部的導(dǎo)航欄占據(jù)了較大部分的高度;
第二張是導(dǎo)航欄完全收縮時(shí)的界面,此時(shí)頭部導(dǎo)航欄只剩矮矮的一個(gè)長(zhǎng)條。
看起來很眼熟是不是,上面的截圖正是仿支付寶首頁的頭部效果。如果你熟悉AppBarLayout和CollapsingToolbarLayout的話,也許可以很快做出類似以上的簡(jiǎn)單界面,具體地說,就是定義一個(gè)CoordinatorLayout嵌套AppBarLayout再嵌套CollapsingToolbarLayout再嵌套Toolbar的布局。之所以要嵌套這么多層,是因?yàn)橐瓿梢韵鹿δ埽?/p>
1、CoordinatorLayout嵌套AppBarLayout,這是為了讓頭部導(dǎo)航欄能夠跟隨內(nèi)容視圖下拉而展開,跟隨內(nèi)容視圖上拉而收縮。這個(gè)內(nèi)容視圖可以是RecyclerView,也可以是NestedScrollView;
2、AppBarLayout嵌套CollapsingToolbarLayout,這是為了定義導(dǎo)航欄下面需要展開和收縮的部分視圖;
3、CollapsingToolbarLayout嵌套Toolbar,這是為了定義導(dǎo)航欄上方無論何時(shí)都要顯示的長(zhǎng)條區(qū)域,其中Toolbar還要定義兩個(gè)不同的樣式布局,用于分別顯示展開與收縮狀態(tài)時(shí)的工具欄界面。
下面是基于以上思路實(shí)現(xiàn)的布局文件代碼:
<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:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:id="@+id/abl_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" > <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" app:contentScrim="@color/blue_dark" > <include android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/toolbar_height" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" layout="@layout/life_pay" /> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="@dimen/toolbar_height" app:layout_collapseMode="pin" app:contentInsetLeft="0dp" app:contentInsetStart="0dp" > <include android:id="@+id/tl_expand" android:layout_width="match_parent" android:layout_height="match_parent" layout="@layout/toolbar_expand" /> <include android:id="@+id/tl_collapse" android:layout_width="match_parent" android:layout_height="match_parent" layout="@layout/toolbar_collapse" android:visibility="gone" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/rv_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="10dp" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
然而僅僅實(shí)現(xiàn)上述布局并非萬事大吉,支付寶首頁的頭部在伸縮時(shí)可是有動(dòng)畫效果的,就像下面這個(gè)動(dòng)圖那樣有淡入淡出的漸變動(dòng)畫:
這個(gè)漸變動(dòng)畫其實(shí)可分為兩段:
1、導(dǎo)航欄從展開狀態(tài)向上收縮時(shí),頭部的各控件要慢慢向背景色過渡,也就是淡入效果;
2、導(dǎo)航欄向上收縮到一半,頂部的工具欄要換成收縮狀態(tài)下的工具欄布局,并且隨著導(dǎo)航欄繼續(xù)向上收縮,新工具欄上的各控件也要慢慢變得清晰起來,也就是淡出效果。
如果導(dǎo)航欄是從收縮狀態(tài)向下展開,則此時(shí)相應(yīng)的做上述漸變動(dòng)畫的取反效果,即:
1、導(dǎo)航欄從收縮狀態(tài)向下展開時(shí),頭部的各控件要慢慢向背景色過渡,也就是淡入效果;同時(shí)展開導(dǎo)航欄的下部分布局,并且該布局上的各控件漸漸變得清晰;
2、導(dǎo)航欄向下展開到一半,頂部的工具欄要換成展開狀態(tài)下的工具欄布局,并且隨著導(dǎo)航欄繼續(xù)向下展開,新工具欄上的各控件也要慢慢變得清晰起來,也就是淡出效果。
看起來還比較復(fù)雜,如果只對(duì)某個(gè)控件做漸變動(dòng)畫還好,可是導(dǎo)航欄上的控件有好幾個(gè),而且并不固定常常會(huì)增加和修改。倘若要對(duì)導(dǎo)航欄上的各控件逐一動(dòng)畫過去,不但費(fèi)力氣,而且后期也不好維護(hù)。為了解決這個(gè)問題,我們可以采取類似遮罩的做法,即一開始先給導(dǎo)航欄罩上一層透明的視圖,此時(shí)導(dǎo)航欄的畫面就完全顯示;然后隨著導(dǎo)航欄的移動(dòng)距離,計(jì)算當(dāng)前位置下的遮罩透明度,比如該遮罩變得越來越不透明,看起來導(dǎo)航欄就像蒙上了一層面紗,蒙到最后就看不見了。反過來,也可以一開始給導(dǎo)航欄罩上一層不透明的視圖,此時(shí)導(dǎo)航欄的控件是看不見的,然后隨著距離的變化,遮罩變得越來越不透明,導(dǎo)航欄也會(huì)跟著變得越來越清晰了。
漸變動(dòng)畫的思路有了,可謂萬事俱備,只欠東風(fēng),再來一個(gè)導(dǎo)航欄的移動(dòng)偏移監(jiān)聽器便行,正好有個(gè)現(xiàn)成的AppBarLayout.OnOffsetChangedListener,只需給AppBarLayout對(duì)象調(diào)用addOnOffsetChangedListener方法,即可實(shí)現(xiàn)給導(dǎo)航欄注冊(cè)偏移監(jiān)聽器的功能。接下來的事還是直接看看具體的實(shí)現(xiàn)代碼吧:
public class AlipayActivity extends AppCompatActivity implements OnOffsetChangedListener { private final static String TAG = "AlipayActivity"; private AppBarLayout abl_bar; private View tl_expand, tl_collapse; private View v_expand_mask, v_collapse_mask, v_pay_mask; private int mMaskColor; private RecyclerView rv_content; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_alipay); mMaskColor = getResources().getColor(R.color.blue_dark); rv_content = (RecyclerView) findViewById(R.id.rv_content); rv_content.setLayoutManager(new GridLayoutManager(this, 4)); rv_content.setAdapter(new LifeAdapter(this, LifeItem.getDefault())); abl_bar = (AppBarLayout) findViewById(R.id.abl_bar); tl_expand = (View) findViewById(R.id.tl_expand); tl_collapse = (View) findViewById(R.id.tl_collapse); v_expand_mask = (View) findViewById(R.id.v_expand_mask); v_collapse_mask = (View) findViewById(R.id.v_collapse_mask); v_pay_mask = (View) findViewById(R.id.v_pay_mask); abl_bar.addOnOffsetChangedListener(this); } @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { Log.d(TAG, "verticalOffset="+verticalOffset); int offset = Math.abs(verticalOffset); int total = appBarLayout.getTotalScrollRange(); int alphaIn = offset; int alphaOut = (200-offset)<0?0:200-offset; int maskColorIn = Color.argb(alphaIn, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor)); int maskColorInDouble = Color.argb(alphaIn*2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor)); int maskColorOut = Color.argb(alphaOut*2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor)); if (offset <= total / 2) { tl_expand.setVisibility(View.VISIBLE); tl_collapse.setVisibility(View.GONE); v_expand_mask.setBackgroundColor(maskColorInDouble); } else { tl_expand.setVisibility(View.GONE); tl_collapse.setVisibility(View.VISIBLE); v_collapse_mask.setBackgroundColor(maskColorOut); } v_pay_mask.setBackgroundColor(maskColorIn); } }
以上所述是小編給大家介紹的Android仿支付寶的頭部伸縮動(dòng)畫效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
android push推送相關(guān)基本問答總結(jié)
現(xiàn)在網(wǎng)上一大堆的關(guān)于推送方面的實(shí)現(xiàn)原理:1.通過pull(拉),也就是通過客戶端主動(dòng)定時(shí)輪詢服務(wù)器請(qǐng)求數(shù)據(jù)。2.通過push(推),服務(wù)器通過一個(gè)長(zhǎng)連接主動(dòng)推送消息到客戶端。這兩個(gè)方式都可以實(shí)現(xiàn)推送功能。pull這個(gè)方式?jīng)]什么問題好理解。2015-05-05深入了解Android中GestureDetector的定義與使用
Android中的GestureDetector?可以使用?MotionEvents?檢測(cè)各種手勢(shì)和事件,非常的好用。本文將會(huì)通過幾個(gè)具體的例子來講解一下GestureDetector的具體使用方法,需要的可以參考一下2023-01-01Android實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀏覽功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀏覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Android中控件GridView實(shí)現(xiàn)設(shè)置行列分割線的方法示例
這篇文章主要介紹了利用Android中控件GridView實(shí)現(xiàn)設(shè)置行列分割線的方法,文中給出了詳細(xì)的介紹與示例代碼,相信對(duì)大家具有一定的參考價(jià)值,有需要的朋友們下面來一起看看吧。2017-01-01Android RecyclerView添加上拉加載更多效果
這篇文章主要為大家詳細(xì)介紹了Android RecyclerView添加上拉加載更多效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android切換至SurfaceView時(shí)閃屏(黑屏閃一下)以及黑屏移動(dòng)問題的解決方法
本文主要介紹了Android切換至SurfaceView時(shí)閃屏(黑屏閃一下)以及黑屏移動(dòng)問題的解決方法。具有一定的參考作用,下面跟著小編一起來看下吧2017-01-01