動效設計

1、兩級吸頂

CoordinatorLayout+AppBarLayout可以輕松的實現一級吸頂的功能，兩級吸頂并不支持。要實現兩級吸頂，可以有兩種思考：一，在此基礎之上再完成一次吸頂；二，直接重寫兩次吸頂的邏輯，兩次吸頂算法跟一次吸頂算法思路上應該是一致的。首頁改版使用了第一種思路，因為考慮到頂部搜索框特殊的過渡動畫效果，這塊本身需要自定義，即便使用控件自帶的效果，這塊也要重寫，所以首先完成了頂部搜索框的自定義吸頂效果，然后借力CoordinatorLayout控件實現了feed流頭部的吸頂。這樣，整個兩級吸頂效果就完成了，頂部搜索欄吸頂通過自定義充分滿足了動效，后續擴展和修改會更自如；而feed流頭部使用父級控件自帶的吸頂效果，大大減輕了再次吸頂的邏輯重寫。

對于自定義頂部搜索欄吸頂的功能，可以通過AppBarLayout的OnOffsetChangedListener接口監聽完成。onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset)方法返回了appBarLayout的垂直偏移量，通過這個變量基本能完成所有頭部的動效。

// 背景圖滑動處理if (Math.abs(verticalOffset) < mHeaderHeight) { mIvBackground.scrollTo(0, (int) (-verticalOffset / VELOCITY_OF_REFRESH_BACKGROUND)); // 搜索欄動效處理 int width = mCityWidth - mSearcherBarLeftMargin; int height = mHeaderHeight - statusBarHeight - mSearcherBarShadowHeight - mSearcherBarStickyHeight - mSearcherBarStickyTopMargin;; float rate = ((float) width) / height; int rateScrollY = (int) (rate * -verticalOffset); int scrollWidth = rateScrollY > width ? width : rateScrollY; float widthRate = scrollWidth * 1.0f / width; if (rateScrollY < width) { // 搜索框大小 RelativeLayout.LayoutParams searchParams = (RelativeLayout.LayoutParams) mSearcherBar.getLayoutParams(); searchParams.leftMargin = mSearcherBarLeftMargin + scrollWidth; searchParams.height = mSearcherBarHeight - (int)(diffHeight * widthRate); mSearcherBar.setLayoutParams(searchParams); ... }}

2、頭圖動效設計圖

首頁開發時頭圖下拉的參數設計

文案動畫區，放置了下拉刷新的動畫和文案，下拉到這個區域即展示刷新動畫和相應的文案。

刷新觸發區，下拉到這個區域松手后會觸發刷新事件，下拉到文案動畫區則不會觸發刷新。

二樓觸發區，下拉到這個區域松手后則觸發負二樓的動效，以及負二樓落地；如果負二樓開關沒有打開，延續刷新的功能。

此外，下拉刷新的偏移和頭圖的偏移不是1:1，是500:270的效果，這樣可以形成視差，創造出空間層次感。補充，負二樓的過渡效果偏移和下拉偏移是1:1的，體現了跟隨效果。

頭圖下拉偏移，通過SmartRefreshLayout的OnMultiPurposeListener接口監聽操作。它提供了onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight)方法，輸出了RefreshHeader下拉的偏移量，通過視差系數，從而實現了頭圖的動效。

// 下拉刷新時，背景圖的移動速率private final static float VELOCITY_OF_REFRESH_BACKGROUND = 500.0f / 270.0f;FrameLayout.LayoutParams lpBg = (FrameLayout.LayoutParams) mIvBackground.getLayoutParams();lpBg.topMargin = mBackgroundTopMargin + (int) (offset / VELOCITY_OF_REFRESH_BACKGROUND);mIvBackground.setLayoutParams(lpBg); 3、負二樓動效設計圖

研發實現后的負二樓主頁效果圖

UI劃分區塊后的布局元素設計參考圖

動畫頁面漸隱落地頁出現的一個過渡效果

整個頁面使用全屏設計，對高度進行等比縮放處理以適應不同大小的屏幕設備。整體動畫實現難度不大，問題在落地頁如何從動畫頁下面漸顯，我們知道邏輯上，負二樓頁面和首頁是在一個層級，實現落地頁在動畫頁下面實現就是要實現落地頁從首頁下面出現。這個邏輯是行不通的，即便可以改造落地頁，也不能實現Activity從下面出現的過渡效果。

最終解決方案是，負二樓動畫頁面用一個Activity實現，啟動負二樓動畫頁之前先啟動落地頁，這兩者幾乎先后順序幾乎是保持同步的。然而，同時啟動兩個ui界面，勢必會造成動畫界面的播放卡頓，尤其是啟動承載內容繁多的落地頁，對上層動畫頁造成很大的影響。為解決這一問題，采用了“遮掩”的背景效果，即動畫頁背景和首頁出現負二樓過渡效果圖的背景是一致的，且啟動動畫頁后有短暫停留，是為了把這一停留時間分配給落地頁先行，從而最大可能的減少卡頓時長。

4、上下身和主體滑動沖突

主體用ScrollView而下身用ListView或RecyclerView會存在滑動沖突問題，這個我們都知道，當然也有解決方案。但是，新版首頁的需求遠不止這些，它是外層集成下拉刷新和上拉加載功能、內部整體滾動兩級吸頂、下半身橫向滾動切換頁面為一體的復雜構造，我們不能單純地通過傳統的ScrollView+RecyclerView就可以解決。那么脫離傳統父級向子級傳遞事件的思想，Google提供了一套“材料設計”的思想來處理這種復雜的空間關系，其中一個精髓就是將傳統開發設計思想顛覆，將子視圖的滑動事件向父級傳遞，通過父級的消費再告知其它子視圖進行處理滑動，整個材料形成了一起非線性聯動的效果，創造出空間層級感。父子級交互的兩個通道是通過NestedScrollingParent和NestedScrollingChild兩個接口協議通信的。我們通過CoordinatorLayout、AppBarLayout以及RecyclerView幾乎完美地實現了這三者之間的沖突；幾乎，但還是存在一些缺陷——AppBarLayout下滑，RecyclerView同時上劃，會出現CoordinatorLayout消費子視圖事件時的上下抖動問題。這個問題的主要原因是AppBarLayout滑動后的Fling效果未結束時，又再次觸發RecyclerView的觸摸事件。找到了這個原因，就能容易地解決最后的沖突問題了；在觸摸事件里攔截Fling，讓父級滾動在每次子視圖被觸摸時先停止掉就可以解決沖突問題。

總結

以上是生活随笔為你收集整理的android开发 视图联动_新版首页技术设计和实现方案(Android)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。