2015-06-14 16 views
9

che sto cercando di attuare viewpager utilizzando MultiViewPager e utilizzo di Google zoomoutpageTransformer come effetto, lo scopo è raggiungere qualcosa di simile a questa immagine:MultiViewPager + ZoomOutPageTransformer non funziona correttamente

enter image description here

ma non riesco a visualizzare quelli due pagine a destra e a sinistra, ogni volta che ottengo una singola pagina in mezzo allo schermo! questo è il mio visualizzazione del codice cercapersone:

 mViewPager.setPageMargin(
      -64); 
    mAdapter = new ViewPagerAdapter(getActivity(), mClasses); 
    mViewPager.setPageTransformer(true, new ZoomOutPageTransformer()); 
    mViewPager.setAdapter(mAdapter); 

questo è il mio viewpager in xml:

<ir.phzrobin.Utils.MultiViewPager 
    android:id="@+id/viewPager" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_margin="20dp" 
    app:matchChildWidth="@+id/textview_class_title" > 
</ir.phzrobin.Utils.MultiViewPager> 

e questo è il mio layout di pagina viewpager:

<TextView 
     android:id="@+id/textview_class_title" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_centerVertical="true" 
     android:layout_centerHorizontal="true" 
     android:layout_gravity="top" 
     android:layout_margin="5dp" 
     android:gravity="center_horizontal" 
     android:padding="10dp" 
     android:text="fsafjabf" 
     android:textAlignment="gravity" 
     android:textColor="@color/white" 
     android:textSize="17sp" /> 

    <TextView 
     android:id="@+id/textview_class_teacher" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/textview_class_title" 
     android:layout_centerVertical="true" 
     android:layout_margin="5dp" 
     android:gravity="center_horizontal" 
     android:padding="10dp" 
     android:text="fsafjabf" 
     android:textAlignment="gravity" 
     android:textColor="@color/white" 
     android:textSize="17sp" /> 

    <ImageView 
     android:id="@+id/button_options" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_margin="20dp" 
     android:layout_marginRight="2dp" 
     android:background="@drawable/overflow" /> 
</RelativeLayout> 

quello che ho provato è this e anche la risposta dello sviluppatore multiviewpager da here qualcuno può aiutarmi per favore a raggiungere un obiettivo? grazie

questo è adattatore vista cercapersone:

