Question

我正在尝试使用MultiViewPager实现viewpager 并使用谷歌的zoomoutpageTransformer作为效果，目的是实现这样的图像：

enter image description here

但我无法在左右显示这两个页面，每次我在屏幕中间显示一个页面！这是我的查看寻呼机代码：

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

这是我在xml中的viewpager：

<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>

这是我的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>

我试过的是 this 以及来自here的multiviewpager开发人员的回答任何人都可以帮助我实现目标吗？感谢

这是视图寻呼机适配器：

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);
}

}

Answer 1

从GitHub上的MultiViewPager示例中查看此示例片段页面布局：

<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>

宽度设置为RelativeLayout的{{1}}和宽度为200dp的内部match_parent。内部FrameLayout中的内容最终成为片段页面。

您的布局有FrameLayout，但不像内部app:matchChildWidth="@+id/textview_class_title"那样ViewGroup。

您需要重写片段页面布局，以便内部FrameLayout包含所有ViewGroup。

此外，请勿明确调用TextView，setPageMargin()根据所有测量结果在内部设置页边距。

如果您仍然无法解决此问题，我建议您从MultiViewPager的示例应用程序开始并修改它，直到获得您正在寻找的布局结果。

Answer 2

我的活动中有多个片段，我使用FragmentStatePagerAdapter作为PageAdapter，使用MultiViewPager作为ViewPager。

以下这些代码适用于Google的ZoomOutPageTransformer：

的活动：

    <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"/>

片段：

<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>

Answer 3

我刚用这个自定义的PageTransformer和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);
        }
    }
}

MultiViewPager + ZoomOutPageTransformer无法正常工作

3 个答案: