ScrollView内のViewPagerがスクロールしない
いくつかのコンポーネントを含む「ページ」があり、コンテンツはデバイスの高さよりも長くなっています。すべてのレイアウト（ページ全体）をScrollViewの中に入れるだけで問題ありません。
コンポーネントの1つはViewPagerです。これは正しくレンダリングされますが、スワイプ/フリングに対する応答が正しく実行されず、不安定であり、常に機能するとは限りません。 ScrollViewと「混同」しているようですので、正確な水平線に沿って投げたときにのみ100％動作します。
ScrollViewを削除すると、ViewPagerは完全に応答します。
私は周りを検索しましたが、これを既知の欠陥としては見つけていません。他の誰かがこれを経験しましたか？
- プラットフォームバージョン：1.6
- 互換性ライブラリv4。
- デバイス：HTC Incredible S
以下は、テストするためのサンプルコードです。ScrollViewをコメントアウトして、正しく動作することを確認します。
アクティビティ：
package com.ss.activities;
import com.ss.R;
import Android.app.Activity;
import Android.content.Context;
import Android.graphics.Color;
import Android.os.Bundle;
import Android.os.Parcelable;
import Android.support.v4.view.PagerAdapter;
import Android.support.v4.view.ViewPager;
import Android.view.View;
import Android.widget.TextView;
public class PagerInsideScollViewActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ViewPager vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(new MyPagerAdapter(this));
}
}
class MyPagerAdapter extends PagerAdapter {
private Context ctx;
public MyPagerAdapter(Context context) {
ctx = context;
}
@Override
public int getCount() {
return 2;
}
@Override
public Object instantiateItem(View collection, int position) {
TextView tv = new TextView(ctx);
tv.setTextSize(50);
tv.setTextColor(Color.WHITE);
tv.setText("SMILE DUDE, SMILE DUDE, SMILE DUDE, SMILE DUDE, SMILE DUDE, " +
"SMILE DUDE, SMILE DUDE, SMILE DUDE, SMILE DUDE, SMILE DUDE, " +
"SMILE DUDE, SMILE DUDE, SMILE DUDE, SMILE DUDE, SMILE DUDE, " +
"SMILE DUDE, SMILE DUDE, SMILE DUDE");
((ViewPager) collection).addView(tv);
return tv;
}
@Override
public void destroyItem(View collection, int position, Object view) {
((ViewPager) collection).removeView((View) view);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public void startUpdate(View arg0) {
}
@Override
public void finishUpdate(View arg0) {
}
}
レイアウト：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent" >
<LinearLayout
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:orientation="vertical" >
<Android.support.v4.view.ViewPager
Android:id="@+id/viewpager"
Android:layout_width="fill_parent"
Android:layout_height="300dp" />
</LinearLayout>
</ScrollView>
さらに読むと、スクロールコンポーネント内のスクロールコンポーネントに問題があることが明らかになりました。
解決策の1つは、含まれているスクロール可能なコンポーネント（私の場合はViewPager）の領域でScrollViewの垂直スクロールを「無効にする」ことです。
このソリューションのコードは詳しく説明されています here （そして、その素晴らしい！）
同じ問題がありました。私の解決策は、ViewPagerスクロールの開始時にrequestDisallowInterceptTouchEventを呼び出すことでした。
ここに私のコードがあります：
pager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
pager.setOnPageChangeListener(new SimpleOnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
pager.getParent().requestDisallowInterceptTouchEvent(true);
}
});
解決策は次のとおりです。
mPager.setOnTouchListener(new View.OnTouchListener() {
int dragthreshold = 30;
int downX;
int downY;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) event.getRawX();
downY = (int) event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
int distanceX = Math.abs((int) event.getRawX() - downX);
int distanceY = Math.abs((int) event.getRawY() - downY);
if (distanceY > distanceX && distanceY > dragthreshold) {
mPager.getParent().requestDisallowInterceptTouchEvent(false);
mScrollView.getParent().requestDisallowInterceptTouchEvent(true);
} else if (distanceX > distanceY && distanceX > dragthreshold) {
mPager.getParent().requestDisallowInterceptTouchEvent(true);
mScrollView.getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_UP:
mScrollView.getParent().requestDisallowInterceptTouchEvent(false);
mPager.getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return false;
}
});
基本的に、押したときにX、Yの値を設定し、ドラッグしながら距離を計算して、どの方向に進むかを決定します。 dragthresholdをいじって、ケースに合わせて最適化してください。
ViewPagerを使用すると、ページ変更イベントをキャプチャし、ScrollViewがページ変更の原因となったタッチイベントをインターセプトしないようにすることができます。
これは非常に単純で、 ViewGroup.requestDisallowInterceptTouchEvent(boolean) を使用します。また、ユーザーがViewPagerでドラッグを開始した場合でもScrollViewをドラッグできますが、ページャーでの水平方向のドラッグは、ScrollViewが干渉することなく引き続き機能します。
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Add Android:id for your ScrollView in your layout
final ScrollView sv = (ScrollView) findViewById(R.id.scrollview);
final ViewPager vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(new MyPagerAdapter(this));
// Use a page-change listener to respond to begin-drag events:
vp.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int newState) {
if (newState == ViewPager.SCROLL_STATE_DRAGGING) {
// Prevent the ScrollView from intercepting this event now that the page is changing.
// When this drag ends, the ScrollView will start accepting touch events again.
sv.requestDisallowInterceptTouchEvent(true);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
これは、Android Support v4 library on Android 2.3.4 and 4.2.1。
@Michael Herbigのソリューションを採用しました。これの利点は、ViewPager（ViewPagerIndicatorなど）だけでなく、setOnTouchListenerを許可するすべてのビューで機能し、自己完結型のクラスであるということです。
使用例：
// runStatsPager is a Android.support.v4.view.ViewPager;
runStatsPager.setOnTouchListener(new ViewInScrollViewTouchHelper(runStatsPager));
// runStatsPagerIndicator is a com.viewpagerindicator.TitlePageIndicator
runStatsPagerIndicator.setOnTouchListener(new ViewInScrollViewTouchHelper(runStatsPagerIndicator));
そしてクラス：
class ViewInScrollViewTouchHelper implements View.OnTouchListener {
private final ScrollView scrollView;
private final View viewInScrollView;
int dragthreshold = 30;
int downX;
int downY;
public ViewInScrollViewTouchHelper(View viewInScrollView) {
if (viewInScrollView == null) {
throw new IllegalArgumentException("viewInScrollView cannot be null.");
}
ViewParent parent = viewInScrollView.getParent();
ScrollView scrollView = null;
do {
if (parent instanceof ScrollView) {
scrollView = (ScrollView) parent;
break;
}
} while(parent != null && (parent = parent.getParent()) != null);
if (scrollView == null) {
throw new IllegalArgumentException("View does not have a ScrollView in its parent hierarchy.");
}
this.scrollView = scrollView;
this.viewInScrollView = viewInScrollView;
}
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) event.getRawX();
downY = (int) event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
int distanceX = Math.abs((int) event.getRawX() - downX);
int distanceY = Math.abs((int) event.getRawY() - downY);
if (distanceY > distanceX && distanceY > dragthreshold) {
viewInScrollView.getParent().requestDisallowInterceptTouchEvent(false);
scrollView.getParent().requestDisallowInterceptTouchEvent(true);
} else if (distanceX > distanceY && distanceX > dragthreshold) {
viewInScrollView.getParent().requestDisallowInterceptTouchEvent(true);
scrollView.getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_UP:
scrollView.getParent().requestDisallowInterceptTouchEvent(false);
viewInScrollView.getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return false;
}
}
public class WrapContentHeightViewPager extends ViewPager {
public WrapContentHeightViewPager(Context context) {
super(context);
}
public WrapContentHeightViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = 0;
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
child.measure(widthMeasureSpec, View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = child.getMeasuredHeight();
if (h > height) height = h;
}
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
@Override public boolean onTouch（View v、MotionEvent event）{
int dragthreshold = 30;
int downX = 0;
int downY = 0;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) event.getRawX();
downY = (int) event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
int distanceX = Math.abs((int) event.getRawX() - downX);
int distanceY = Math.abs((int) event.getRawY() - downY);
if (distanceY > distanceX && distanceY > dragthreshold) {
mViewPager.getParent().requestDisallowInterceptTouchEvent(false);
mScrollView.getParent().requestDisallowInterceptTouchEvent(true);
} else if (distanceX > distanceY && distanceX > dragthreshold) {
mViewPager.getParent().requestDisallowInterceptTouchEvent(true);
mScrollView.getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_UP:
mScrollView.getParent().requestDisallowInterceptTouchEvent(false);
mViewPager.getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return false;
}
上記の2つを使用すると、非常にうまく機能します。私も自分のコードで使用しました。
したがって、このアプローチでは、ViewPager（親）がイベントを盗んで現在のスクロールをキャンセルすることを心配することなく、XをScrollView方向にスクロールさせます。さらに重要なことは、ViewPagerがY方向にスクロール可能に配置されている領域を残すことです。
public class CustomViewPager extends ViewPager {
private GestureDetector mGestureDetector;
View.OnTouchListener mGestureListener;
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
mGestureDetector = new GestureDetector(context, new Detector());
}
@Override
public boolean onTouchEvent(MotionEvent motionEvent) {
mGestureDetector.onTouchEvent(motionEvent);
return super.onTouchEvent(motionEvent);
}
class Detector extends SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
requestDisallowInterceptTouchEvent(true);
return false;
}
}
}
ViewPagerのタッチロジックまたはScrollViewのロジックの変更であるため、ここでのソリューションはどちらもうまくいきませんでした。両方を実装する必要がありましたが、今ではそれが魅力のように機能します。
public class TouchGreedyViewPager extends ViewPager {
private float xDistance, yDistance, lastX, lastY;
public TouchGreedyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDistance = yDistance = 0f;
lastX = ev.getX();
lastY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
final float curX = ev.getX();
final float curY = ev.getY();
xDistance += Math.abs(curX - lastX);
yDistance += Math.abs(curY - lastY) / 3; // favor X events
lastX = curX;
lastY = curY;
if (xDistance > yDistance) {
return true;
}
}
return super.onInterceptTouchEvent(ev);
}
}
public class TouchHumbleScrollView extends ScrollView {
private float xDistance, yDistance, lastX, lastY;
public TouchHumbleScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDistance = yDistance = 0f;
lastX = ev.getX();
lastY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
final float curX = ev.getX();
final float curY = ev.getY();
xDistance += Math.abs(curX - lastX);
yDistance += Math.abs(curY - lastY) / 3; // favor X events
lastX = curX;
lastY = curY;
if (xDistance > yDistance) {
return false;
}
}
return super.onInterceptTouchEvent(ev);
}
}