ScrollView Inside ScrollView

问题:

I Know people from Google have asked us not to put Scrollable view inside another Scrollable view but is there any official statement from them directing us not to do so?

回答1:

Is this close enough?

You should never use a HorizontalScrollView with a ListView, since ListView takes care of its own scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by HorizontalScrollView.

http://developer.android.com/reference/android/widget/HorizontalScrollView.html

UPDATE:

Since you may be forced to use a two dimensional scrollview, you may consider using this: Internet archive of blog.gorges.us/2010/06/android-two-dimensional-scrollview/

I haven\'t used this but it may be a reasonable approach.

回答2:

Try this one

Note: Here parentScrollView means Outer ScrollView And childScrollView means Innner ScrollView

parentScrollView.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
        Log.v(TAG, \"PARENT TOUCH\");

        findViewById(R.id.child_scroll).getParent()
                .requestDisallowInterceptTouchEvent(false);
        return false;
    }
});

childScrollView.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
        Log.v(TAG, \"CHILD TOUCH\");

        // Disallow the touch request for parent scroll on touch of  child view
        v.getParent().requestDisallowInterceptTouchEvent(true);
        return false;
    }
});

回答3:

Atul Bhardwaj\'s answer above is the correct way to do it. But in case someone needs to apply it to a ScrollView where you have less control of the parent, I think this is flexible enough and just the way it\'s supposed to work:

private void makeMyScrollSmart() {
    myScroll.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View __v, MotionEvent __event) {
            if (__event.getAction() == MotionEvent.ACTION_DOWN) {
                //  Disallow the touch request for parent scroll on touch of child view
                requestDisallowParentInterceptTouchEvent(__v, true);
            } else if (__event.getAction() == MotionEvent.ACTION_UP || __event.getAction() == MotionEvent.ACTION_CANCEL) {
                // Re-allows parent events
                requestDisallowParentInterceptTouchEvent(__v, false);
            }
            return false;
        }
    });
}

private void requestDisallowParentInterceptTouchEvent(View __v, Boolean __disallowIntercept) {
    while (__v.getParent() != null && __v.getParent() instanceof View) {
        if (__v.getParent() instanceof ScrollView) {
            __v.getParent().requestDisallowInterceptTouchEvent(__disallowIntercept);
        }
        __v = (View) __v.getParent();
    }
}

What the function does is add a touch listener to myScroll that disables the parent\'s touch intercept when a touch starts in the child, and then enables it back when the touch actually ends. You don\'t need a reference to the parent ScrollView and it doesn\'t have to be the immediate parent... it\'ll travel the display list until it finds it.

Best of both worlds, in my opinion.

回答4:

childScrollView.setOnTouchListener(new View.OnTouchListener() {

      @Override
    public boolean onTouch(View v, MotionEvent event) {

        int action = event.getAction();
        switch (action) {
        case MotionEvent.ACTION_DOWN:
           // Disallow ScrollView to intercept touch events.
          v.getParent().requestDisallowInterceptTouchEvent(true);
           break;

        case MotionEvent.ACTION_UP:
            // Allow ScrollView to intercept touch events.
            v.getParent().requestDisallowInterceptTouchEvent(false);
            break;
        }

        return false;
    }
});

v.getParent() = parent scrollView.

回答5:

Here is a possible solution. When reached the end of a child ScrollView it passes the control to the parent ScrollView to scroll. It works with ScrollView and ListView inside a ScrollView.

Step 1 - set the parent OnTouchListener

parentScroll.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {
        v.getParent().requestDisallowInterceptTouchEvent(false);
        return false;
    }
});

Step 2 - set the childrens OnTouchListener (ScrollView or ListView)

aChildScrollView.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event)
    {
        v.getParent().requestDisallowInterceptTouchEvent(shouldRequestDisallowIntercept((ViewGroup) v, event));
        return false;
    }
});
aListView.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {
        v.getParent().requestDisallowInterceptTouchEvent(shouldRequestDisallowIntercept((ViewGroup) v, event));
        return false;
    }
});

Step 3 - here are the required magic methods for the correct functionality

protected boolean shouldRequestDisallowIntercept(ViewGroup scrollView, MotionEvent event) {
    boolean disallowIntercept = true;
    float yOffset = getYOffset(event);

    if (scrollView instanceof ListView) {
        ListView listView = (ListView) scrollView;
        if (yOffset < 0 && listView.getFirstVisiblePosition() == 0 && listView.getChildAt(0).getTop() >= 0) {
            disallowIntercept = false;
        }
        else if (yOffset > 0 && listView.getLastVisiblePosition() == listView.getAdapter().getCount() - 1 && listView.getChildAt(listView.getChildCount() - 1).getBottom() <= listView.getHeight()) {
            disallowIntercept = false;
        }
    }
    else {
        float scrollY = scrollView.getScrollY();
        disallowIntercept = !((scrollY == 0 && yOffset < 0) || (scrollView.getHeight() + scrollY == scrollView.getChildAt(0).getHeight() && yOffset >= 0));

    }

    return disallowIntercept;
}