public class ViewPagerAdapter extends PagerAdapter { 

// ImageLoader imageLoader = ImageLoader.getInstance(); 
// DisplayImageOptions options; 
// private ImageLoadingListener imageListener; 

Context activity; 
List<Classes> items; 

public ViewPagerAdapter(Context activity, List<Classes> items) { 

    this.activity = activity; 
    this.items = items; 
} 

public void setItems(List<Classes> items) { 
    this.items = items; 
    notifyDataSetChanged(); 
} 

@Override 
public int getCount() { 
    // TODO Auto-generated method stub 
    return items.size(); 
} 

@Override 
public boolean isViewFromObject(View arg0, Object arg1) { 
    // TODO Auto-generated method stub 
    return arg0 == arg1; 
} 

@Override 
public Object instantiateItem(ViewGroup container, int position) { 
    final int pos = position; 
    // TODO Auto-generated method stub 
    LayoutInflater inflater = (LayoutInflater) activity 
      .getSystemService(Activity.LAYOUT_INFLATER_SERVICE); 
    View view = inflater.inflate(R.layout.row_viewpager, container, false); 

    TextView mClassTitle = (TextView) view 
      .findViewById(R.id.textview_class_title); 
    mClassTitle.setText("عنوان درس: " + items.get(pos).getSubject()); 
    mClassTitle.setTypeface(AppFont.GetAppFont()); 
    ((TextView) view.findViewById(R.id.textview_class_teacher)) 
      .setText("نام استاد: " + items.get(pos).getMasterName()); 
    ((TextView) view.findViewById(R.id.textview_class_teacher)) 
      .setTypeface(AppFont.GetAppFont()); 
    RelativeLayout mLayout = (RelativeLayout) view 
      .findViewById(R.id.rl_viewpager); 
    mLayout.setOnClickListener(new OnClickListener() { 

     @Override 
     public void onClick(View v) { 

      Intent _intent = new Intent(ContextVal.GetAppContext(), 
        ClassNotes.class); 
      _intent.putExtra("CLASSID", 
        String.valueOf(items.get(pos).getID())); // set selected 
                   // item id 
                   // into 
                   // intent 
                   // activity 
                   // to use in 
                   // Classnotes 
                   // Activity! 
      activity.startActivity(_intent); // open notes activity 

     } 
    }); 
    ImageView mOverFlow = (ImageView) view.findViewById(R.id.button_options); 
    mOverFlow.setOnClickListener(new OnClickListener() { 

     @Override 
     public void onClick(View v) { 
      // TODO Auto-generated method stub 
      PopupMenu popup = new PopupMenu(ContextVal.GetAppContext(), v); 
      popup.getMenuInflater().inflate(R.menu.poupup_menu, popup.getMenu()); 
      popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { 
       public boolean onMenuItemClick(MenuItem item) { 
        if(item.getIcon() != null) 
        {//edit item 
         Intent _ClassWindow = new Intent(ContextVal.GetAppContext(), 
           AddNewClass.class); 
         _ClassWindow.putExtra("CLASSID", String.valueOf(items.get(pos).getID())); 
         activity.startActivity(_ClassWindow);      } 
        else{//delete item 
         AlertDialog.Builder builder = new AlertDialog.Builder(
           ContextVal.GetAppContext()); 

         builder.setTitle("حذف کلاس"); 
         builder.setMessage("آیا مطمعن هستید که میخواهید این درس را حذف کنید ؟"); 

         builder.setPositiveButton("بله", new DialogInterface.OnClickListener() { 

          public void onClick(DialogInterface dialog, int which) { 
           // Do nothing but close the dialog 
           Log.e("onClick", "YES"); 
           DatabaseHandler _db = new DatabaseHandler(ContextVal 
             .GetAppContext()); 
           _db.deleteClass(items.get(pos)); 
           _db.deleteClassNotes(items.get(pos).getID()); 
           ContextVal.mViewFragment.RefreshViewPager(); // Refresh Items ! 
                      // and remove 
                      // deleted item from 
                      // user's eyes lol 
           dialog.dismiss(); 
          } 
         }); 

         builder.setNegativeButton("خیر", new DialogInterface.OnClickListener() { 

          @Override 
          public void onClick(DialogInterface dialog, int which) { 
           // Do nothing 
           Log.e("onClick", "NO"); 
           dialog.dismiss(); 
          } 
         }); 
         AlertDialog alert = builder.create(); 
         alert.show();      } 

        return true; 
       } 
      }); 
      popup.show(); 
     } 
    }); 

    container.addView(view, 0); 
    return view; 
} 

@Override 
public void destroyItem(ViewGroup container, int position, Object object) { 
    // TODO Auto-generated method stub 
    container.removeView((View) object); 
} 

}

+1

Si prega di inserire il codice per ViewPagerAdapter –

+0

@krislarson aggiunti a mettere in discussione –

risposta

1

Guardate questo esempio layout di pagina frammento dal campione MultiViewPager su GitHub:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="${relativePackage}.${activityClass}"> 

    <FrameLayout 
     android:id="@+id/vg_cover" 
     android:layout_width="200dp" 
     android:layout_height="match_parent" 
     android:layout_centerInParent="true" 
     tools:ignore="UselessParent"> 

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:background="@drawable/bg_page" 
      android:scaleType="centerInside" 
      android:src="@drawable/im_pixplicity" 
      tools:ignore="ContentDescription" /> 

     <TextView 
      android:id="@+id/tv_item" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_margin="16dp" 
      android:gravity="center" /> 

    </FrameLayout> 

</RelativeLayout> 

