• Android. Scrolling 2 listviews together




    OK. What I'm trying to achieve is a layout that does the same effect as frozen panes in Excel. That is I want a header row that scrolls horizontally with the main ListView and a left hand ListView that scrolls vertically with the main ListView. The header row and the left hand listview should remain stationary when scrolling in the other dimension.

    Here is the xml layout:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recordViewLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <LinearLayout android:layout_width="160dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <CheckBox
                android:id="@+id/checkBoxTop"
                android:text="Check All"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ListView android:id="@+id/engNameList"
                android:layout_width="160dp"
                android:layout_height="wrap_content"/>
        </LinearLayout>


        <HorizontalScrollView  
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout android:id="@+id/scroll"  
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <include layout="@layout/record_view_line" android:id="@+id/titleLine" />

                <ListView
                    android:id="@android:id/list"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"/>

            </LinearLayout>

        </HorizontalScrollView>
    </LinearLayout>

    I'm then using this code in the ListActivity

    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        View v = recordsListView.getChildAt(0);
        int top = (v == null) ? 0 : v.getTop();

    ((ListView)findViewById(R.id.engNameList)).setSelectionFromTop(firstVisibleItem, top);      
    }

    This should cause the left hand ListView to scroll when the right hand one is scrolled by the user. Unfortunately it doesn't.

    I've had a bit of a google about and it seems the setSelectionFromTop() function will not work on a ListView that is nested inside more than one layout.

    If this is the case can anyone suggest a way to get them to scroll together or a different way to set up the layout or a different technique altogether.
    android listview scroll
    share|improve this question
        
    asked Sep 9 '12 at 19:54
    s1ni5t3r
    5827
        
           
        
    Have you tried smootHSCrollToPosition: developer.android.com/reference/android/widget/… –  Waza_Be Sep 9 '12 at 20:05
           
        
    Thanks for the quick reply. However this isn't the solution. I am looking to get the listviews to scroll smoothly together. –  s1ni5t3r Sep 9 '12 at 20:34
    add comment
    3 Answers
    active oldest votes
    up vote 14 down vote
        

    Rewrite

    I didn't have much luck with passing the scrolling actions in one ListView to another. So I chose a different method: passing the MotionEvent. This lets each ListView calculate their own smooth scroll, fast scroll, or anything else.

    First, we'll need some class variables:

    ListView listView;
    ListView listView2;

    View clickSource;
    View touchSource;

    int offset = 0;

    Every method that I add to listView will be almost identical for listView2, the only difference is that listView2 will reference listView (not itself). I didn't include the repetitive listView2 code.

    Second, let's start with the OnTouchListener:

    listView = (ListView) findViewById(R.id.engNameList);
    listView.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(touchSource == null)
                touchSource = v;

            if(v == touchSource) {
                listView2.dispatchTouchEvent(event);
                if(event.getAction() == MotionEvent.ACTION_UP) {
                    clickSource = v;
                    touchSource = null;
                }
            }

            return false;
        }
    });

    To prevent circular logic: listView calls listView2 calls listView calls... I used a class variable touchSource to determine when a MotionEvent should be passed. I assumed that you don't want a row click in listView to also click in listView2, so I used another class variable clickSource to prevent this.

    Third, the OnItemClickListener:

    listView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            if(parent == clickSource) {
                // Do something with the ListView was clicked
            }
        }
    });

    Fourth, passing every touch event isn't perfect because occasional discrepancies appear. The OnScrollListener is perfect for eliminating these:

    listView.setOnScrollListener(new OnScrollListener() {
        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            if(view == clickSource)
                listView2.setSelectionFromTop(firstVisibleItem, view.getChildAt(0).getTop() + offset);
        }

        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {}
    });

    (Optional) Lastly, you mentioned that you have trouble since listView and listView2 begin at different heights in your layout... I highly recommend modifying your layout to balance the ListViews, but I found a way to address this. However it is a little tricky.
    You cannot calculate the difference in height between the two layouts until after the entire layout have been rendered, but there is no callback for this moment... so I use a simple handler:

    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            // Set listView's x, y coordinates in loc[0], loc[1]
            int[] loc = new int[2];
            listView.getLocationInWindow(loc);

            // Save listView's y and get listView2's coordinates
            int firstY = loc[1];
            listView2.getLocationInWindow(loc);

            offset = firstY - loc[1];
            //Log.v("Example", "offset: " + offset + " = " + firstY + " + " + loc[1]);
        }
    };

    I assume that a half second delay is long enough to render the layout and start the timer in onResume():

    handler.sendEmptyMessageDelayed(0, 500);

    If you do use an offset I want to be clear that listView2's OnScroll method subtracts the offset rather than adds it:

    listView2.setSelectionFromTop(firstVisibleItem, view.getChildAt(0).getTop() - offset);

    Hope that helps!
    share|improve this answer
        
    edited Dec 28 '12 at 7:04

        
    answered Sep 9 '12 at 20:47
    Sam
    42.9k73971
        
           
        
    Not sure if I'm doing something wrong but although the dispatchTouchEvent is called it doesn't seem to send any touch event to the other listview. OnTouchEvent is not called for the other listview anyway. –  s1ni5t3r Sep 10 '12 at 10:58
           
        
    I noticed that isFocused() didn't behave the way I first thought so I switched tactics. Hope this helps. –  Sam Sep 10 '12 at 18:38
           
        
    Magic. This is the solution. Works perfectly. Thanks Sam. –  s1ni5t3r Sep 10 '12 at 19:28
           
        
    Oh Dear. I spoke too soon. This method works well but if you try to scoot the list (that is you give it another push while it's still in motion) the two lists become disconnected. –  s1ni5t3r Sep 14 '12 at 14:51
    1     
        
    Thanks Sam, I was expecting a simple ugly solution to get around the initial problem but have come away with an elegant solution that performs perfectly. I'm afraid I don't have the rep to vote your answer up though. –  s1ni5t3r Sep 18 '12 at 17:47
    show 4 more comments
    up vote 2 down vote
        

    This thread has helped me find a solution for a similar problem I've been struggling with for a while. It is also based on intercepting touch events. In this case the syncing works for multiple listviews and is entirely symmetric.

    The major challenge was to prevent list item clicks to propagate to the other listviews. I need clicks and long clicks dispatched only by the listview that initially received the touch event, including in particular the highlight feedback when you just touch down on an item (intercepting onClick event is no use since it's too late in the calling hierarchy).

    The key to this is intercepting the touch event twice. First, the initial touch event is relayed to the other listviews. The same onTouch handler function catches these and feeds them to a GestureDetector. In the GestureDetector callbacks the static touch events (onDown etc.) are consumed (return true) whereas the motion gestures aren't (return false) such that they can be further dispatched by the view itself and trigger the scrolling.

    Using setPositionFromTop inside onScroll didn't work for me because it makes the scrolling behavior extremely sluggish. OnScroll is used instead to align initial scroll positions as new ListViews are added to the Syncer.

    The only problem that persists so far is the one brought up by s1ni5t3r above. If you double-fling the listView then they still become disconnected.

    public class ListScrollSyncer
        implements AbsListView.OnScrollListener, OnTouchListener, OnGestureListener
    {
        private GestureDetector gestureDetector;
        private Set<ListView>   listSet = new HashSet<ListView>();
        private ListView currentTouchSource;

        private int currentOffset = 0;
        private int currentPosition = 0;

        public void addList(ListView list)
        {
            listSet.add(list);
            list.setOnTouchListener(this);
            list.setSelectionFromTop(currentPosition, currentOffset);

            if (gestureDetector == null)
                gestureDetector = new GestureDetector(list.getContext(), this);
        }

        public void removeList(ListView list)
        {
            listSet.remove(list);
        }

        public boolean onTouch(View view, MotionEvent event)
        {
            ListView list = (ListView) view;

            if (currentTouchSource != null)
            {
                list.setOnScrollListener(null);
                return gestureDetector.onTouchEvent(event);
            }
            else
            {
                list.setOnScrollListener(this);
                currentTouchSource = list;

                for (ListView list : listSet)
                    if (list != currentTouchSource)
                        list.dispatchTouchEvent(event);

                currentTouchSource = null;
                return false;
            }
        }

        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
        {
            if (view.getChildCount() > 0)
            {
                currentPosition = view.getFirstVisiblePosition();
                currentOffset   = view.getChildAt(0).getTop();
            }
        }

        public void onScrollStateChanged(AbsListView view, int scrollState) { }

        // GestureDetector callbacks
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { return false; }
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; }
        public boolean onSingleTapUp(MotionEvent e) { return true; }
        public boolean onDown(MotionEvent e) { return true; }
        public void onLongPress(MotionEvent e) { }
        public void onShowPress(MotionEvent e) { }
    }

    edit: the double-fling issue can be resolved by using a state variable.

    private boolean scrolling;

    public boolean onDown(MotionEvent e) { return !scrolling; }

    public void onScrollStateChanged(AbsListView view, int scrollState)
    {
        scrolling = scrollState != SCROLL_STATE_IDLE;
    }

    share|improve this answer
        
    edited Jun 10 '13 at 21:36

        
    answered Feb 16 '13 at 13:16
    Glemi
    506
        
           
        
    I'm going to take a shot at implementing this tonight. I'll let you know if it works out. Hopefully you can help me if it doesn't? :) –  Kgrover Apr 1 '13 at 1:54
           
        
    Hm, this doesn't seem to work at all :( They get unsynced almost immediately. –  Kgrover Apr 1 '13 at 4:02
           
        
    Sorry to hear this Kgrover. Does it get unsynced even if you do not "double-fling" on the list? If not then the edit in the answer above might be a solution - with this the listviews in my app are now very stable. Perhpas it also depends on how fast your phone is (Mine is an S3 and I haven't tested it on any other phone). –  Glemi Jun 10 '13 at 21:41
    add comment
    up vote 0 down vote accepted
        

    OK. I have an answer now. The problem being that .setSelectionFromTop() would only work if the listview was in the top layout (ie. not nested). Afters some head scratching I realised that I could make my layout a RelativeLayout and get the same look but without having to nest layouts for the checkbox and listview. This is the new layout:

        <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/recordViewLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <CheckBox android:id="@+id/checkBoxTop"
                android:text="Check All"
                android:layout_width="160dp"
                android:layout_height="wrap_content"/>"


            <ListView android:id="@+id/engNameList"
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:layout_below="@+id/checkBoxTop"/>       





            <HorizontalScrollView  
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/checkBoxTop">

                <LinearLayout android:id="@+id/scroll"  
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <include layout="@layout/record_view_line" android:id="@+id/titleLine" />

                    <ListView
                        android:id="@android:id/list"
                        android:layout_height="wrap_content"
                        android:layout_width="match_parent"/>

                </LinearLayout>

            </HorizontalScrollView>
        </RelativeLayout>

    This basically is the code that goes with the layout.

    In onCreate()

        engListView=getListView();
        engListView.setOnTouchListener(this);


        recordListView=(ListView)findViewById(R.id.recordList);
        recordListView.setOnScrollListener(this);

    and the listener methods:

    public boolean onTouch(View arg0, MotionEvent event) {
        recordListView.dispatchTouchEvent(event);

        return false;
    }


    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        View v=view.getChildAt(0);
        if(v != null)
            engListView.setSelectionFromTop(firstVisibleItem, v.getTop());
    }

  • 相关阅读:
    为结构体中函数指针赋值的两种方法(转)
    (obj) error: LNK2019: 无法解析的外部符号解决方法
    js cookie存储方法
    js关于对象键值为数字型时输出的对象自动排序问题的解决方法
    HTML5 LocalStorage 本地存储的用法
    onhashchange事件,只需要修改hash值即可响应onhashchange事件中的函数(适用于上一题下一题和跳转页面等功能)
    js实现页面a向页面b传参的方法
    前端比较好的学习资料(包括js和css)以及 最全前端资源汇集
    字符串js编码转换成实体html编码的方法(防范XSS攻击)
    fis3使用环境
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/3632551.html
Copyright © 2020-2023  润新知