protected float getYOffset(MotionEvent ev) {
    final int historySize = ev.getHistorySize();
    final int pointerCount = ev.getPointerCount();

    if (historySize > 0 && pointerCount > 0) {
        float lastYOffset = ev.getHistoricalY(pointerCount - 1, historySize - 1);
        float currentYOffset = ev.getY(pointerCount - 1);

        float dY = lastYOffset - currentYOffset;

        return dY;
    }

    return 0;
}

回答6:

[...] is there any official statement from them directing us not to do so?

I think there is though I can\'t seem to find it in my notes. I know I found such a statement when trying to have a scroll view in a list activity. I think there is actually a logical focus \"bug\" in the way the Android UI system deals with nested scrollables which probably should be better detected and communicated to the developer. But my advice is...

In the end it is better to consider a single scrollable view for the sake of the user anyway. It\'s like having scroll bars inside scroll bars on an HTML page; it may be legal but its a terrible user experience.

回答7:

I found a very good solution. Please use this code.

    parentScrollView.setOnTouchListener(new View.OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {

            Utils.showLog(\"PARENT TOUCH\");
            findViewById(R.id.activity_mesh_child_scrollView).getParent().requestDisallowInterceptTouchEvent(false);
            return false;
        }
    });

    childScrollView.setOnTouchListener(new View.OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {

            Utils.showLog(\"CHILD TOUCH\");
            // Disallow the touch request for parent scroll on touch of child view
            v.getParent().requestDisallowInterceptTouchEvent(true);
            return false;
        }
    });

This will surely work. Please try and let me know if not working.

回答8:

Actually, there is an official statement about it, on a quite old video called \"the world of ListView\". They say not to put any scrollable view inside another one (when both are in the same direction).

However, now we have a new view that allows both views to scroll at the same time, probably to show a cool effect:

https://developer.android.com/reference/android/support/v4/widget/NestedScrollView.html

I didn\'t find any example for this, so what I wrote is just a guess of what it does and what it\'s used for.

回答9:

Android support v4 library has a class called NestedScrollView.

Try Nested Scroll View: http://ivankocijan.xyz/android-nestedscrollview/

回答10:

You can put a ScrollView inside another ScrollView. Just extend the child ScrollView to override the onTouchEvent method. Like so

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class ChildScrollView extends android.widget.ScrollView {
    private int parent_id;

    public ChildScrollView(Context context) {
        super(context);
    }

    public ChildScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ChildScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event){
        requestDisallowInterceptTouchEvent(true);
        return super.onTouchEvent(event);
    }
}

回答11:

Here, i have created a sample project related to ScrollView inside a ScrollView. One View is Scrollable Both ways. Check It Out :-

MainActivity.java -

package com.example.dev_task_193_scrollview;

import com.example.dev_task_196_scrollview.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.Toast;