C'è un RelativeLayout con larghezza impostata su match_parent e una interna FrameLayout con larghezza esplicita di 200 dpi. Ciò che è in quello interno FrameLayout finisce per essere la pagina del frammento.

Il layout è app:matchChildWidth="@+id/textview_class_title" ma non è un ViewGroup come il numero interno FrameLayout.

È necessario riscrivere il layout della pagina del frammento in modo da avere un interno ViewGroup con tutti i tuoi TextView s all'interno.

Inoltre, non chiamare esplicitamente setPageMargin(), MultiViewPager imposta internamente il margine della pagina in base a tutte le misurazioni.

Se si riscontrano ancora problemi durante il funzionamento, si consiglia di iniziare con l'applicazione di esempio per MultiViewPager e modificarla finché non si ottengono i risultati del layout che si stanno cercando.

+0

sua larghezza non funziona, ho appena impostato a 400dp, matchildwidth anche rimosso, e ha cercato tutte le forme possibili, ma non mostra ancora due classi a sinistra ea destra –

+0

Ho appena notato che la larghezza di MultiViewPager è wrap_content e penso che dovrebbe essere match_parent. –

+0

non è ancora lo stesso! Mi hai chiesto di caricare il codice, ma il fatto è che non ci sono classi o layout extra da affrontare! tutto è qui –

1

Ho più frammenti nella mia attività e io uso FragmentStatePagerAdapter come PageAdapter e MultiViewPager come ViewPager.

Questi codice qui sotto funziona bene con Google ZoomOutPageTransformer:

attività:

<com.tencent.qest.ui.components.MultiViewPager 
    android:id="@+id/pager" 
    android:layout_marginTop="20dp" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    app:matchChildWidth="@+id/card_container" 
    android:layout_below="@+id/pager_numbers"/> 

Frammento:

<FrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content"> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/card_container" 
    android:layout_width="240dp" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_horizontal"> 
    <ImageView 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/img_banner_card" 
     android:layout_gravity="center_horizontal" 
     android:minHeight="64dp" 
     android:src="@drawable/place_holder_1" 

     android:layout_marginBottom="-4dp" 
     android:adjustViewBounds="false" 
     android:scaleType="center" 
     android:maxHeight="64dp" /> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     tools:context="com.tencent.qest.ui.fragments.SimpleInfoCardFragment" 
     android:padding="18dp" 
     android:background="@color/accent" 
     android:gravity="center_vertical" 
     android:layout_below="@+id/img_banner_card" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true"> 

     <!-- TODO: Update blank fragment layout --> 


     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      style="@style/txt_card_normal" 
      android:text="10.发放入职礼品" 
      android:id="@+id/tv_Title" 
      android:textSize="30dp" 
      android:paddingBottom="5dp" 
      android:layout_gravity="left" 
      android:paddingTop="5dp" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      style="@style/txt_card_normal" 
      android:text="地点:4楼休闲厅" 
      android:id="@+id/tv_SubTitle" 
      android:layout_gravity="center_horizontal|left" 
      android:textSize="20dp" 
      android:paddingBottom="5dp" 
      android:paddingTop="4dp" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Tips:必须完成前9项后才可以领取入职礼品哦!" 
      android:id="@+id/tv_Content" 
      android:layout_gravity="center_horizontal|left" 
      style="@style/txt_card_normal" /> 
    </LinearLayout> 
</RelativeLayout> 

0

ho appena fatto bene con questo PageTransformer costume e MultiviewPager :

public class ScalePageTransformer implements ViewPager.PageTransformer{ 
    private static final float scaleMax = 0.8f; 
    @Override 
    public void transformPage(View view, float position) { 
     if (position<=0){ 
      float scale = scaleMax + (1+position)*0.2f; 
      ViewCompat.setScaleX(view, scale); 
      ViewCompat.setScaleY(view, scale); 
     } else { 
      float scale = scaleMax + (1-position)*0.2f; 
      ViewCompat.setScaleX(view, scale); 
      ViewCompat.setScaleY(view, scale); 
     } 
    } 
} 
Problemi correlati