嵌套在 ViewPager 中的 ViewPager

Question

I'm really newbie in android and I would appreciate any help for my course work.

I need to do:

1) two ViewPagers (not nested) in one Activity

2) two ViewPagers (one ViewPager is nested in another ViewPager)

I found similar question, but I could not use it. ViewPager inside ViewPager

I add first ViewPager and do not know what to do next

LayoutInflater inflater = LayoutInflater.from(this); //this - context of my activity
List<View> pages = new ArrayList<View>();
View page = inflater.inflate(R.layout.activity_main, null);
//next I adding some buttons on page
pages.add(page);

page = inflater.inflate(R.layout.activity_main2, null);  //my second page
//some buttons
pages.add(page);

page = inflater.inflate(R.layout.activity_main3, null);  //my third page
//some buttons
pages.add(page);

SamplePagerAdapter pagerAdapter = new SamplePagerAdapter(pages);
ViewPager viewPager = new ViewPager(this);
viewPager.setAdapter(pagerAdapter);
viewPager.setCurrentItem(0);          
setContentView(viewPager);

If I add ViewPager2 and say setContentView(viewPager2), I lost my viewPager1. I spent a lot of time for this two questions, please, some help...

//This is my sketch what I need to do. Sorry, I can't attach my scetches...

Answer 1

I added an OnTouchListener to the interior ViewPager :

private OnTouchListener mSuppressInterceptListener = new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(
                event.getAction() == MotionEvent.ACTION_DOWN &&
                v instanceof ViewGroup
        ) {
                ((ViewGroup) v).requestDisallowInterceptTouchEvent(true);
        }
        return false;
    }
};

This just detects ACTION_DOWN touch events on the inner ViewPager and prevents the outer one from intercepting it. Because it returns false, only the ACTION_DOWN event should be hit; all the other events will be ignored. You can add this listener to every element you want to "protect" from the outer ViewPager 's scrolling, though obviously if you want to pick up any other touch behaviour on those elements you'll need to deal with them inside the touch listener and possibly implement a better listener.

Answer 2

I think you should reconsider having a viewpager inside another viewpager. You will have a lot of problems with the touch events plus the user experience might be confusing/tricky, I suggest you to rethink that one.

Now for question 1:

Declare both viewpagers in the xml file of the activity (/layout/activity.xml), for example:

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

    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

</LinearLayout>

Then inflate the xml on the onCreate method of your activity and wire both of the viewpagers:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);

    mViewpager1 = (ViewPager) findViewById(R.id.viewpager1);
    mViewpager2 = (ViewPager) findViewById(R.id.viewpager2);
}

Don't forget to declare those two variables private ViewPager mViewpager1, mViewpager2;

Then you can do whatever you want with mViewpager1 and mViewpager2. One more tip, i suggest you to use adapters to set the pages instead of adding them manually one by one to each viewpager, it will be much cleaner and better to operate with.

Answer 3

A solution about having a nested Viewpager and disabling the nested Viewpager swiping (if you want to set the selected pages with buttons in the nested)

For the nested You SubClass ViewPager and you add these:

 public boolean onInterceptTouchEvent(MotionEvent event) {
        //if you want to send the Touches to this Viewpager (the nested) //change true to false
      return true;    
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // Never allow swiping to switch between pages on this inner 

        //send swipe to father instead of child
        if (this.getParent()!=null &&  this.getParent() instanceof ViewPager) {
            ((ViewPager) this.getParent()).onTouchEvent(event);
        }
        return false;
    }

In the Layouts you put this:

<com.mypackage.mycustomapp.myviews.MyViewPager
            android:id="@+id/myNestedviewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

Answer 4

2. Use single viewPager with a ConcatAdapter

//sample usage
val strings = listOf("a", "b", "cde", "f", "g", "h")
viewPager.adapter = ConcatAdapter(
   strings.partition({ string -> string.length > 1 }, { string -> string.split("") })
     //{{a, b}, {c, d, e}, {f, g, h}}
      .map { StringAdapter(it) }.toList() 
)

/**
 * custom partition function as kotlin List extension
 */

fun <E> List<E>.partition(shouldFlatten: (e: E)->Boolean, flatten: (e: E)->List<E>) : List<List<E>>{
   val partitions = mutableListOf<List<E>>()
   var currentPartition = mutableListOf<E>()
   val listIterator = this.listIterator()
   while (listIterator.hasNext()) {
      val next = listIterator.next()
      if (shouldFlatten(next)) {
         if (currentPartition.isNotEmpty()) {
            partitions.add(currentPartition)
            currentPartition = mutableListOf()
         }
         partitions.add(flatten(next))
      } else {
         currentPartition.add(next)
      }
   }
   if (currentPartition.isNotEmpty()) {
      partitions.add(currentPartition)
   }
   return partitions
}