public class MainActivity extends Activity implements View.OnClickListener{
    ImageView imageView1,imageView2,imageView3,IVimage1,IVimage2,IVimage3,IVimage4,IVimage5,IVimage6;
    ListView listView1,listView2;
    HorizontalScrollView horizontalScrollView1,horizontalScrollView2;
    ScrollView parentScrollView, scrollView1;
    RelativeLayout relativeLayout1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String[] values = new String[] { \"Android\", \"iPhone\", \"WindowsMobile\",
                \"Blackberry\", \"WebOS\", \"Ubuntu\", \"Windows7\", \"Max OS X\",
                \"Linux\", \"OS/2\", \"Ubuntu\", \"Windows7\", \"Max OS X\", \"Linux\",
                \"OS/2\", \"Ubuntu\", \"Windows7\", \"Max OS X\", \"Linux\", \"OS/2\",
                \"Android\", \"iPhone\", \"WindowsMobileWindowsMobileWindowsMobileWindowsMobile\" };

        relativeLayout1 = (RelativeLayout) findViewById(R.id.relativeLayout1);
        imageView1 = (ImageView) findViewById(R.id.imageView1);
        imageView1.setBackgroundResource(R.drawable.info);

        imageView2 = (ImageView) findViewById(R.id.imageView2);
        imageView2.setBackgroundResource(R.drawable.info);

        imageView3 = (ImageView) findViewById(R.id.imageView3);
        imageView3.setBackgroundResource(R.drawable.info);

        listView1 = (ListView) findViewById(R.id.listView1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                R.layout.list_item, values);
        listView1.setAdapter(adapter);

        listView2 = (ListView) findViewById(R.id.listView2);
        ArrayAdapter<String> adapter1 = new ArrayAdapter<String>(this,
                R.layout.list_item, values);
        listView2.setAdapter(adapter1);


        parentScrollView = (ScrollView) findViewById(R.id.parentScrollView);
        scrollView1 = (ScrollView) findViewById(R.id.scrollView1);


        horizontalScrollView1 = (HorizontalScrollView) findViewById(R.id.horizontalScrollView1);
        horizontalScrollView2 = (HorizontalScrollView) findViewById(R.id.horizontalScrollView2);


        IVimage1 = (ImageView) findViewById(R.id.IVimage1);
        IVimage2 = (ImageView) findViewById(R.id.IVimage2);
        IVimage3 = (ImageView) findViewById(R.id.IVimage3);
        IVimage4 = (ImageView) findViewById(R.id.IVimage4);
        IVimage5 = (ImageView) findViewById(R.id.IVimage5);
        IVimage6 = (ImageView) findViewById(R.id.IVimage6);


        scrollView1.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });

        horizontalScrollView1.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });
        listView1.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });
        listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                Toast.makeText(getApplicationContext(), \"Clicked \"+parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();

            }

        });
        listView2.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                Toast.makeText(getApplicationContext(), \"Clicked \"+parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();

            }

        });

        listView2.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });
        horizontalScrollView2.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });
        /*imageView1.setOnClickListener(this);
        imageView2.setOnClickListener(this);
        imageView3.setOnClickListener(this);*/
        IVimage1.setOnClickListener(this);
        IVimage2.setOnClickListener(this);
        IVimage3.setOnClickListener(this);
        IVimage4.setOnClickListener(this);
        IVimage5.setOnClickListener(this);
        IVimage6.setOnClickListener(this);
        imageView1.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();

                return false;
            }
        });

        imageView2.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();

                return false;
            }
        });
        imageView3.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event)
            {
                //  Disallow the touch request for parent scroll on touch of child view
                parentScrollView.requestDisallowInterceptTouchEvent(true);
                Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();

                return false;
            }
        });

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    @Override
    public void onClick(View v) {
        switch(v.getId()){
        case R.id.imageView1:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.imageView2:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.imageView3:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.IVimage1:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.IVimage2:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.IVimage3:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.IVimage4:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.IVimage5:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.IVimage6:
            Toast.makeText(getApplicationContext(), \"Clicked \"+v.getTag(), Toast.LENGTH_SHORT).show();
            break;  




        }
        // TODO Auto-generated method stub

    }
}

activity_main.xml -

