建站
咨詢
售后
建站咨詢
新聞中心
前言
成都創(chuàng)新互聯(lián)公司一直在為企業(yè)提供服務(wù)，多年的磨煉，使我們在創(chuàng)意設(shè)計，營銷型網(wǎng)站到技術(shù)研發(fā)擁有了開發(fā)經(jīng)驗。我們擅長傾聽企業(yè)需求，挖掘用戶對產(chǎn)品需求服務(wù)價值，為企業(yè)制作有用的創(chuàng)意設(shè)計體驗。核心團(tuán)隊擁有超過十年以上行業(yè)經(jīng)驗，涵蓋創(chuàng)意，策化，開發(fā)等專業(yè)領(lǐng)域，公司涉及領(lǐng)域有基礎(chǔ)互聯(lián)網(wǎng)服務(wù)綿陽服務(wù)器托管、成都app軟件開發(fā)、手機(jī)移動建站、網(wǎng)頁設(shè)計、網(wǎng)絡(luò)整合營銷。
最近接到一個需求，這需求讓我表示很尷尬。(下面是一些廢話)
要求的效果是這樣的，頂部有部分懸浮，接著是一些布局，在下面是幾個可切換的Tab頁面，然后滾動的時候~~吧啦吧啦吧啦吧啦~~ 還是直接看圖吧
主要就是頂部和Tab的懸浮，還有就是被頂?shù)舻哪莻€效果。
聽到要實現(xiàn)這樣的效果，我抽屜那把砍產(chǎn)品專用菜刀已經(jīng)蠢蠢欲動了。
思路
先說說實現(xiàn)的思路吧，上面的效果大致可以分成兩個部分：
1、Tab向上滾動到頂部時懸浮
Tab滾動后懸浮在頂部嘛~~ 這效果使用CoordinatorLayout + AppBarLayout就能輕松實現(xiàn)。(什么?你還不懂這兩個控件怎么使用?額，應(yīng)該可以勉強(qiáng)看懂后面的內(nèi)容)
2、頂部懸浮以及“被頂走”的效果
只要在CoordinatorLayout外面套一層FrameLayout，然后把這個頂部的布局改在上面。接著監(jiān)聽AppBarLayout的滾動，利用topMargin實現(xiàn)被“頂上去”的效果
拆分完畢，接下來就是實現(xiàn)了
實現(xiàn)
- Tab的懸浮效果
利用CoordinatorLayout、AppBarLayout、TabLayout、ViewPager來實現(xiàn)Tab的懸浮效果
LinearLayout中設(shè)置app:layout_scrollFlags="scroll|exitUntilCollapsed" 而 TabLayout 不設(shè)置app:layout_scrollFlags屬性
ViewPager中使用app:layout_behavior="@string/appbar_scrolling_view_behavior"
layout_scrollFlags：AppBarLayout供Children View使用的屬性，一共有五種值：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed。具體的使用可以參考Android 詳細(xì)分析AppBarLayout的五種ScrollFlags
(CoordinatorLayout、AppBarLayout的詳細(xì)用法我就不多說了)
然后，只要在Java代碼中為ViewPager添加幾個列表Fragment就能看到以下的效果(注意：列表不可以是ListView，需要用RecyclerView)
到目前為止，效果已經(jīng)實現(xiàn)了大半。最后值需要實現(xiàn)“被頂走”的效果就好了。
- 頂部“被頂走”的效果
這時候，布局稍微改變下。
在原有的基礎(chǔ)上，套了個FrameLayout，頂部的懸浮部分可以通過FrameLayout來實現(xiàn)。這樣也導(dǎo)致下面的布局被蓋住了一部分，因此在LinearLayout中加了與懸浮部分相同高度的空View。
布局是完成了，那個“被頂走”的效果怎么實現(xiàn)呢?這時候只要在MainActivity中對AppBarLayout的滾動進(jìn)行監(jiān)聽即可。
- @BindView(R.id.app_bar)
- AppBarLayout mAppBar;
- @BindView(R.id.sticky_view)
- View mStickyView;
- @BindView(R.id.header)
- View mHeader;
- private void setAppBarListener() {
- mAppBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
- @Override
- public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
- //頭部高度（除去被頂部覆蓋的部分）
- int minScrollHeight = mHeader.getMeasuredHeight();
- int margin = minScrollHeight + verticalOffset;
- margin = margin > 0 ? 0 : margin;
- FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mStickyView.getLayoutParams();
- layoutParams.topMargin = margin;
- mStickyView.setLayoutParams(layoutParams);
- }
- });
- }
這里通過AppBarLayout滾動的進(jìn)行監(jiān)聽(向上滾動時，verticalOffset值的變化為：0、-1 、-2 ... -n-1、-n)來計算margin值。通過改變topMargin，實現(xiàn)“被頂走”的效果。
再看一眼效果：
敲到這里，我才默默的收起了那把砍產(chǎn)品專用菜刀。
Tips
問題：使用CoordinatorLayout時，滾動不流暢問題
解決方案：可以寫個Behavior添加到AppBarLayout中。具體的解決方案
問題：如果你在想要刷新功能，在CoordinatorLayout外面套了一個SwipeRefreshLayout，一不小心就觸發(fā)了刷新~~(自己體會)
解決方案：這個問題可以通過對AppBarLayout的監(jiān)聽，設(shè)置swipeLayout的Enabled來處理
- mAblAppBar.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
- if (verticalOffset == 0) {
- swipeLayout.setEnabled(true);
- } else {
- if (!swipeLayout.isRefreshing()) {
- swipeLayout.setEnabled(false);
- }
- }
- });
網(wǎng)站標(biāo)題：【Android】這效果，我沒法描述
本文網(wǎng)址：http://www.5511xx.com/article/cdjshgi.html
