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

144

我正在设计一个包含多个页面的视图。我希望上一页和下一页的边缘显示如下，并用两根手指滑动即可在页面之间切换。

在此处输入图片说明

我尝试使用此处ViewPager建议的负页边距，但仅在屏幕上显示边缘之一，而不同时显示。

或者，有什么方法可以将我的视图的一部分放置在屏幕外，然后对其进行动画处理，使其具有ViewPager字体效果。

我应该怎么做？谢谢 ！

android  android-viewpager  viewflipper  viewanimator 
— 高拉夫·阿罗拉（Gaurav Arora）
source
“仅在屏幕上显示边缘之一，而不能同时显示。” 您是否在第0页上，而只看到第1页的一部分？举例来说，也许您需要使用圆形寻呼机，然后将页面始终设置为“中间”位置。看到这篇文章和评论：stackoverflow.com/a/8304474/1851478
— logray 2012年

Answers:

100

引用有关此主题的博客文章：

第三种方法来自知名书籍《 Android Recipes》的合著者Dave Smith。他使用了一个自定义容器，使孩子们无法一次显示多个页面，从而向一个截然不同的方向发展。

他发布的示例代码展示了整个过程。他的容器（com.example.pagercontainer.PagerContainer）包装了ViewPager和setClipChildren(false);本身，因此即使将ViewPager焦点放在一个选定的页面上，只要坐标位于的ViewPager范围内，其他坐标超出范围的页面仍然可见PagerContainer。通过将调整ViewPager为小于PagerContainer，ViewPager可以将其页面调整为该大小，从而为其他页面留出空间。PagerContainer，但需要在触摸事件方面有所帮助，因为ViewPager它将仅在其自己的可见范围内处理滑动事件，而忽略侧面可见的任何页面。

在此处输入图片说明

— 常用软件
source
1
通过使用此功能，我可以显示上一页和下一页的一部分，如上图所示，但是现在我不想在图像上显示尖锐的边缘。我希望它们朝边缘模糊。请指导我如何我使用z-index实现相同效果
— Shruti 2013年
2
@Shruti-仅添加具有所需效果的叠加图像
— Daniel
2
我也这样做，但是它禁用了最后一项的过度滚动效果。有什么线索吗？
— Swayam
1
@CommonsWare：先生，我尝试了您的解决方案！效果很好。过度滚动在那里。现在唯一的问题是显示下一张卡，而不显示前一张卡。也就是说，如果我在第2页上，则可以看到第3页正在窥视，而第1页却没有。
— Swayam
2
@Swayam：我不知道。
— CommonsWare，2014年
110

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

在viewpager上设置左右填充，例如20dp。还要在viewpager上设置页面边距，例如，一半的页面填充。并且不要忘记禁用剪辑填充。

tilePager.setPadding(defaultGap, 0, defaultGap, 0);
tilePager.setClipToPadding(false);
tilePager.setPageMargin(halfGap);
— 托马斯·R。
source
2
提供了很好的解决方案。
— akash89
最简单和最佳方法
— HannahCarney
这是兽兽肯定答案考虑命名值XD
— silentsudo
1
边注：用自定义视图寻呼机变压器这不会工作
— voytez
@voytez变压器有什么解决方案吗？
— 亚历克斯
76

  1. 设置整个项目视图的左右填充。范例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>

  2. 然后将负页边距设置为PageView等于2 *（以前的视图填充）

    int margin = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());
mViewPager.setPageMargin(-margin);

  3. 可选的。将第一个项目的左填充设置为零，将最后一个项目的右填充设置为零，以隐藏空白边缘。您可以在PageAdapter或Page片段类中执行此操作。

— 谢尔盖
source
@Sergey，我无法在您的解决方案中使用它，您能举个例子吗？thx
— Marckaraujo 2013年
12
只是添加一个注释：使用此解决方案，当您从第1页滑到第2页时，第3页不在内存中，因此它会延迟显示。要解决此问题，只需添加-yourViewPager.setOffscreenPageLimit（2）;
— 何塞·巴博萨
我也这样做，但是它禁用了最后一项的过度滚动效果。有什么线索吗？
— Swayam
我似乎也无法使它正常工作...如果我使用的图像w / scale设置为中心裁剪，则边缘似乎随机显示。任何人都有可以共享的有效代码示例？
— 肯尼2014年
2
如何触摸第一个和最后一个项目？通过检查OnPageListener中的页面索引？
— Hardik9850 '17年
47

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

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

如果您需要在viewpager中的两个页面之间留出空间，请添加viewpager.setPageMargin（int）

Android ViewPager-在左右显示页面预览

— molu2008
source
3
这应该是正确的答案。我认为这可能在viewpager的早期版本中不起作用，但现在有效。
— 格雷格·恩尼斯
它在最后一页的首页左侧和右侧也添加了相同的页边距。任何解决方法
— Umesh Aawte
1
简短而清晰的答案。
— Imran Ahmed 2015年
1

从此处下载源代码（ViewPager具有上一页和下一页的边界）

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;
    }
}
— Deepshikha普里
source
1
该代码无法正常工作，其显示的左侧页面比右侧大
— Chirag Joshi
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.