Viewpager all'interno di una scrollview non scorta corretto
-
28-10-2019 - |
Domanda
Ho una "pagina" che ha un numero di componenti e chi è il contenuto è più lungo dell'altezza del dispositivo. Bene, basta mettere tutto il layout (l'intera pagina) all'interno di un ScrollView
, nessun problema.
Uno dei componenti è un ViewPager
. Ciò rende correttamente, ma la risposta a un colpo/lancio non funziona correttamente, è nervosa e non sempre funziona. Sembra essere "confuso" con il ScrollView
, quindi funziona solo al 100% quando si lancia in una linea orizzontale esatta.
Se rimuovo il ScrollView
, il Viewpager risponde perfettamente.
Ho avuto una ricerca in giro e non l'ho trovato come un difetto noto. Qualcun altro ha sperimentato questo?
- Versione della piattaforma: 1.6
- Biblioteca di compatibilità v4.
- Dispositivo: HTC Incredible S
Di seguito è riportato un codice di esempio con cui testare, commenta ScrollView
per vederlo funzionare correttamente.
Attività:
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) {
}
}
Disposizione:
<?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>
Soluzione 2
Ulteriori letture hanno rivelato che ci sono problemi con i componenti di scorrimento all'interno dei componenti a scorrimento.
Una soluzione è quella di "disabilitare" lo scorrimento verticale di ScrollView sull'area del componente scorrevole contenuto, nel mio caso un mirino.
Il codice per questa soluzione è dettagliato qui (ed è semplicemente geniale!)
Altri suggerimenti
Ho avuto lo stesso problema. La mia soluzione era chiamare requestDisallowInterceptTouchEvent
Quando è iniziato la scorrimento ViewPager.
Ecco il mio codice:
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);
}
});
Ecco una soluzione:
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;
}
});
Fondamentalmente impostare i valori x, y quando si preme e calcola la distanza mentre si trascina per determinare in che modo vorremmo andare. Gioca con la resistenza alla dragter per ottimizzare per il tuo caso.
Con un ViewPager, è possibile acquisire eventi di cambio di pagina e impedire a ScrollView di intercettare l'evento Touch che ha causato la modifica della pagina.
Questo è molto semplice, usando ViewGroup.requestDisallowInterceptTouchEvent(boolean)
. Consente inoltre all'utente di trascinare ScrollView anche se avvia un trascinamento sul ViewPager, ma il trascinamento orizzontale sul cercapersone funzionerà comunque senza che ScrollView interferisca.
@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) {
}
});
}
Questo funziona per me con la libreria di supporto Android V4 su Android 2.3.4 e 4.2.1.
Ho adattato la soluzione da @Michael Herbig il vantaggio a questo è che funziona su qualsiasi visione che consente setOnTouchListener
, non solo un ViewPager (ad esempio ViewPagerIndicatore) ed è una classe autonoma.
Esempio di utilizzo:
// runStatsPager is a android.support.v4.view.ViewPager;
runStatsPager.setOnTouchListener(new ViewInScrollViewTouchHelper(runStatsPager));
// runStatsPagerIndicator is a com.viewpagerindicator.TitlePageIndicator
runStatsPagerIndicator.setOnTouchListener(new ViewInScrollViewTouchHelper(runStatsPagerIndicator));
E la classe:
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 (Visualizza V, evento MotionEvent) {
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;
}
Usa sopra due e funzionerà molto bene. Ho usato anche nel mio codice.
Quindi con questo approccio ho lasciato il ViewPager
scorrere nel X
direzione senza doversi preoccuparsi del ScrollView
(Genitore) Rubare l'evento e annullare la pergamena corrente. Ancora più importante, questo lascia anche l'area in cui il ViewPager
si trova scorrevole nel Y
direzione.
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;
}
}
}
Nessuna delle soluzioni qui ha funzionato bene per me perché è la modifica di ViewPager
Logica del tocco o ScrollView
logica. Ho dovuto implementare entrambi, ora funziona come un fascino.
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);
}
}
È possibile sovrascrivere il metodo istanziato nella tua classe Pageradapter aggiungendo uno scrollview a ciascuna pagina. Ecco un codice:
@Override
public Object instantiateItem(View collection, int position) {
ScrollView sc = new ScrollView(cxt);
sc.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
sc.setFillViewport(true);
TextView tv = new TextView(cxt);
tv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
tv.setText(pages[position]);
tv.setPadding(5,5,5,5);
sc.addView(tv);
((ViewPager) collection).addView(sc);
return sc;
}