<ScrollView xmlns:android=\"http://schemas.android.com/apk/res/android\"
    xmlns:tools=\"http://schemas.android.com/tools\"
    android:id=\"@+id/parentScrollView\"
    android:layout_width=\"fill_parent\"
    android:layout_height=\"fill_parent\"
    android:layout_marginBottom=\"5dp\"
    android:layout_marginLeft=\"5dp\"
    android:layout_marginRight=\"5dp\"
    android:layout_marginTop=\"5dp\"
    android:background=\"@drawable/login_bg\" >

    <RelativeLayout
        android:id=\"@+id/relativeLayout1\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\" >

        <ScrollView
            android:id=\"@+id/scrollView1\"
            android:layout_width=\"fill_parent\"
            android:layout_height=\"300dp\" >

            <HorizontalScrollView
                android:id=\"@+id/horizontalScrollView1\"
                android:layout_width=\"match_parent\"
                android:layout_height=\"300dp\"
                android:fillViewport=\"false\" >

                <RelativeLayout
                    android:layout_width=\"wrap_content\"
                    android:layout_height=\"wrap_content\"
                    android:layout_marginLeft=\"5dp\"
                    android:background=\"@drawable/bg\" >

                    <ImageView
                        android:id=\"@+id/imageView1\"
                        android:layout_width=\"300dp\"
                        android:layout_height=\"400dp\"
                        android:tag=\"imageView1\" />

                    <ImageView
                        android:id=\"@+id/imageView2\"
                        android:layout_width=\"300dp\"
                        android:layout_height=\"400dp\"
                        android:layout_toRightOf=\"@+id/imageView1\"
                        android:tag=\"imageView2\" />

                    <ImageView
                        android:id=\"@+id/imageView3\"
                        android:layout_width=\"300dp\"
                        android:layout_height=\"400dp\"
                        android:layout_toRightOf=\"@+id/imageView2\"
                        android:tag=\"imageView3\" />
                </RelativeLayout>
            </HorizontalScrollView>
        </ScrollView>

        <ListView
            android:id=\"@+id/listView1\"
            android:layout_width=\"500dp\"
            android:layout_height=\"400dp\"
            android:layout_below=\"@+id/scrollView1\"
            android:layout_centerHorizontal=\"true\"
            android:layout_marginTop=\"5dp\"
            android:background=\"@drawable/ic_launcherwrweq\" >
        </ListView>

        <HorizontalScrollView
            android:id=\"@+id/horizontalScrollView2\"
            android:layout_width=\"300dp\"
            android:layout_height=\"wrap_content\"
            android:layout_below=\"@+id/listView1\"
            android:layout_centerHorizontal=\"true\"
            android:layout_gravity=\"center\"
            android:layout_marginTop=\"5dp\"
            android:background=\"@drawable/claim_detail_header_bg\"
            android:fillViewport=\"true\" >

            <LinearLayout
                android:layout_width=\"wrap_content\"
                android:layout_height=\"wrap_content\"
                android:orientation=\"horizontal\" >

                <ImageView
                    android:id=\"@+id/IVimage1\"
                    android:layout_width=\"125dp\"
                    android:layout_height=\"125dp\"
                    android:padding=\"15dp\"
                    android:src=\"@drawable/a\"
                    android:tag=\"a\" >
                </ImageView>

                <ImageView
                    android:id=\"@+id/IVimage2\"
                    android:layout_width=\"125dp\"
                    android:layout_height=\"125dp\"
                    android:padding=\"15dp\"
                    android:src=\"@drawable/b\"
                    android:tag=\"b\" >
                </ImageView>

                <ImageView
                    android:id=\"@+id/IVimage3\"
                    android:layout_width=\"125dp\"
                    android:layout_height=\"125dp\"
                    android:padding=\"15dp\"
                    android:src=\"@drawable/c\"
                    android:tag=\"c\" >
                </ImageView>

                <ImageView
                    android:id=\"@+id/IVimage4\"
                    android:layout_width=\"125dp\"
                    android:layout_height=\"125dp\"
                    android:padding=\"15dp\"
                    android:src=\"@drawable/g\"
                    android:tag=\"g\" >
                </ImageView>

                <ImageView
                    android:id=\"@+id/IVimage5\"
                    android:layout_width=\"125dp\"
                    android:layout_height=\"125dp\"
                    android:padding=\"15dp\"
                    android:src=\"@drawable/e\"
                    android:tag=\"e\" >
                </ImageView>

                <ImageView
                    android:id=\"@+id/IVimage6\"
                    android:layout_width=\"125dp\"
                    android:layout_height=\"125dp\"
                    android:padding=\"15dp\"
                    android:src=\"@drawable/f\"
                    android:tag=\"f\" >
                </ImageView>
            </LinearLayout>
        </HorizontalScrollView>

        <ListView
            android:id=\"@+id/listView2\"
            android:layout_width=\"500dp\"
            android:layout_height=\"400dp\"
            android:layout_below=\"@+id/horizontalScrollView2\"
            android:layout_centerHorizontal=\"true\"
            android:layout_marginTop=\"5dp\"
            android:background=\"@drawable/ic_launcherwrweq\" >
        </ListView>
    </RelativeLayout>

</ScrollView>

list_item.xml(for ListView) -

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:id=\"@android:id/text1\"
    android:layout_width=\"match_parent\"
    android:layout_height=\"wrap_content\"
    android:gravity=\"center_vertical\"
    android:textSize=\"25sp\"
    android:maxLines=\"1\"
    android:singleLine=\"true\"
/>

回答12:

If anyone is looking for an answer to this, I had a slightly different implementation. I extended the ScrollView class and implemented onTouchListener in the child, and set it to self in the constructor.

In the onTouch callback, if the motion event object came with a value for pointer count as 2, I returned true, otherwise false. This way, if two fingers were moving on screen, it would consider it as a pinch to zoom, otherwise would consider it as normal scroll. I didn\'t request for parent touch disable etc.

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    if(motionEvent.getPointerCount() == 2){
        mCallbacks.onPinchZoomAction(motionEvent);
        return true;
    }
    return false;
}

回答13:

Its not only that Google says its bad practice, it just doesnt make much sense. Supose you have two vertical scrollable views nested one inside the other. When you move you finger over the scroll views, which one do you want to move, the inner or the outer one?

You should rethink your UI desing to something that does not require this, there a many ways to make a great UI and still keep it really simple.