Android with Sticky head scrollview

Source: Internet
Author: User
Tags gety

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> &LT;/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:
to
Parent ScrollView Sub ScrollView gesture Swipe Direction which view control the slide event is assigned
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.