Synchronize the position of two ScrollViews

Question

I am trying to synchronize the positions of two ScrollViews. I am trying to do this to display a list of guidebooks on TV.

I created my own class that extends RelativeLayout to display the manual. This relative layout has four children: an image in the upper left corner, a HorizontalScrollView to display column headings in the upper right corner, a ScrollView for displaying row headings in the lower left corner, and a ScrollView in the lower right corner that contains lists, This ScrollView then contains a HorizontalScrollView. which, in turn, contains a LinearLayout with several child views displaying the data. Hope this explains it clearly, but here is a chart to make it clearer:

____________ |__|___hsv___| | | | | | sv -> | | | hsv -> | |sv| ll -> | | | etc | | | | |__|_________| 

I set it up like this because I wanted the guide lists to scroll both horizontally and vertically, but there is no scroll that does this. In addition, I want the row and column headings to appear regardless of the position of the index lists, but I want them to be properly aligned. Therefore, I am trying to find a way to synchronize the positions of two hsv, as well as synchronize the positions of two sv. I am also trying to do this in such a way as to avoid just starting the handler every few milliseconds, to poll one view and call scrollTo on the other.

I am by no means sure that this is the best way to do this, but this is what I came up with. If anyone has any other suggestions, please feel free to!

Answer 1

Should I use onTouchEvent (MotionEvent me) in all of your panels? When one of your panels scrolls, this method will be called, and it can make sure that everyone else is in sync.

Answer 2

Touch event processing does not work 100%. The number of scrolls in different views may not always be synchronized.

Answer 3

Handling touch events is not enough, because if you do a quick rollback, scrolling continues for some time after releasing the touch. The solution is to override the computeScroll () method. See https://github.com/chrisjenx/ParallaxScrollView how to do it there.

Answer 4

You can see this post: Link

What this guy actually does is he creates custom ScrollViews and overrides the onScrollChanged method, adds a listener, and then synchronizes them to the ones they draw on the screen.

Now you can add a ScrollView to the HorizontalScrollView as the main frame. The left bar will be a HorizontalScrollView , and the top a ScrollView . Then you register the main ScrollView and the main HorizontalScrollView on two separate ScrollManagers (see ScrollManagers above).

Then disable hsv and sv scrolling and add them to the corresponding ScrollManagers . Then everything should work fine.

-

PS. If you use only the listeners themselves, and not the ScrollManager , you will have a synchronization delay of 1 frame.

Answer 5

I reached the same layout by doing something below.

You will find that the SyncedScrollView in xml is a regular scrollview used to synchronize two scroll lists.

You need to specify below two stackoverflow answers.

• SyngedScrollView andig answer
• optimized SynchedScrollView my answer

check below xml

 <RelativeLayout android:id="@+id/activity_main_linear_before_all_scroll" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/activity_main_empty_box" android:layout_width="50dp" android:layout_height="30dp" android:text="xx" android:gravity="center" /> <com.example.SyncedScrollView android:id="@+id/activity_main_observable_scrollview_1" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_below="@+id/activity_main_empty_box" android:fadeScrollbars="false" android:overScrollMode="never" android:scrollbars="none"> <LinearLayout android:id="@+id/activity_main_linear_left_headers" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="row 1" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="row 2" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="row 3" /> </LinearLayout> </com.example.SyncedScrollView> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_toEndOf="@+id/activity_main_empty_box" android:layout_toRightOf="@+id/activity_main_empty_box" android:fadeScrollbars="false" android:overScrollMode="never"> <RelativeLayout android:id="@+id/activity_main_body_relative" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:id="@+id/activity_main_top_headers" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="column 1" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="column 2" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="column 3" /> </LinearLayout> <com.example.SyncedScrollView android:id="@+id/activity_main_observable_scrollview_2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/activity_main_top_headers" android:fadeScrollbars="false" android:overScrollMode="never" android:scrollbars="vertical"> <LinearLayout android:id="@+id/activity_main_body" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/activity_main_body_row_1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="1,1" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="1,2" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="1,3" /> </LinearLayout> <LinearLayout android:id="@+id/activity_main_body_row_2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="2,1" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="2,2" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="2,3" /> </LinearLayout> <LinearLayout android:id="@+id/activity_main_body_row_3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="3,1" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="3,2" /> <TextView android:layout_width="50dp" android:layout_height="30dp" android:gravity="center" android:padding="5dp" android:text="3,3" /> </LinearLayout> </LinearLayout> </com.example.SyncedScrollView> </RelativeLayout> </HorizontalScrollView> </RelativeLayout> 

Each TextView cell is here. so you can set the background for drawing boxes (it will look like a table)

You can also dynamically add left headers, top headers and TextView body to dynamically create a table.

This is a screenshot of the layout.

Sorry for my clean english.