Copy write douban details page (five) linkage and other details

(1) The opening page (2) the bottom floating layer (3) the content list (4) the elastic layout (5) linkage and other details

1, the preface

The first few articles mainly talk about a few customized views for imitating the writing of douban details page, BottomSheetLayout, LinkedScrollView and flexible JellyLayout, with these basic can achieve the effect of details page, This article briefly introduces how I organize these custom views in the concrete implementation, the specific code can be refer to github.com/funnywolfda… In com. Funnywolf. Hollowkit. Douban of files.

2. Linkage between the content list and the bottom floating layer

See diagram

Here the content list is mainly the RecyclerView list and the ViewPager two views, RecyclerView is always placed in LinkedScrollView topView, The ViewPager is placed in the bottomView of the LinkedScrollView to achieve continuous scrolling up and down.

The floating layer BottomSheetLayout covers the LinkedScrollView, Depending on the position of the bottomView of the LinkedScrollView, decide whether to place the ViewPager of the content list in the bottomView or in the BottomSheetLayout of the LinkedScrollView. When the revealing height of the bottomView is smaller than that of the TabLayout, it is placed in the floating layer; when the revealing height is larger, it is removed from the floating layer and placed in the bottomView of LinkedScrollView, so as to realize the linkage between the content list and the bottom floating layer.

3. The title bar

See diagram

First, the opacity of the title bar background changes as the content list scrolls; Then, when scrolling to a certain threshold, there will be a flip animation of the title and content details; Finally, whether the floating layer bounces also affects the display of the title and content details. So we need the cumulative value of RecyclerView scrolling in LinkedScrollView topView, need to know the cumulative value of LinkedScrollView scrolling (because it may not be able to scroll when the RecyclerView content is less than one screen), You also need to know the state of the floating layer.

Here I customize the ToolbarView to expose a process property that limits the range to @floatRange (from = 0.0, to = 1.0). Background transparency is directly equal to Process (which is a little less efficient, but ok), and as Process changes from the boundary of 1, animate the display of the title and content details. For external use, if the float layer is fully expanded BOTTOM_SHEET_STATE_EXTENDED, process is assigned to 1, Otherwise equal to “maximum of RecyclerView scrolling sum and LinkedScrollView scrolling sum”/” Title bar height “.

4. Content list

LinkedScrollView has only one RecyclerView in its topView and uses SimpleAdapter to distribute different Viewholders.

5, the end

The BottomSheetLayout, LinkedScrollView, JellyLayout and other customized views introduced in the previous several articles are designed to solve the problem of nested scrolling in the same direction (the core of which is the distribution of “scrolling amount”), but also provide different solutions and schemes. The feasibility of the scheme is also verified in the process of copying douban detail page. However, the overall implementation of these views is still relatively simple, and many cases are not taken into account. For example, it is not very good to nest LinkedScrollView and JellyLayout directly to achieve elastic effect. After that, we still need to continue to learn and improve.