首页 文章

具有上一页和下一页边界的ViewPager

提问于
浏览
124

我正在设计一个包含多个页面的视图 . 我希望上一页和下一页的边缘显示如下,并实现双指滑动以在页面之间切换 .

enter image description here

我尝试使用带有负页边距的 ViewPager 作为建议here,但是它只显示屏幕上的一个边缘,而不是同时显示两个边缘 .

或者,有什么方法可以将我的视图的一部分放在屏幕外,然后设置它的动画,给它一个 ViewPager 类型的效果 .

我该怎么办呢?谢谢 !

7 回答

  • 5

    要显示左右页面的预览,请设置以下两个值

    viewpager.setClipToPadding(false)
    viewpager.setPadding(left,0,right,0)
    

    如果在viewpager中需要两个页面之间的空格,则添加viewpager.setPageMargin(int)

    Android ViewPager - Show preview of page on left and right

  • 38

    引自己自a blog post on this subject

    第三种方法来自Dave Smith,他是备受好评的Android Recipes一书的合着者 . 他走向了一个非常不同的方向,使用一个自定义容器,禁止儿童剪辑,一次显示多个页面 . 他发布的示例代码显示了整个行动 . 他的容器(com.example.pagercontainer.PagerContainer)包装ViewPager并调用setClipChildren(false);因此,即使ViewPager专注于一个选定的页面,其他具有超出ViewPager边界坐标的页面仍然可见,只要它们适合PagerContainer . 通过将ViewPager的大小调整为小于PagerContainer,ViewPager可以将其页面大小调整为该大小,从而为其他页面留出空间 . 但是,PagerContainer需要帮助解决触摸事件,因为ViewPager只会处理其自身可见边界上的滑动事件,忽略侧面可见的任何页面 .

    enter image description here

  • 93

    我有一个类似的解决方案:

    在viewpager上设置左右填充,例如20dp . 还要在viewpager上设置页边距,例如寻呼机填充的一半 . 并且不要忘记禁用剪辑填充 .

    tilePager.setPadding(defaultGap, 0, defaultGap, 0);
    tilePager.setClipToPadding(false);
    tilePager.setPageMargin(halfGap);
    
  • 88
    • 为整个项目视图设置左右填充 . 示例xml(page_item.xml):
    <?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:paddingLeft="20dp"
    android:paddingRight="20dp"/>
    
    <TextView
        android:id="@+id/text1"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    
    </LinearLayout>
    
    • 然后将 PageView 的负页边距设置为等于2 *(上一个视图填充)
    int margin = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());
    mViewPager.setPageMargin(-margin);
    
    • 可选 . 为第一项设置零左填充,为右项填充为最后一项以隐藏空边 . 您可以在 PageAdapterPage 片段类中执行此操作 .
  • 72

    如果有人仍在寻找解决方案,我已经定制了ViewPage来实现它而不使用负边距,在这里找到一个示例项目https://github.com/44kksharma/Android-ViewPager-Carousel-UI它应该在大多数情况下工作但你仍然可以使用 mPager.setPageMargin(margin in pixel); 定义页边距

  • 1

    从这里下载源代码(ViewPager with previous and next page boundaries

    MainActivity.java

    package com.deepshikha.viewpager;
    
    import android.content.Context;
    import android.content.res.Configuration;
    import android.os.Build;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.app.FragmentStatePagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.util.DisplayMetrics;
    import android.util.Log;
    import android.util.SparseArray;
    import android.view.ViewGroup;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class MainActivity extends FragmentActivity {
    
        ViewPager pager;
        MyPageAdapter obj_adapter;
        String str_device;
    
        @Override
    
        public void onCreate(Bundle savedInstanceState) {
    
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            init();
    
    
        }
    
        private void init() {
            pager = (ViewPager) findViewById(R.id.viewpager);
            differentDensityAndScreenSize(getApplicationContext());
            List<Fragment> fragments = getFragments();
            pager.setAdapter(obj_adapter);
            pager.setClipToPadding(false);
    
    
            if (str_device.equals("normal-hdpi")){
                pager.setPadding(160, 0, 160, 0);
            }else if (str_device.equals("normal-mdpi")){
                pager.setPadding(160, 0, 160, 0);
            }else if (str_device.equals("normal-xhdpi")){
                pager.setPadding(160, 0, 160, 0);
            }else if (str_device.equals("normal-xxhdpi")){
                pager.setPadding(180, 0, 180, 0);
            }else if (str_device.equals("normal-xxxhdpi")){
                pager.setPadding(180, 0, 180, 0);
            }else if (str_device.equals("normal-unknown")){
                pager.setPadding(160, 0, 160, 0);
            }else {
    
            }
    
            obj_adapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
            pager.setPageTransformer(true, new ExpandingViewPagerTransformer());
            pager.setAdapter(obj_adapter);
        }
    
        class MyPageAdapter extends FragmentPagerAdapter {
    
            private List<Fragment> fragments;
    
            public MyPageAdapter(FragmentManager fm, List<Fragment> fragments) {
    
                super(fm);
    
                this.fragments = fragments;
    
            }
    
            @Override
    
            public Fragment getItem(int position) {
    
                return this.fragments.get(position);
    
            }
    
            @Override
    
            public int getCount() {
    
                return this.fragments.size();
    
            }
    
        }
    
        private List<Fragment> getFragments() {
    
            List<Fragment> fList = new ArrayList<Fragment>();
    
            fList.add(MyFragment.newInstance("Fragment 1",R.drawable.imags));
            fList.add(MyFragment.newInstance("Fragment 2",R.drawable.image1));
            fList.add(MyFragment.newInstance("Fragment 3",R.drawable.image2));
            fList.add(MyFragment.newInstance("Fragment 4",R.drawable.image3));
            fList.add(MyFragment.newInstance("Fragment 5",R.drawable.image4));
    
            return fList;
    
        }
    
        public int differentDensityAndScreenSize(Context context) {
            int value = 20;
            String str = "";
            if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_SMALL) {
                switch (context.getResources().getDisplayMetrics().densityDpi) {
                    case DisplayMetrics.DENSITY_LOW:
                        str = "small-ldpi";
                        // Log.e("small 1","small-ldpi");
                        value = 20;
                        break;
                    case DisplayMetrics.DENSITY_MEDIUM:
                        str = "small-mdpi";
                        // Log.e("small 1","small-mdpi");
                        value = 20;
                        break;
                    case DisplayMetrics.DENSITY_HIGH:
                        str = "small-hdpi";
                        // Log.e("small 1","small-hdpi");
                        value = 20;
                        break;
                    case DisplayMetrics.DENSITY_XHIGH:
                        str = "small-xhdpi";
                        // Log.e("small 1","small-xhdpi");
                        value = 20;
                        break;
                    case DisplayMetrics.DENSITY_XXHIGH:
                        str = "small-xxhdpi";
                        // Log.e("small 1","small-xxhdpi");
                        value = 20;
                        break;
                    case DisplayMetrics.DENSITY_XXXHIGH:
                        str = "small-xxxhdpi";
                        //Log.e("small 1","small-xxxhdpi");
                        value = 20;
                        break;
                    case DisplayMetrics.DENSITY_TV:
                        str = "small-tvdpi";
                        // Log.e("small 1","small-tvdpi");
                        value = 20;
                        break;
                    default:
                        str = "small-unknown";
                        value = 20;
                        break;
                }
    
            } else if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_NORMAL) {
                switch (context.getResources().getDisplayMetrics().densityDpi) {
                    case DisplayMetrics.DENSITY_LOW:
                        str = "normal-ldpi";
                        // Log.e("normal-ldpi 1","normal-ldpi");
                        str_device = "normal-ldpi";
                        value = 82;
                        break;
                    case DisplayMetrics.DENSITY_MEDIUM:
                        // Log.e("normal-mdpi 1","normal-mdpi");
                        str = "normal-mdpi";
                        value = 82;
                        str_device = "normal-mdpi";
                        break;
                    case DisplayMetrics.DENSITY_HIGH:
                        // Log.e("normal-hdpi 1","normal-hdpi");
                        str = "normal-hdpi";
                        str_device = "normal-hdpi";
                        value = 82;
                        break;
                    case DisplayMetrics.DENSITY_XHIGH:
                        //Log.e("normal-xhdpi 1","normal-xhdpi");
                        str = "normal-xhdpi";
                        str_device = "normal-xhdpi";
                        value = 90;
                        break;
                    case DisplayMetrics.DENSITY_XXHIGH:
                        // Log.e("normal-xxhdpi 1","normal-xxhdpi");
                        str = "normal-xxhdpi";
                        str_device = "normal-xxhdpi";
                        value = 96;
                        break;
                    case DisplayMetrics.DENSITY_XXXHIGH:
                        //Log.e("normal-xxxhdpi","normal-xxxhdpi");
                        str = "normal-xxxhdpi";
                        str_device = "normal-xxxhdpi";
                        value = 96;
                        break;
                    case DisplayMetrics.DENSITY_TV:
                        //Log.e("DENSITY_TV 1","normal-mdpi");
                        str = "normal-tvdpi";
                        str_device = "normal-tvmdpi";
                        value = 96;
                        break;
                    default:
                        // Log.e("normal-unknown","normal-unknown");
                        str = "normal-unknown";
                        str_device = "normal-unknown";
                        value = 82;
                        break;
                }
            } else if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_LARGE) {
                switch (context.getResources().getDisplayMetrics().densityDpi) {
                    case DisplayMetrics.DENSITY_LOW:
                        str = "large-ldpi";
                        // Log.e("large-ldpi 1","normal-ldpi");
                        value = 78;
                        break;
                    case DisplayMetrics.DENSITY_MEDIUM:
                        str = "large-mdpi";
                        //Log.e("large-ldpi 1","normal-mdpi");
                        value = 78;
                        break;
                    case DisplayMetrics.DENSITY_HIGH:
                        //Log.e("large-ldpi 1","normal-hdpi");
                        str = "large-hdpi";
                        value = 78;
                        break;
                    case DisplayMetrics.DENSITY_XHIGH:
                        // Log.e("large-ldpi 1","normal-xhdpi");
                        str = "large-xhdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_XXHIGH:
                        //Log.e("large-ldpi 1","normal-xxhdpi");
                        str = "large-xxhdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_XXXHIGH:
                        // Log.e("large-ldpi 1","normal-xxxhdpi");
                        str = "large-xxxhdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_TV:
                        //Log.e("large-ldpi 1","normal-tvdpi");
                        str = "large-tvdpi";
                        value = 125;
                        break;
                    default:
                        str = "large-unknown";
                        value = 78;
                        break;
                }
    
            } else if ((context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_XLARGE) {
                switch (context.getResources().getDisplayMetrics().densityDpi) {
                    case DisplayMetrics.DENSITY_LOW:
                        // Log.e("large-ldpi 1","normal-ldpi");
                        str = "xlarge-ldpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_MEDIUM:
                        // Log.e("large-ldpi 1","normal-mdpi");
                        str = "xlarge-mdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_HIGH:
                        //Log.e("large-ldpi 1","normal-hdpi");
                        str = "xlarge-hdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_XHIGH:
                        // Log.e("large-ldpi 1","normal-hdpi");
                        str = "xlarge-xhdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_XXHIGH:
                        // Log.e("large-ldpi 1","normal-xxhdpi");
                        str = "xlarge-xxhdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_XXXHIGH:
                        // Log.e("large-ldpi 1","normal-xxxhdpi");
                        str = "xlarge-xxxhdpi";
                        value = 125;
                        break;
                    case DisplayMetrics.DENSITY_TV:
                        //Log.e("large-ldpi 1","normal-tvdpi");
                        str = "xlarge-tvdpi";
                        value = 125;
                        break;
                    default:
                        str = "xlarge-unknown";
                        value = 125;
                        break;
                }
            }
    
            return value;
        }
    }
    
  • 1

    前段时间我需要这样的功能并准备了一个小型库,它使用 RecyclerViewPagerSnapHelper(在v7支持库的25.1.0版本中添加)而不是经典的 ViewPager

    MetalRecyclerPagerView - 您可以在那里找到所有代码和示例 .

    主要由单个类文件组成:MetalRecyclerViewPager.java(和两个xmls:attrs.xmlids.xml) .

    希望它有助于某人:)

相关问题