How to add multiple contents in view pager?

问题

Hi I am working with android apps.I had created a swipeable view using view pager which contains only images at the right end. Now I want to add some textviews and buttons in the same page viewer for each view. How can I add text views and buttons along with page viewer ??? here is my code

Swipe_adapter.java

  public class Swipe_adapter extends PagerAdapter {
  Context context;
  private int[] GalImages = new int[] {
  R.drawable.app1,
  R.drawable.app2,
  R.drawable.gosms
  };

    ArrayList<HashMap<String,String>> list=new ArrayList<HashMap<String, String>>();
    Map map=new HashMap ();

   String[] str=new String[]
                        {
         "app1","app2","app3"

                        };

   Swipe_adapter(Context context){
   this.context=context;
  }
  @Override
   public int getCount() {
    return GalImages.length;
   }

  @Override
  public boolean isViewFromObject(View view, Object object) {
    return view == ((ImageView) object);

  }

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
  ImageView imageView = new ImageView(context);
  int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
  imageView.setPadding(padding, padding, padding, padding);
  imageView.setScaleType(ImageView.ScaleType.FIT_END);
  imageView.setImageResource(GalImages[position]);
  ((ViewPager) container).addView(imageView, 0);
  return imageView;
  }

  @Override
   public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((ImageView) object);
  }
  }

here is my Fragment class

    public class FeaturedFragment extends Fragment {

      @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.fragment_featured, container, false);
        ViewPager viewPager = (ViewPager)rootView.findViewById(R.id.view_pager);
         Swipe_adapter adapter = new Swipe_adapter(getActivity());
         viewPager.setAdapter(adapter);

        return rootView;
     }
  }

回答1:

You can create a layout containing your Image, Button, Text. Then inflate that layout in the pager adapter instantiateItem

mylayout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/tv_myText"
        style="?android:textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imgMap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center" />


    <Button
        android:id="@+id/btnTopup"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />        

</RelativeLayout>

In your PagerAdapter use

public Object instantiateItem(ViewGroup container, int position) {

    LayoutInflater inflater = ((Activity)context).getLayoutInflater();
    View myView = inflater.inflate(R.layout.mylayout, null);
        //Access yout textView, ImageView, Button like below
    TextView myText = (TextView)myView.findViewById(R.id.tv_myText);

    return myView;
  }

context can be obtained by passing it in the PagerAdapter constructor from the calling activity.

Hope this helps.

回答2:

I encountered the same issue when using Mike Ortiz's TouchImageView (for zoom capabilities) within a ViewPager (which I can only get to take one main view, in this case the extended ImageView), and worked out a neat solution. I wanted to add some dynamic text to a series of maps that the user swiped though, adding "Map 3/13" etc. as an overlay. I got around this by instantiating the extra views (TextView in my case) outside of the ViewPager adapter, then adding an onPageChangeListener to the viewPager object which updated the textView.

Firstly I set up the XML to take both views (the RelativeLayout allows the text to overlay the image):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayoutPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<org.mypackagename.ExtendedViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true" />

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/viewpager"
    android:layout_alignLeft="@id/viewpager"
    android:layout_alignRight="@id/viewpager"
    android:layout_alignTop="@id/viewpager"
    android:layout_gravity="right"
    android:layout_weight="1.0"
    android:gravity="right"
    android:paddingRight="5dip"
    android:paddingTop="5dp"
    android:text=""
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textStyle="bold" />

</RelativeLayout>

My ViewPager adapter instantiateItem method only handles the TouchImageView view:

public View instantiateItem(ViewGroup container, int pos) {
        TouchImageView img = new TouchImageView(container.getContext());
        img.setImageDrawable((Drawable) imageHolder.get(pos));
        container.addView(img, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        return img;
}

And finally I created the listener in the onCreate method after setting up the TextView and ViewPager views:

vPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        private int currentPage;

        @Override
        public void onPageSelected(int pos) {
            currentPage = pos;
            StringBuilder sb = new StringBuilder();
            sb.append("Map ");
            sb.append((pos + 1));
            sb.append("/");
            sb.append(allMaps.size());
            myTextView.setText(sb);
        }

        public final int getCurrentPage() {
            return currentPage;
        }
});

Now, when I swipe through the maps, the TextView is also updated. You can't do this from within the adapter instantiateItem method as the position doesn't seem to reflect what page you are on when it's updated by the swipe (no idea why!)...

来源：https://stackoverflow.com/questions/21725950/how-to-add-multiple-contents-in-view-pager