Preface, a day at the point of sale at the time, notice that the list page of the sliding effect is good, but feel that the gesture is quite complicated, just met in the understanding of the touch event, so the time to the Hungry list page try to write this effect
1. First to put an implementation
Logic is when the outside of the ScrollView does not slip to the bottom, when the slide, is sliding the outside of the ScrollView, when the external ScrollView to the base, we then slide, is sliding inside the list, in addition to the left and right sliding, When the distance between the left and right slide is greater than the minpageslop, then the left and then slide.
The following are the list pages that are hungry:
2. Introduction
在项目根目录的build.gradle文件下增加jitpack的repo地址allprojects { repositories { jcenter() maven { url "https://jitpack.io" } }}在需要引入的module中引入librarydependencies { implementation ‘com.github.WelliJohn:StickScrollView:0.0.3‘}
3. Layout description of the interface
<wellijohn.org.stickscrollview.scrollviewwithstickheader android:id= "@+id/stick_scroll_view" Android: Layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" > <Li Nearlayout android:id= "@+id/ll" android:layout_width= "Match_parent" android:layout_height = "Match_parent" android:descendantfocusability= "blocksdescendants" Android:focusableintouchmode= "Tru E "android:orientation=" vertical ">//This is the header section, can be arbitrarily customized </LinearLayout> <linearlayout android:id= "@+id/ll_stick_list" android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "vertical" > <andr Oid.support.design.widget.TabLayout android:id= "@+id/order_manager_tabs" Android:lay Out_width= "Match_parent" android:layout_height= "50DP" android:background= "#FFFFFF" Tools: tabgravity= "Fill" tools:tabmode= "fixed"/> <android.support.v4.view.viewpager Android:id= "@+id/vp" android:layout_width= "Match_parent" Android:layo ut_height= "Wrap_content"/> </LinearLayout> </LinearLayout> </WELLIJOHN.ORG.STICKSC Rollview. Scrollviewwithstickheader>
For example, we see the list page interface of the hungry, we need to be in the Viewpager settings fragment,fragment is left and right two lists, see Fragment XML settings:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <wellijohn.org.stickscrollview.ChildRecyclerView android:id="@+id/child_recyclerview" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#EEEEEE" /> <wellijohn.org.stickscrollview.ChildRecyclerView android:id="@+id/child_recyclerview_right" android:layout_width="0dp" android:layout_height="wrap_content" android:background="#FFFFFF" android:layout_weight="3" /></LinearLayout>
4. Precautions
- Scrollviewwithstickheader currently supports placement of Viewpager,scrollview,recyclerview,webview
- Scrollview,recyclerview,webview need to correspond with Childscrollview,childrecyclerview,childwebview
- We need to call Mstickscrollview.setcontentview (Mcontentview) When we use it, Mllsticklist is the part where we need to stickheader+ the list, If you do not have stickheader, then directly set the list to come in, in short, you want to slide to where the next slide is simply the lower part of the slide, then you have the following view overall set to Mcontentview. Just that Contentview is the view with ID ll_stick_list.
- In addition here Scrollviewwithstickheader add AutoScroll property, by default is off, if autoscroll:true, when our fingers release, Contentview will determine whether to automatically swipe to the top or hide.
5.0.0.3 version Repair When there is the bottom of the action bar, the interface of the scrolling problem of confusion.
When we have a view at the bottom that needs to be fixed, we need to pass Mstickscrollview.setbottomview (Mviewbottom), as shown below:
6. The use of any control we better know how it is implemented, so here is a brief introduction to the design of this control (Childscrollview,childrecyclerview,childwebview below is called sub-scrollview)?
- 6.1. When should we let the external ScrollView perform the sliding event, and when to let the sub-scrollview perform the swipe. In Android we have a method GetParent (). Requestdisallowintercepttouchevent (True); is to have the view get to the corresponding event.
- 6.2. Now that we know how to make the touch event of the view, then we need to understand under what circumstances we should let the parent view perform a scrolling event and when to let the child view perform a scrolling event. As follows, I have listed the table:
Parent ScrollView |
Sub ScrollView |
gesture Swipe Direction |
which view control the slide event is assigned | to
Not at the bottom |
Top of |
Up |
Parent ScrollView |
Not at the bottom |
Top of |
Down |
Parent ScrollView |
Bottom |
Not on top |
Up |
Sub ScrollView |
Bottom |
Not on top |
Down |
Sub ScrollView |
Bottom |
Top of |
Down |
Parent ScrollView |
Bottom |
Top of |
Up |
Sub ScrollView |
Here, when the parent ScrollView is not at the bottom, there is no case where the child scrollview is not at the top, so it is not analyzed here.
6.3. Analyzed, in what circumstances should we let the child ScrollView or the parent ScrollView capture the sliding event, we can write the corresponding code in our sub-scrollview to deal with it?
as the following is an override of a Childscrollview Ontouchevent method, the other Childrecyclerview and childwebview processing are the same:
@Overridepublic boolean ontouchevent (Motionevent event) {if (Mscrollviewwithstickheader = = null) return Super.ontouche Vent (event); int action = Event.getaction (); if (action = = motionevent.action_down) {mlastx = Event.getx (); Mlasty = Event.gety (); First determine if the outer scrollview is sliding to the bottom if (mscrollviewwithstickheader.isbottom ()) {getParent (). Requestdisallowinterc Epttouchevent (TRUE); Return Super.ontouchevent (event); The else {//intercept event itself does not handle getParent (). Requestdisallowintercepttouchevent (false); return false; }} if (action = = motionevent.action_move) {Float Nowy = event.gety (); if (!mscrollviewwithstickheader.isbottom () &&!isscrolledtotop && nowy-mlasty > 0) {if (M Ath.abs (Event.getx ()-MLASTX) < Minpageslop) {getParent (). Requestdisallowintercepttouchevent (True); Return Super.ontouchevent (event); } else {getParent (). Requestdisallowintercepttouchevent (True); return false; }} else if (Mscrollviewwithstickheader.isbottom () &&!isscrolledtobottom && nowy-mlasty < 0) {if (Math.Abs (Event.getx ()-MLASTX) < Minpageslop) {getParent (). Requestdisallowinterceptto Uchevent (TRUE); Return Super.ontouchevent (event); } else {getParent (). Requestdisallowintercepttouchevent (True); return false; }} else if (Mscrollviewwithstickheader.isbottom () &&!isscrolledtotop && nowy-mlasty > 0) { if (Math.Abs (Event.getx ()-MLASTX) < Minpageslop) {getParent (). Requestdisallowintercepttouch Event (TRUE); Return Super.ontouchevent (event); } else {getParent (). Requestdisallowintercepttouchevent (True); return false; } } else {getParent (). Requestdisallowintercepttouchevent (false); }} if (action = = MOTIONEVENT.ACTION_UP | | action = = motionevent.action_cancel) {getParent (). Requestdisallow Intercepttouchevent (FALSE); } return Super.ontouchevent (event);}
In this way, we can achieve the fixed head of the ScrollView.
7.github address, your likes or star is my biggest power to continue to open source.
Android with Sticky head scrollview